50 Jquery 库
一.概念：
1.jquery 的选择器和ccs 相同
2.jquery对象， dom对象的集合，类似python中list，有自己的各种方法和属性 // [dom1,dom2,.....]
3.方便之处，可以省略原生js中for 循环的操作
4.jquery 对象和dom对象的关系：
jquery对象转化成dom 对象：$()[]---------->dom对象 例子：$("li")[0] 切片
dom对象转化成jquery对象：$(dom)---------->jquery对象
5.入口函数 ，当js代码放在head头部时，需要写入口函数
导入jquery.js 文件
<script src="jquery-3.3.1.js"></script>
<script>
入口函数，相当于window.onload=function(){写js代码}
$(function(){写js代码})
</script>
6.事件委派 封装在 on 方法中
一般是 父节点或祖父节点等，委派某个事件给下面的子节点,实现父节点下，子节点同步性能的作用。
格式： $(父节点或祖父节点等).on(事件，字节点或子孙节点，function（）{}）
例子1：$("ul").on("click","li",function(){alert($(this).html()});
例子2：$("table").on（”click”，“#td1”,function(){$(this).parent().parent().remove()}） //此事例是表单中的操作
二.jquery 选择器 和 筛选器
1.基本选择器
$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")
2.层级选择器
$(".outer div") 后代选择器 子子孙孙
$(".outer>div") 子代 ，只包含儿子
$(".outer+div") 毗邻，下面的第一个
$(".outer~div") 该dom对象下面的兄弟
3.基本筛选器 ：冒号有筛选的含义，选出
$("li:first") 或$("li").first() 用后面这种比较好些，不用字符串的拼接
$("li:eq(2)") 或$("li").eq(2)
$("li:even")
$("li:gt(1)")
4.属性选择器
$("'[自定义属性名]'")
$('[id="div1"]')
$('["alex="sb"][id]')
5.表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
5.表单属性选择器
:enabled
:disabled
:checked
:selected
例子：$("input:checked")
6.过滤筛选器
$("li").eq(2)
$("li").first()
$("ul li").hasclass("test")
7.查找筛选器
1. 查找子标签：
$("div").children(".test")
$("div").find(".test")
2.向下查找兄弟标签：
$(".test").next()
$(".test").nextAll()
$(".test").nextUntil()
3.向上查找兄弟标签：
$("div").prev()
$("div").prevAll() //括号里面还可以写条件 $("div").prev(":lt(4)") //该节点前所有兄弟中索引小于4的兄弟标签
$("div").prevUntil("标签名") //不包含，括号里面的标签
4.查找所有兄弟标签：
$("div").siblings() //不包含自己
5.查找父标签：
$(".test").parent()
$(".test").parents() //一层一层往上找父亲
$(".test").parentUntil()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src ="jquery-3.3.1.js"></script> <script> //选择器 //入口函数 $(function () { //基础选择器 // $(".c1").css("color","red"); // $(".c3").css("color","red"); // $(".c3:first").css("color","red"); // $(".c3").first().css("color","red"); // $(".c3:last").css("color","red"); // $(".c3").last().css('color',"red"); // $(".c3:even").css("color","red");//偶数 // $(".c3:odd").css("color","red");//奇数 // $(".c3:gt(2)").css("color","red");//索引大于2的 // $(".c3:lt(2)").css("color","red");//索引小于2的 // $("[alex]").css("color","red");//自定义属性选择器 // $("[alex='123']").css("color","red"); // $("[alex='123'][peiqi]").css("color","red"); // $("[type='checkbox']").attr("checked","checked"); // $(":checkbox").attr("checked","checked"); //进阶筛选器 // $(".c5 :checked"); //筛选.c5下被选中的标签的集合 // $(".c3:first").css("color","red"); // $(".c3").first().css("color","red"); // var index =2; // $(".c3:"+"eq("+index+")").css("color","red"); //需要字符串的拼接，麻烦 // $(".c3").eq(index).css("color","red"); //不需要字符串的拼接 //判断某个标签是否拥有那个属性 // console.log($("#i1").hasClass("c1"));//true // console.log($("[yuan]").hasClass("c7")); //true,一个对象拥有就行 //导航选择器 //查找兄弟标签 // 向下查找兄弟标签 // $("#i2").next().css("color","red");//下一个 // $("#i2").nextAll().css("color","red");//向下找所有的兄弟 // $("#i2").nextUntil(".c8").css("color","red");//不包括until中的那个 //向上查找兄弟标签 // $("#i2").prev().css("color","red");//上一个兄弟 // $("#i2").prevAll().css("color","red");//向上找所有的兄弟 // $("#i2").prevUntil("#i3").css("color","red");//向上找兄弟直到#i3，不包括#i3 //找到所有的兄弟标签，不包括自己 // $("#i2").siblings().css("color","red"); //查找子孙标签 // $(".p1").children().css("color","red"); // $(".p1").children("p").css("color","red"); // $(".p1").find("p").css("color","red");//find 和children的区别，find必须加条件 // $(".p1").children(":first").css("color","red");//第一个儿子 // $(".p1").children().first().css("color","red"); //查找父标签 // $('.c10').parent().css("color","red");//找到父标签 // $(".c10").parents() //找到一层一层往上找父标签 // $(".c10").parents.Until("body")/一层一层往上找父标签到body结束，且不包括body }) </script> </head> <body> <div class="c1" id="i1">DIV</div> <div class="c2"> <p class="c4">111</p> <a href="">click</a> </div> <div class="p1"> <p class="c3" id="i3">222</p> <p class="c3">333</p> <p class="c3" id="i2">444</p> <p class="c3">555</p> <p class="c3 c8">666</p> <p class="c3">777</p> </div> <div alex="123" peiqi="678">alex和配齐</div> <div alex="123">alex</div> <div alex="234">egon</div> <div peiqi="678">8888</div> <div class="c5"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </div> <div class="c6" yuan="123">123</div> <div class="c7" yuan="234">234</div> <div class="c9"> <p>111</p> <p>222</p> <div class="c10"> <p>333</p> </div> <a href="">click</a> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <ul class="box"> <li>123</li> <li>234</li> <li>456</li> <li>567</li> <li class="c1">678</li> </ul> <button class="add">ADD</button> <button class="rem">remove</button> <script> //jquery 事件绑定格式： $(选择器).事件（function（）{}） // $("ul").click(function () { // alert($(this).html()); // }); // 事件委派 $("ul").on("click","li",function () { alert($(this).html()); }); $(".add").click(function () { // $(".box").appendChild('<li>789</li>');不能这样写 $(".box").append("<li>789</li>"); }); //如何删除最一个孩子标签 $(".rem").click(function () { // $(".box").children(":last").css("color","red"); // $(".box").remove($(".box").children(":last"));//这个不行,语法不是这样的 $(".box").children(":last").remove(); //如何删除 }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .left{ width: 15%; height: 600px; float: left; background-color: wheat; } .right{ float: left; width: 85%; height: 600px; background-color: lightgray; } .title{ text-align: center; line-height: 30px; background-color: #0e90d2; color: white; } .item{ padding: 10px; } .hide{ display: none; } </style> <script src="jquery-3.3.1.js"></script> </head> <body> <div class="outer"> <div class="left"> <div class="item"> <div class="title">菜单一</div> <ul class="con hide"> <li>111</li> <li>111</li> <li>111</li> </ul> </div> <div class="item"> <div class="title">菜单二</div> <ul class="con hide"> <li>222</li> <li>222</li> <li>222</li> </ul> </div> <div class="item"> <div class="title">菜单三</div> <ul class="con hide"> <li>333</li> <li>333</li> <li>333</li> </ul> </div> </div> <div class="right"></div> </div> <script> //jquery 版的菜单栏实现 $(".title").click(function () { // $(this).next().removeClass("hide");//操作完之后的对象还是$(this).next() // $(this).parent().siblings().children(".con").addClass("hide"); $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide"); }) </script> </body> </html>
四.jquery 操作
1 文本操作
$("").html() //获取值
$("").text()
$("").html("参数") //设置内容
$("").text("参数")
2 属性操作
$().attr("") //获取属性值
$().attr("","") // 添加属性和值
$("p").attr("alex")
$("p").attr("alex","dsb") //添加属性和值
$("p").removeAttr("class") // 删除属性
3 class 操作
$("p").addClass("c1") // 添加样式
$("p").removeClass("c1") //// 删除样式
4.节点的删除和添加
删除某节点：
jquery节点对象.remove()
添加某节点：
例子：$(".box").append("<li>789</li>");
有疑问可以加wx:18179641802，进行探讨
