day20190911笔记
js_访问节点元素_document系列方法：
first_jQuery.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery使用</title>
</head>
<body>
</body>
<script src="js/jquery-1.11.0.js"></script>
<script>
/* jQuery加载页面 */
/*完整加载页面语法:*/
$(document).ready(function(){
alert("你好!jQuery");
});
/*简写加载页面语法 */
$(function(){
alert("再次你好!jQuery");
});
/* js加载页面
onload js的页面加载事件
* */
window.onload = function(){
alert(1);
}
window.onload = function(){
alert(2);
}
window.onload = function(){
alert(3);
}
</script>
</html>
jQuery选择器使用：
<!DOCTYPE html>
jQuery选择器使用_基本选择器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery选择器使用</title>
</head>
<body>
<!--div#d>p+ul>li*5-->
<div id="d">
<p>课程体系有哪些?</p>
<ul>
<li>Java编程</li>
<li>Html5+CSS3</li>
<li>JavaScript/jQuery</li>
<li>MySql</li>
<li>JavaWeb</li>
</ul>
</div>
<div class="dd"></div>
<div class="ddd"></div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
/*加载网页*/
$(document).ready(function(){
/*使用jQuery的基本选择器操作css样式
语法: 操作单个css属性
jQuery元素.css("css样式属性","css样式属性值");
* 操作多个css属性
* jQuery元素.css({"css样式属性1":"css样式属性值1","css样式属性2":"css样式属性值2"});
* */
/* 链式操作 */
$("#d").css("border","1px solid red").css("width","500px").css("margin","0px auto");
$("p").css({"font-size":"30px","color":"red"});
$(".dd,.ddd").css({"width":"100px","height":"100px","border":"1px solid green"});
});
</script>
</html>
jQuery选择器使用_层次选择器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="over" style="">
<ul class="list_aa" style="left:0;" type="rollbox">
<li type="rollitem" dd_name="第1帧" style="">
<ul class="product_ul " id="component_852138__6407_6402_6394__6394" ddt-area="6394" dd_name="商品">
<li class="line1 " nname="book-104770-12627_2-698508_1" ddt-pit="1" dd_name="1">
<a title="遇见未知的自己（全新修订版）" class="img" href="http://product.dangdang.com/23927251.html" target="_blank"><img src="http://img3m1.ddimg.cn/40/17/23927251-1_l_14.jpg" alt="遇见未知的自己（全新修订版）"></a>
<p class="name" ddt-src="23927251">
<a title="遇见未知的自己（全新修订版）" href="http://product.dangdang.com/23927251.html" target="_blank">遇见未知的自己（全新修订版）</a>
</p>
<p class="author"><span class="author_t"></span>张德芬 著，博集天卷 出品</p>
<p class="price"><span class="rob"><span class="sign">¥</span><span class="num">19</span><span class="tail">.00</span></span><span class="price_r"><span class="sign">¥</span><span class="num">38</span><span class="tail">.00</span></span>
</p>
<div class="icon_pop"><span style="background: url(http://img4.ddimg.cn/00035/pic/xsq.png) no-repeat 0px 0px; _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/xsq.png',sizingMethod='noscale');" class="product_tags"></span></div>
</li>
<li class="line2 " nname="book-104770-12627_2-698508_2" ddt-pit="2" dd_name="2">
<a title="做点自己看得上的事，爱些自己看得上的人" class="img" href="http://product.dangdang.com/25574732.html" target="_blank"><img src="http://img3m2.ddimg.cn/62/36/25574732-1_l_3.jpg" alt="做点自己看得上的事，爱些自己看得上的人"></a>
<p class="name" ddt-src="25574732">
<a title="做点自己看得上的事，爱些自己看得上的人" href="http://product.dangdang.com/25574732.html" target="_blank">做点自己看得上的事，爱些自己看得</a>
</p>
<p class="author"><span class="author_t"></span>陈默默 著，紫云文心 出品</p>
<p class="price"><span class="rob"><span class="sign">¥</span><span class="num">19</span><span class="tail">.10</span></span><span class="price_r"><span class="sign">¥</span><span class="num">45</span><span class="tail">.00</span></span>
</p>
<div class="icon_pop"><span style="background: url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0px 0px; _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="product_tags"></span></div>
</li>
</ul>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script src="js/dd.js" type="text/javascript"></script>
</html>
jQuery选择器使用_属性选择器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" name="newsletter" value="Hot Fuzz" />Hot
<input type="checkbox" name="newsletter" value="Cold Fusion" />Cold
<input type="date" name="accept" value="Evil Plans" />Evil
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
/* 匹配input标签中的type属性 */
var chs = $("input[type]");
console.log("匹配input标签中的type属性:")
console.log(chs);
//匹配input标签中的type中具体属性值 ***
var chss = $("input[type='checkbox']");
console.log("匹配input标签中的type中具体属性值");
console.log(chss);
});
</script>
</html>
------------------ - - - - - - - - - - - - ----------------------------------
js/dd.js
/*加载工厂函数/加载页面* */
$(document).ready(function(){
/* 使用jQuery的css样式,动态添加的行内样式 */
/* 基本选择器 _ 类选择器 */
$(".over").css({"width":"500px","border":"1px solid gray",
"margin":"0px auto","font-size":"12px"});
/*基本选择器 _ 标签选择器 */
$("ul").css("list-style","none");
/* 层次选择器_后代选择器 */
$(".over .product_ul").css("display","flex");
/* 层次选择器_子选择器 */
$(".list_aa>li").css("border","2px solid green");
});
js_访问节点元素.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js_访问节点元素</title>
</head>
<body>
<ul id="list">
<li>周一</li>
<li>周二</li>
<li>周三</li>
</ul>
<div class="d"></div>
</body>
<script>
/* 节点属性 和 element属性区别 :
节点属性 会获取解析空格产生的文本节点元素,从而导致获取指定元素内容时产生误差;
element属性: 不会获取解析空格产生的文本节点元素
*
* */
/*访问ul标签下的第一个li标签元素*/
//通过节点属性firstChild获取指定元素下的第一个子节点,注意当前元素是节点元素还是文本元素
var first = document.getElementById("list").firstChild;
console.log(first);
console.log(first.innerText);
//通过element属性
var firstEle = document.getElementById("list").firstElementChild;
console.log(firstEle);
console.log(firstEle.innerText);
</script>
</html>
js_访问节点元素_document系列方法.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js_访问节点元素</title>
</head>
<body>
<ul id="list">
<li>周一</li>
<li>周二</li>
<li>周三</li>
</ul>
<div class="d" style="border: 1px solid red;height: 50px;width: 500px;"></div>
</body>
<script>
//通过element属性获取第一li标签元素
var firstEle = document.getElementById("list").firstElementChild;
var firstText = firstEle.innerText;
console.log(firstEle);
console.log(firstText);
//通过标签选择器的方法将获取的firstText进行赋值
/* getElementById("id选择器名称"):根据指定的id选择器获取对应的元素内容,返回的是单个对象
*
* getElementsByTagName("标签名"):根据标签名获取对应的元素内容,返回的是一个集合对象
* getElementsByClassName("类样式名称"):根据class类样式获取对应的元素内容,返回的是一个集合对象
*/
document.getElementsByClassName("d")[0].innerText = firstEle;
document.getElementsByTagName("div")[0].innerText = firstText;
</script>
</html>
敢于接受，敢于面对，拥有一颗强大的内心。接受面对解决。活在当下，做好当下。反正迟早都要接受。理解知识。多敲
jQuery默写笔记：
1.jQuery:是基于js封装的类库,设计思想是: 写少量的代码,实现大量的功能;
jQuery封装了大量js的功能,使用jQuery能实现的,js一定能实现;
2.使用jQuery的步骤
一 、引用jQuery的开发环境
二 、 加载网页元素
完整语法: $(document).ready(function(){
//js/jQuery 编码
});
注: $ 在此处就是 jQuery
3.使用jQuery的选择器操作页面元素
语法: $(选择器).事件/动作();
基本选择器: 标签选择器 <div></div>
类选择器 .class
ID选择器 #id
并集选择器 .class,#id
全选选择器 *
层次选择器:
后代选择器 E F
子选择器 E>F
相邻元素选择器 E+F
同辈元素选择器 E~F
4.使用jQuery的基本选择器操作css样式
语法: 操作单个css属性
jQuery元素.css("css样式属性","css样式属性值");
操作多个css属性
jQuery元素.css({"css样式属性1":"css样式属性值1","css样式属性2":"css样式属性值2"});
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器