一. Jquery简介
（参考文档：www.runoob.com/jquery）
jQuery是一个快速,简洁的javaScript库;
封装了常见的功能代码,优化了Dom操作、事件处理、动画设计、Ajax交互。
Jquery的本质就是调用函数和方法。
二. Jquery的优点
- 轻量级。核心文件才几十KB,不会影响页面的加载速度。
- 跨浏览器兼容。基本兼容了现在的主流浏览器。
- 链式编程，隐式迭代。
- 对事件、样式、动画支持，大大简化了Dom操作。
- 支持插件开发。树形菜单、轮播图、日期空间...
- 免费、开源。
三. jQuery的常用API
- 得到当前索引号
- jQuery对象.index()
- 修改样式
-
修改单个样式 —— jQuery对象.css('color','red')
-
修改多个样式 —— jQuery对象.css({'color':'red','background':'pink'})
-
修改类名改变样式
- 添加类名 —— jQuery对象.addClass('.info')
- 删除类名 —— jQuery对象.removeClass('.info')
- 切换类名 —— jQuery对象.toggleClass('.info'),若有该类名则删除，若没有则添加上
-
四. Jquery如何获取元素
window.$ = window.jQuery
-
$是Jquery的别称，也是jQuery的顶级对象，相当于原生JS中的Window。把元素利用$包装为jQuery对象，就可以直接调用jQuery方法。
-
$('选择器'), 该方法参数可以接受CSS选择器，返回一个可以操作的Dom元素对象,简称jQuery对象。
-
$(),也可以接受其他参数，都是将Dom元素封装为jQuery对象，从而方便开发者对Dom进行操作。即开发者只需要选择元素和操作元素即可。
五. jQuery如何操作元素
使用jQuery两步走，选择元素 ——> 操作元素
$('<p>') 或者 $('<p>123</p>')都可以创建一个jQuery对象
let li = $('<li>这是创建的li元素</li>')
let p = $('<p>这是创建的p段落文字</p>')
1. 添加元素 该对象封装了Dom元素，可以通过以下方法，将Dom元素插入到页面
- 内部添加 —— li添加到目标元素ul的子级(开头子级) —— $('ul').append(li)
- 内部添加 —— li添加到目标元素ul的子级(末尾子级) —— $('ul').prepend(li)
- 外部添加 —— p添加到目标元素.info同一级(目标前面) —— $('.info').before(p)
- 外部添加 —— p添加到目标元素.info同一级(目标结尾) —— $('.info').after(p)
2. 删除页面中的元素
- 自杀 —— 删除目标元素本身 —— jQuery对象.remove()
- 断后 —— 删除目标元素所有子节点 —— jQuery对象.empty()
3.修改页面中的元素
-
html修改 —— 可以修改目标元素下的内容以及内容的标签样式
-
text修改 —— 只修改目标元素下的内容
-
val修改 —— 一般是修改表单控件的value值
$('div').html('<strong>这是Html修改的内容</strong>') $('div').text('只能修改文本内容') $('input[name="msg"]').val('修改input的value值')
六. jQuery 如何移动元素？
依然按照使用jQuery两步走战略 。选择元素 ——> 操作元素
- $('#demo').before('p') —— 将 p 元素移到 #demo 元素前面
- $('#demo').after('p') —— 将 p 元素移到 #demo 元素后面
- $('#demo').insertBefore('p') —— 将 #demo 元素移到 p 元素前面
- $('#demo').insertAfter('p') —— 将 #demo 元素移到 p 元素后面
六. jQuery 如何操作元素属性？
1. 获取属性
-
获取元素的固有属性 jQuery对象.prop('属性名')
$('input').prop('value') -
获取元素的 自定义属性 jQuery对象.attr('属性名')
$('input').attr('data-index') -
获取元素内存的属性值 jQuery对象.data('属性名'),存储的是临时数据，一旦刷新就没了
$('input').data('index')
2. 修改属性
jQuery封装的精华之处，同一个函数可以根据参数的不同实现不同的功能，也就是重载。
$('input').prop("width","500")
$('input').attr("width","500")
七. jQuery 的链式调用
- 链式调用是jQuery的精华所在
- 通常一个函数的返回值是一个结果，但是jQuery大部分方法返回的是一个jQuery对象，从而实现链式调用。
- $('.box').css('background','red').siblings().css('background','blue')
八. jQuery 的隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程。
给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用
// 隐式迭代就是自动遍历页面中的满足条件的li，给其添加 颜色为红色的样式，这就是隐式迭代
$('li').css('color','red')
补充知识1 ： Dom对象和jQuery对象的区别
-
利用原生JS获取的都对象叫做Dom对象
const btn = document.queryselector('.btn') -
利用jQuery方式获取的对象叫做jQuery对象，本质是通过$()将Dom对象进行包装
$('.btn') $('#id') $("input[type='text']") -
原生JS的Dom对象只能使用Dom方法，jQuery对象只能使用jQuery方法,不能混用。
-
Dom对象和Jquery对象的相互转换
- Dom对象转换为jQuery对象 $(Dom对象) 不用引号
- $(Dom对象)该方法对原生Dom元素加工,成为一个伪数组对象
- jQuery对象转换为Dom对象 (Dom对象).get(0)
- $(Dom对象)[0] 伪数组对象的第一个数组元素就是对应的Dom元素
- Dom对象转换为jQuery对象 $(Dom对象) 不用引号
