一.概念：
???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>
二.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").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>"); ???}); ?</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") ?//// 删除样式
50 ?Jquery 库
原文地址：https://www.cnblogs.com/knighterrant/p/10180520.html