jQuery
Posted zgf-666
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。
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, li 4.$(".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>