jQuery是一个快速,小巧,功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作,
事件处理动画和Ajax更加简单。通过多功能性和可扩展性的结合,
jQuery改变了数百万人编写JavaScript的方式。
jquery 中 98%的都是方法
为什么要使用jquery?
JavaScript书写代码的不足
-
window.onload 事件有事件覆盖的问题,因此只能写一个事件。
-
代码容错性差。
-
浏览器兼容性问题。
-
书写很繁琐,代码量多。
-
代码很乱,各个页面到处都是。
-
动画效果很难实现。
- https://jquery.com/ 下载对应的jQuery
- https://www.bootcdn.cn/ 通过cdn的方式引入
- 标签选择器 $('div') - id选择器$('#box') - class选择器$('.box') - 后代 $("x y") // x的所有后代y(子子孙孙) - 子代 $("x >y") // x的所有儿子y(儿子) - 组合 $("#id, .className, tagName") //多个标签配合使用 - 交集 //表示2者选中之后共有的特征 - 兄弟 $("x + y") // 找到所有紧挨在x后面的y $("x ~ y") // x之后所有的兄弟y
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class = "box" id = "wrap"> <p class="active">alex</p> <p class="active">alex</p> <p class="active">alex</p> <p class="active">alex</p> <p class="active">alex</p> <p class="active">alex</p> <p class="active">alex</p> </div> <script src="./jquery-3.3.1.min.js"></script> <script> $(function(){ //jQuery的选择器(获取DOM对象 注意,它获取的是jQuery对象而不是jsDOM对象) $("div")[0].style.backgroundColor = "red"; console.log($("#wrap")); //id选择器 console.log($(".box")); //类选择器 console.log($("#wrap .active")); //后代选择器 // 获取到jQuery对象,click时间 $("#wrap .active").click(function(){ // console.log(this.innerText); //错误写法因为获取到的是jQuery对象而不是结束DOM对象 // //isdom =>jQuery对象 // console.log($(this)); console.log($(this).text()); //点击获取jqery对象的text值 7个alex $(this).text("haha"); //将获取当前点击的jQuery值修改 console.log($(this).text("haha")); //打印出来修改的值 }) }) </script> </body> </html>
2基本过滤器
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素,从 0 开始计数 :odd // 匹配所有索引值为奇数的元素,从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>天龙八部</li> <li>射雕英雄传</li> <li>神雕侠侣</li> <li>倚天屠龙记</li> </ul> <input type="text"> <script src="./jquery-3.3.1.min.js"></script> <script> $(function () { //获取值,eq()的使用 console.log($("li:eq(1)").css("color")); //设置单个值 // $("li:eq(1)").css("color", 'red'); $("li:eq(1)").css({ color: "red", backgroundColor: 'blue' }); //属性选择器 $("input[type='text']").css({ backgroundColor: 'yellow' }) }) </script> </body> </html>
3 筛选选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>天龙八部</li> <li class="item"><a href="">晓峰</a></li> <li>神雕侠侣</li> <li>倚天屠龙记</li> </ul> <input type="text"> <script src="./jquery-3.3.1.min.js"></script> <script> $(function () { //查的是后代 length: 1 console.log($("li").find("a")); //亲儿子 ul下的所有li console.log($("ul").children()); //亲老爸 a标签的亲爸 console.log($("a").parent()); // console.log($('ul li').eq(1)) }) </script> </body> </html>
小结:
- find() 查找的是后代 - children() 查找的是亲儿子 - parent()查找的是亲爹 - eq() 选择匹配的元素 - siblings() 选择兄弟元素(除了自己本身)