JQuery
是JavaScript类库
特点
1）jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。
2）jQuery是免费、开源的，使用MIT许可协议。
3）jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。
4）除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页
开始入门
jQuery实现根据id、class和标签名称查找DOM元素的方式几乎与CSS选择器是一模一样的。不过需要注意的是，两者还是有些细微的差别的，jQuery选择器返回的是jQuery对象，document.querySelector和document.querySelectorAll返回的是DOM对象。
<body>
<div id="parent">
</div>
<table>
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr class="row">
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr class="row">
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr class="row">
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
</table>
<ul>
<li class="list">
cate1
</li>
<li class="list">
cate1
</li>
<li class="list">
cate1
</li>
</ul>
<script>
$(function () {
// 获取 id 为 parent 的 div 元素
// var parEl = $("#parent");
//var parEl = document.getElementById("parent");
// 获取所有 tr 标签元素
// var trEls = $("tr");
//var trEls = document.getElementsByTagName("tr");
// 获取所有 class 为 list 的元素
//var listEls =$(".list") ;
//var listEls = document.getElementsByClassName("list");
//console.log(parEl.nodeName + "+" + trEls.length + "+" + listEls.length);
//css选择器
var parEl = document.querySelector("div");
console.log(parEl.nodeName);//div
var parEl2 = document.querySelectorAll("tr");
console.log(parEl2.length)
var parEls = document.querySelectorAll("li");
console.log(parEls.length)
})
</script>
</body>
操作dom节点属性
增加节点，删除节点 获取节点 修改节点
toggleClass
$("button").click(function(){
$("p").toggleClass("main");
});
这串代码的意思就是：如果所有 <p> 元素有class=‘main’就去除，若没有则加上，
$("li").toggleClass("active",true);//有没有都加上（fasle不管有没有都去掉）
为li标签加上class属性，传入toggleClass方法的函数必须返回一个字符串值，并且这个返回的字符串值是以空格分隔的class名
<body>
<ul class="article-list">
<li><h3>原始章第一</h3></li>
<li><p>夫道、德、仁、义、礼五者，一体也。</p></li>
<li><p>道者，人之所蹈，使万物不知其所由。</p></li>
<li><p>德者，人之所得，使万物各得其所欲。</p></li>
<li><p>仁者，人之所亲，有慈慧恻隐之心，以遂其生存。</p></li>
<li><p>义者，人之所宜，赏善罚恶，以立功立事。</p></li>
<li><p>礼者，人之所履，夙兴夜寐，以成人伦之序。</p></li>
</ul>
</body>
<script>
var i =0;
$("li").toggleClass(function () {
i++;
return 'bgcolor'+i;
})
</script>
attr
attr(属性名)
获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined ）
attr(属性名, 属性值)
设置属性的值 （为所有匹配的元素设置一个属性值$(“.txt”).attr(“value”)"，前面跟"$(“.txt”).val()"一样
$("a:first").attr("href","#1")
//获取下面这段HTML中的family2中的第二个链接的href值
<div id="family1"></div>
<div id="family2">
<ul>
<li><a href="#1">Item 1</a></li>
<li><a href="#2">Item 2</a></li>
<li><a href="#3">Item 3</a></li>
<li><a href="#4">Item 4</a></li>
<li><a href="#5">Item 5</a></li>
</ul>
<script>
$(function () {
//获取下面这段HTML中的family2中的第二个链接的href值
console.log($("#family2").find("a:nth-child(2)").attr('href'));#1
console.log($($('ul a')[1]).attr('href'));//#2
console.log($("li").first().next().children().attr("href"));//#2
console.log($($("#family1").siblings().find('a')[1]).attr('href'));//#2
console.log($("#family2").children().children().first().next().children().attr("href"))//#2
})
</script>
遍历：
each
//在每个文章后面加入字数
// var pList = $('p');
// for (var i = 0; i < pList.length; i++ ) {
// var cont = $(pList[i]).text() ;
// $(pList[i]).text(cont + cont.length);
// }
$('p').each(function () {
var cont = $(this).text();
$(this).text(cont+cont.length)
})
Dom对象与Jquery对象的转化
jQuery对象---->DOM对象，使用[index]或者get（index）：例如
var $cr = $("#cr"); //这是jQuery对象
var cr =$cr[0]; //从jQuery对象得到DOM对象 方式一
var cr = $cr.get(0) //从jQuery对象得到DOM对象 方式二
DOM对象----->jQuery对象，使用$()把DOM对象包装起来，就可以获得一个jQuery对象，例如：
var cr = document.getElementById("cr"); // 变量cr是DOM对象
var $cr = $(cr); //变量$cr是jQuery对象
转换后可以任意使用jQuery中的方法！
$(function () {
//获取dom对象
var obj = document.getElementById("d");
//获取jquery对象
var obj2 = $("#d");
//dom对象转化成jquery对象
//$(obj).html("hello jquery");
//jquery对象转化成dom
obj2.get(0).innerHTML="hello jquery...."
});
<body>
<div id="d"></div>
</body>
window与document
window指浏览器的窗口，document指浏览器窗口中加载的dom元素。在浏览器中，当其中加载的页面超过一屏时， ( w i n d o w ) . h e i g h t ( ) 与 (window).height()与 (window).height()与(document).height()的值是不等的
load与ready
load事件在jquery中主要用来代替原生的window.onload
load事件需要页面完全加载完才可以触发事件，所谓的完全加载完，指dom结构加载完毕和所有的链接加载完。比如页面中有大量的图片，必须等每一个图片都加载完，才叫完全加载完毕。
不过，load事件跨浏览器兼容性很差，不推荐使用load事件
$(window).ready(fn),$(document).ready(fn),$('div').ready(fn)等
ready事件不要求等待页面完全加载完，只需要dom结构加载完就可以触发。
ready事件可以同时注册多个，执行时按照事件注册的先后顺序进行。
选择器
1.基本选择器：
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
//1.显示内容
let val = $("#d1").html();//获得所有的html
// alert(val)
let text = $("#d1").text();//获取元素中的所有文本
// alert(text)
//2.添加（将class=d2元素中的内容后面添加字段）
$(".d2").each(function () {
// $(this).html($(this).html()+"加油")
})
//3.查看div的个数
let size = $("div").size();
alert(size)//4
//4.将class=d2,id=d1里的内容改变
$(".d2,#d1").html("java");
//5.得到所有div中class=d2的位置（index）
let index = $("div").index($(".d2"));//没找到-1，索引从0开始查找
alert(index);
})
</script>
<body>
<div id="d1"><a>超链接</a>jquery</div>
<div class="d2">学习</div>
<div class="d3">学习</div>
<div>js</div>
</body>
2.层级选择器：
父子关系、兄弟关系
//1.获取id=d的所有<a>子元素
alert($("#d a").size());
//2.获取id=d的直接<a>子元素
alert($("#d>a").size);
//3.获取 id=d的第一个<p>兄弟元素
alert($("#d+ p").size());
//4.获取id=d的所有<p>兄弟元素
alert($("#d~p").size());
//5.将id=d下的所有子元素<a>的文本颜色设置红色
$("#id d").css({"color":"red"});
<div id="d">
<a> java</a>
<p><a>javase</a></p>
<a>javaee></a>
</div>
<p>go</p>
<p>C</p>
3.基本过滤器：
<script type="text/javascript">
$(function (){
//设置表格第一行为红色
$("
最低0.47元/天 解锁文章
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
