1.jQuery的介绍
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，
能够极大地简化JavaScript编程。
jQuery对象：
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象
$("#i1").html()的意思是：获取id值为i1的元素的html代码。其中html()是jQuery里的方法。
相当于：document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也不能使用 jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象
jQuery的使用:
1.首先要下载jQuery,放到html文件下
2.在html中boby中引入jQuery <script src="jquery-3.3.1.js" ></script>
3.如果进行jQuery的操作，在script标签中执行
查找标签
选择器
1.基本选择器
1.所有元素选择器：$("*")
2.id选择器：$("#id")
3.标签选择器：$("tagName")
4.class选择器：$(".className")
配合使用：$("div.c1") ?// 找到有c1 class类的div标签。and的关系
5.组合选择器：$("#id, .className, tagName") 把符合条件的都能找到，or的关系，逗号分开2.层级选择器
找到的都是y标签
1.$("x y");// x的所有后代y（子子孙孙）
2.$("x > y");// x的所有儿子y（儿子）
3.$("x + y")// 找到所有紧挨在x后面的y
4.$("x ~ y")// x之后所有的兄弟y
<ul class="dropdown-menu"> ???<li><a href="#">Rain</a></li> ???<li><a href="#">Egon</a></li> ???<li><a href="#">Yuan</a></li> ???<li role="separator" class="divider"></li> ???<li><a href="#">Q1mi</a></li></ul><div>你好吗</div><span>我很好</span><div>你怎么样</div>
1.$(".dropdown-menu ?a") #r.fn.init(4) [a, a, a, a, 4个符合条件的，找到的都是a标签2.$(".dropdown-menu>a") ?#fn.init 无结果3.$(".dropdown-menu>li") #r.fn.init(5) [li, li, li, li.divider, li4.$(".dropdown-menu+div") ?#r.fn.init [div,5.$(".dropdown-menu~div") ?#r.fn.init(2) [div, div,3.属性选择器
<input type="text" name="username">
<input type="checkbox" name="gender" value="basketball">篮球
1.[attribute]
2.[attribute=value]// 属性等于
<input type="checkbox">
$("input[type=‘checkbox‘]");// 取到checkbox类型的input标签
$("input[name=‘username‘]") // 取到name属性为username类型的input标签
$("input[type!=‘text‘]");// 取到类型不是text的input标签
4.基本筛选器
:first // 第一个 ?$("div:first");
:last // 最后一个 $("#1 >div:last");
:eq(index)// 索引等于index的那个元素 ?$("#1 > div:eq(1)");
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
not和has:not(元素选择器)// 找到所有满足not条件的标签，即在这个标签内没有noy中的条件:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)111111111144 ??????$("#1:has(div)");将后代中有div标签的id=1的标签找出来。找到的时id=1这个大标签$("div:has(h1)")// 找到所有后代中有h1标签的div标签$("li:not(“a")// 找到所有本身不含a标签的li标签$("span:not("icon-bar")找到所有本身不含icon-bar类的span标签5.表单常用筛选
:text
:password
:file
:radio
:checkbox
$("input[type=‘checkbox‘]");可以直接写成$(":checkbox")
表单对象属性:
:enabled ?#可用的
:disabled
:checked ?#单选和复选框
:selected #下拉框
$(":selected") ?// 找到所有被选中的option
<select id="s1"> ?<option value="beijing">北京市</option> ?<option value="shanghai">上海市</option> ?<option selected value="guangzhou">广州市</option> ?<option value="shenzhen">深圳市</option></select>$(":selected") ?// 找到所有被选中的option对符合条件的标签做css样式：$("div").css("color", "red")筛选器方法
1.下一个元素：指同一级的元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
<div id="1"> ???<div>天青色等烟雨 ???????<div class="sub">江南</div> ???????<div>而我在等你</div> ????</div></div><div id="2">只要你敢不懦弱</div><div id="3">凭什么我们要错过</div>$("#1").next();显示的是<div id="2">只要你敢不懦弱</div>这个标签$("#1").nextAll() 显示所有和它同级的元素<div id="2">只要你敢不懦弱</div> <div id="3">凭什么我们要错过</div>2.上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
3.父亲元素：
$("#id").parent() ?$("#2").parent();父元素是body
$("#id").parents() ?// 查找当前元素的所有的父辈元素 找祖先，一直找到html
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$(".jk").parentsUntil("#1");
4.儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们 #上下都找
?find和filter ??
find查找元素：
$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p") 等价于$("div p") 找到div标签中的所有p标签
$("div").find("span") #r.fn.init(8) [span.sr-only, span.icon-bar,
filter筛选：用于缩小匹配的范围
$("div").filter(".c1") ?// 等价于 $("div.c1") 从结果集中过滤出有c1样式类的div标签。找到的时div标签
$("div").filter(".navbar-header") #r.fn.init [div.navbar-header
操作标签
样式类操作
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
<div class="container">1.$(".container").addClass("item") ?<div class="container item ">2.$(".container").hasClass("item") ??#true将所有p标签的字体设置为红色：$("p").css("color", "red"); 菜单操作
<div class="menu"> ???<div class="title">菜单一</div> ???<div class="item-list hide"> ???????<div>内容一</div> ???????<div>内容二</div> ???????<div>内容三</div> ???</div> ???<div class="title">菜单二</div> ???<div class="item-list hide"> ???????<div>内容一</div> ???????<div>内容二</div> ???????<div>内容三</div> ???</div> ???<div class="title">菜单三</div> ???<div class="item-list hide"> ???????<div>内容一</div> ???????<div>内容二</div> ???????<div>内容三</div> ???</div></div><script> ???// 找到所有 class 中有title的div标签 ???$(".title").on("click", function () { ???????// 把其它的选项隐藏掉 ???????// $(this) ???????// 找到当前点击标签的兄弟标签 ?--> 含有title class的兄弟标签 ???????$(this).siblings(".title").next().addClass("hide"); ???????$(this).next().removeClass("hide"); ???????// 方法二： ????????$(".items").addClass("hide"); ?//批量操作 ????????$(this).next().removeClass("hide"); ???????// 当前点击的标签 下一个标签 显示出来--> 从class移除hide ???????// this ?--> 当前操作的标签 ?--> DOM对象 --> 不能调用jQuery对象 ???????// $(this) ???--> DOM对象用$()包起来就能转换成jQuery对象,就能调用jQuery的方法 ???????// $(this).next() ?--> 找到了当前点击标签的下一个标签 ???})</script>jQuery
原文地址：https://www.cnblogs.com/zgf-666/p/9164719.html