目录
前端07 /jQuery初识
1.jquery介绍
1.1 jquery的优势
1.链式编程： 多个操作（函数）以点(.)连成链，形成链式表达 比如.show()和.html()可以连写成.show().html()。2.隐式迭代： 隐式对应的是显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。
1.2 jquery是什么?
1.jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。2.js库是把我们常用的复杂功能封装到简单的方法中，我们用的时候，将库直接引入然后调用方法即可。3.初期主要是如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能API。这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。4.版本说明： jQuery 有三个大版本： 1.x版本：最新版为 v1.11.3。 2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）。 3.x版本。
1.3 jquery的导入
下载链接：jQuery官网 https://jquery.com/中文文档：jQuery AP中文文档https://code.jquery.com/jquery-3.4.1.js 未压缩版https://code.jquery.com/jquery-3.4.1.min.js 压缩版导入方式：方式一： 下载:保存在本地文件里 引入:方式二（网络地址引入）：
2.jQuery的使用
2.1使用 jQuery 的基本步骤
下载 ：jQuery有两个文件，一个是jquery-3.4.1.js(未压缩版)，一个是jquery-3.4.1.min.js(压缩版,推荐项目上线时使用)关于jQuery的相关资料： 官网：http://jquery.com/ 官网API文档：http://api.jquery.com/ 汉化API文档：http://www.css88.com/jqapi-1.9/ jquery 在线手册：http://hemin.cn/jq/ 注意：导包的代码一定要放在js代码的最上面。
2.2 jQuery的$符号
jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候：从打印结果可以看出，$ 代表的就是 jQuery。$就是jQuery名字的简写,实际上是一回事儿
2.3jQuery的入口函数
原生 js 的入口函数指的是：window.onload = function() {}; 如下：
//原生 js 的入口函数。页面上所有内容加载完毕，才执行。 //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。 window.onload = function () { alert(1); } jQuery的入口函数，有以下几种写法：
写法一：文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(document).ready(function () { alert(1); }) 写法二：文档加载完毕，图片不加载的时候，就可以执行这个函数。（写法一的简洁版）
$(function () { alert(1); }); 写法三：文档加载完毕，图片也加载完毕的时候，在执行这个函数。
$(window).ready(function () { alert(1); }) jQuery入口函数与js入口函数的区别：
区别一：书写个数不同：- Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。- jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。区别二：执行时机不同：- Js的入口函数是在**所有的文件资源加载**完成后，才执行。这些**文件资源**包括：页面文档、外部的js文件、外部的css文件、图片等。- jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的**外部资源**都加载完成。文档加载的顺序：从上往下，边解析边执行。
3.js中的DOM对象 和 jQuery对象比较（重点，难点）
3.1 二者之间的区别
通过 jQuery 获取的元素是一个jq对象数组，其中包含着原生JS中的DOM对象。举例：
针对下面这样一个div结构：
通过原生 js 获取这些元素节点的方式是：
var myBox = document.getElementById("app"); //通过 id 获取单个元素 var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组 var divArr = document.getElementsByTagName("div"); //通过标签获取的是伪数组 通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）
//获取的是数组，里面包含着原生 JS 中的DOM对象。 console.log($('#app')); console.log($('.box')); console.log($('div')); 总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。
3.2 jquery对象和dom对象的关系和转换
jquey方法找到的标签对象称为jquery对象原生js找到的标签对象称之为DOM对象dom对象只能调用dom对象的方法，jquery对象只能用jquery方法，不能互通
1、 DOM 对象 转为 jQuery对象：
$(js对象);
2、jQuery对象 转为 DOM 对象：
jquery对象[index]; //方式1（推荐） jquery对象.get(index); //方式2
jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：
$('div')[1].style.backgroundColor = 'yellow';$('div')[3].style.backgroundColor = 'green'; 4.jQuery查找标签
4.1 jquery选择器
基本选择器、层级选择器、属性选择器
4.1.1基础选择器
$("#id") //不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器$("#id") //id选择器$("tagName") //标签选择器$(".className") //class选择器$("*") //通用选择器$("div.c1") // 交集选择器 找到有含有c1类的div标签$("#id, .className, tagName") //并集选择器div.c1交集选择器 div,p并集选择器$('div.box')k.fn.init [div.box, prevObject: k.fn.init(1)]0: div.boxlength: 1prevObject: k.fn.init [document]__proto__: Object(0)$('div,p,a')k.fn.init(4) [div.box, a, a, p, prevObject: k.fn.init(1)] 示例代码
4.1.2 层级选择器
空格 后代选择器 >子代选择器 +毗邻选择器 ~弟弟选择器x和y可以为任意选择器$("x y");// x的所有后代y（子子孙孙）$("x > y");// x的所有儿子y（儿子）$("x + y")// 找到所有紧挨在x后面的y$("x ~ y")// x之后所有的兄弟y 示例代码
- 111
- 222
- 333
- aaa
- bbb
- ccc
4.1.3 属性选择器
$('[属性名]') 必须是含有某属性的标签$('a[属性名]') 含有某属性的a标签$('选择器[属性名]') 含有某属性的符合前面选择器的标签$('选择器[属性名="aaaa"]') 属性名=aaa的符合选择器要求标签$('选择器[属性名$="xxx"]') 属性值以xxx结尾的$('选择器[属性名^="xxx"]') 属性值以xxx开头的$('选择器[属性名*="xxx"]') 属性值包含xxx$('选择器[属性名1][属性名2="xxx]') 拥有属性1,且属性二的值='xxx',符合前面选择器要求的 示例写法
// 示例,多用于input标签$("input[type='checkbox']");// 取到checkbox类型的input标签$("input[type!='text']");// 取到类型不是text的input标签 4.2 jquery筛选器
4.2.1 基础筛选器
$('选择器:筛选器'):first // 第一个:last // 最后一个:eq(index)// 索引等于index的那个元素:even // 匹配所有索引值为偶数的元素，从 0 开始计数:odd // 匹配所有索引值为奇数的元素，从 0 开始计数:gt(index)// 匹配所有大于给定索引值的元素:lt(index)// 匹配所有小于给定索引值的元素:not(元素选择器)// 移除所有满足not条件的标签:has(元素选择器)// 根据含有某个后代筛选 示例写法
$('li:has(span)'); $("div:has(h1)")// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来$("div:has(.c1)")// 找到所有后代中有c1样式类（类属性class='c1'）的div标签$("li:not(.c1)")// 找到所有不包含c1样式类的li标签$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签 示例代码
基本过滤选择器
- 哈哈哈哈，基本过滤选择器
- 嘿嘿嘿
- 天王盖地虎
- 小鸡炖蘑菇
简单绑定事件的示例
// 绑定事件的方法$('#btn').click(function () { $('.mode')[0].classList.remove('hide'); $('.shadow')[0].classList.remove('hide'); jquery写法: $('.mode,.shadow').removeClass('hide');}) 4.2.2 表单筛选器
type筛选器
$(':text')$(':password')$(':radio')$(':checkbox')$(':file')$(':submit')$(':reset')$(':button')注意 : date type的input是找不到的 示例代码
用户名:密码:sex: 男 女 不详找到type为text的input标签:$(':text')
表单对象属性（状态筛选器）
enableddisabledcheckedselected$(':disabled')jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]$(':enabled')jQuery.fn.init(15) [input, input, input, input, input, input, input, input, input, input, input, select, option, option, option, prevObject: jQuery.fn.init(1)]$(':checked')jQuery.fn.init(4) [input, input, input, option, prevObject: jQuery.fn.init(1)]$(':selected')$(':checkbox:checked')jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]$('input:checkbox:checked')jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)] 示例代码
用户名:密码:sex: 男 女 不详操作: 找到可以用的标签 -- $(':enabled') 找select标签被选中的option标签 $(':selected')
4.2.3 jquery的筛选器方法
//找兄弟$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选//找弟弟$("#id").next()$("#id").nextAll()$("#id").nextUntil("#i2") //直到找到id为i2的标签就结束查找，不包含它//找哥哥(找的顺序是从下往上的)$("#id").prev()$("#id").prevAll()$("#id").prevUntil("#i2") //找祖辈$("#id").parent()$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。 //找儿子$("#id").children();// 儿子们 //过滤$("div").first() // 获取匹配的第一个元素$("div").last() // 获取匹配的最后一个元素$("div").eq(n) // 索引值等于指定值的元素，n是索引$("div").not() // 从匹配元素的集合中删除与指定表达式匹配的元素$("div").find("p") //后代选择器，在所有div标签中找后代的p标签$("div").filter(".c1") // 交集选择器，从结果集中过滤出有c1样式类的$("div").has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 示例代码
我是第一个span标签 我是第二个span标签 我是第三个span标签
- 2
- 3
- 4
- 5
5. 链式表达式
- 大狗
- 二狗
- 三狗
- 四狗
- 五狗
- 六狗
- 七狗
6.操作标签
6.1 样式操作
样式类操作 addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。 hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
示例代码
I 》$(".c1").hasClass('c1')true》$(".c1").hasClass('green')false》$(".c1").addClass('green') jQuery,fn. init [div.cl.green, prevobj(1)]》$(".c1").removeClass('green')jQuery.fn. init laiy.c1prevobject: j》$(".c1").toggleCass( ' green')jQuery. fn. init [div.c1. green, prevobj(1)]》$(".c1").toggleclass("green')jQuery.fn. init [div.c1, prevbfect: f》$(".c1").toggleClass"green ) 6.2 css操作
单个方式:$('div').css('background-color','green');多个方式:$('div').css({'background-color':'yellow','width':'400px'}); 6.3 位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置position()// 获取匹配元素相对父元素的偏移，不能设置位置 .offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position()的差别在于： .position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离
示例代码
$('.c2').offset(); 查看位置 $('.c2').offset({top:100,left:200}); 设置位置 代码: Title $(window).scrollTop() //滚轮向下移动的距离$(window).scrollLeft() //滚轮向右移动的距离
6.4 尺寸
height() //盒子模型content的大小，就是我们设置的标签的高度和宽度width()innerHeight() //内容content高度 + 两个padding的高度innerWidth()outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离outerWidth()
示例操作
Title 操作: $('.c1').height(); $('.c1').width(); $('.c1').innerWidth(); $('.c1').outerWidth();
6.5 文本操作
html()// 取得第一个匹配元素的html内容，包含标签内容html(val)// 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果text()// 取得所有匹配元素的内容，只有文本内容，没有标签text(val)// 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去示例: 取值 $('.c1').html(); $('.c1').text(); 设置值 $('.c1').text('百度'); $('.c1').html('百度');