JQuery
一、简介
- 简介：JQuery即JavaScript和Query，是辅助JavaScript进行查询操作而开发的一种类库。
- 流行程度：超过一半的大型网站都在使用JQuery，JQuery的宗旨是写得少，做得多
- 好处：开源免费、更简洁优雅，如选择DOM元素，操作文档对象，制作动画效果，事件处理等
- 常见问题：
- $是什么？ 它是一个函数
- 如何添加相应函数 1、通过标签属性获取到JQuery对象，通过对象.click(function(){});
二、JQuery的核心函数
$是JQuery的核心函数，能完成很多功能，$()就是调用这个函数
特点：
- 当传入参数为函数时：$(function(){}); 相当于页面加载完成之后，即window.onload = function()
- 当传入参数为HTML字符串时，会自动的帮助我们创建HTML标签对象
- 当传入的参数为[ 选择器字符串 ]时
- $("#id") id选择器，通过id查询标签对象
- $(".class") class选择器，通过class查询标签对象
- $("标签名") 标签名选择器，通过标签名查询对象
- 当传入的参数为DOM对象时，会把DOM对象自动的创建JQuery对象
三、JQuery对象和DOM对象的区别
- DOM对象
- 通过 getElemntsByName()查询出来的标签对象是 Dom 对象
- 通过 getElemntById()查询出来的标签对象是 Dom 对象
- 通过 getElemntsByTagName()查询出来的标签对象是 Dom 对象
- 通过 creatElemnt() 方法创建的对象，是 Dom 对象
- DOM 对象 Alert 出来的效果是：[object HTML 标签名 Elemnt]
- JQuery对象
- 通过JQuery提供的API创建的对象，为JQuery对象
- 通过JQuery提供的API查询到的对象，为JQuery对象
- 通过JQuery包装的DOM对象，为JQuery对象
- JQuery alert()出来的效果是[object Object]
- JQuery对象的本质 dom对象的数组+JQuery提供的一系列核心api
- 区别：双方都不能使用对方的属性与方法
- 二者之间的转换
- DOM转JQuery $(DOM对象)
- JQuery转DOM 通过JQuery对象的下标引出
四、JQuery选择器
- 基本选择器
- #id选择器 根据Id查找标签对象
- .class选择器 根据class属性值查找标签对象
- 标签名选择器 根据标签名查找标签对象
- 组合选择器 根据selector1,selector2 的各选择器查找标签对象
- *选择器 查找任意对象
- 层级选择器
- ancestor descendant 后代选择器：给定的祖父元素下选定所有的后代元素
- parent>child 子元素选择器：给定的父元素下匹配所有的子元素
- prev+next 相邻元素选择器：匹配所有prev下的相邻元素，即下一个
- prev~siblings 兄弟姐妹选择器：匹配prev下的所有兄弟姐妹元素
- 过滤选择器
- 基本过滤器
- :first 获取第一个元素
- :last 获取最后一个元素
- :not(selector) 获取当前JQuery对象中取出selector后的元素
- :even 获取JQuery对象中的偶索引元素
- :odd 获取JQuery对象中的奇索引元素
- :eq(index) 获取JQuery对象中的对应Index的索引元素
- :gt(index) 获取JQuery对象中的大于Index的索引元素
- :lt(index) 获取JQuery对象中的小于Index的索引元素
- :header 获取JQuery对象中匹配<h1></h1>等的标题标签元素
- :animated 获取JQuery对象中的动画元素
- 内容过滤器
- :contains(text) 匹配含有文本内容的元素
- :empty 匹配当前不含文本内容或没有子元素的元素
- :has(selector) 匹配当前含有selector所匹配元素的元素
- :parent 匹配当前含有文本内容或子元素的元素
- 基本过滤器
- 属性过滤器
- [attribute] 匹配当前含有该属性值的元素
- [attribute=value] 匹配当前含有该属性值且属性值=value的元素
- [attribute!=value] 匹配当前含有该属性值且属性值!=value的元素
- [attribute*=value] 匹配当前含有该属性值且属性值包含value的元素
- [attribute^=value] 匹配当前含有该属性值且属性值以value开头的元素
- [attribute$=value] 匹配当前含有该属性值且属性值以value结尾的元素
- [attrSel1][attrSel2][attrSel3] 复合属性选择器，需满足多个条件时使用
- 表单过滤器
- :input 匹配所有的input,textarea,select,button元素
- :text 匹配所有的文本输入框
- :password 匹配所有的密码输入框
- :radio 匹配所有的单选框
- :checkbox 匹配所有的复选框
- :submit 匹配所有的提交按钮
- :image 匹配所有的图片标签
- :reset 匹配所有的重置按钮
- :button 匹配所有的按钮
- :file 匹配所有的文件上传
- :hidden 匹配所有的不可见元素，即display:none或input type=hidden
- 表单对象属性过滤器
- :enable 匹配所有的可用元素
- :disable 匹配所有的不可用元素
- :checked 匹配选中的所有的单选框，复选框和下拉列表中的option标签对象
- :selected 匹配所有选中的option
五、JQuery元素筛选
- eq(index)
- first()
- last()
- filter(exp)
- is(exp)
- has(exp)
- not(exp)
- children(exp)
- find(exp)
- next()
- nextAll()
- nextUntil()
- parent()
- prev(exp)
- prevAll()
- prevUntil(exp)
- sibling(exp)
- add()
六、JQuery的属性操作
- html() 可以设置和获取起始标签和结束标签里的内容，作用和dom的innerhtml一样
- text() 可以设置和获取起始标签和结束标签里的文本，作用和dom的innertext一样
- val() 可以获取表单中的value属性值，作用和dom的value一样，还可同时设置多个表单的选中状态
- attr() 可以设置和获取属性的值，不推荐操作checked,readonly,selected,disable等等,还可以操作非标准属性，如自定义对象的属性
- prop() 可以设置和获取属性的值，只推荐操作checked,readonly,selected,disable
七、DOM的增删改
- 内部插入
- appendTo a.appendTo(b) 将a元素插入到b的所有子元素中的末尾
- prependTo a.prependTo(b) 将a元素插入到b的所有子元素中的最前面
- 外部插入
- insertAfter a.inseretAfter(b) 将a元素插到b元素的后面
- inseretBefore a.insertBefore(b) 将a元素插到b元素的前面
- 替换
- replaceWith a.replaceWith(b) 用b替换掉a
- replaceAll a.replaceAll(b) 用a替换掉所有的b
- 删除
- remove a.remove() 删除掉a标签
- empty a.empty() 删除掉a标签中的内容
八、CSS样式操作
- 添加样式 addClass()
- 删除样式 removeClass()
- 有就删除，没有就添加 toggleClass()
- 获取和设置元素的坐标 offset()
九、JQuery动画
- 基本动画
- show() 将隐藏的元素显示
- hide() 将可见的元素隐藏
- toggle() 可见就隐藏，不可见就显示
- 说明：以上动画方法都可以添加参数。
1、第一个参数是动画 执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)
- 淡入淡出动画
- fadeIn() 淡入
- fadeOut() 淡出
- fadeTo() 指定时间内慢慢将透明度修改至指定的值。0透明 1完全可见 0.5半透明
- fadeToggle() 淡入、淡出切换
九、JQuery时间操作
- $(function(){})和window.onload=function(){}的区别
- 触发时间？
- JQuery的页面加载完成之后是在浏览器解析完页面标签创建好dom对象好就马上执行
- 原生的JS页面加载完成之后，除了要等浏览器内核解析完页面创建好dom对象，还要等标签显示时需要的内容加载完成
- 触发时间？
- 触发顺序？
- JQuery页面加载完成之后先执行
- 执行次数？
- 原生的JS页面加载完成之后，只会执行最后一次的赋值函数
- JQuery页面加载完成之后是把全部注册的function()函数，依次按顺序执行
十、JQuery中其他时间的处理办法
- click() 单击事件
- mouseover() 鼠标移入事件
- mouseout() 鼠标移出事件
- bind() 给一个元素绑定一个或多个事件
- one() 和bind一样，但是one绑定的事件只会相应依次
- unbind() 和bing相反的操作
- live() 可以用来绑定选择器匹配的所有事件，即使这个事件是后来创建的也会生效
十一、事件的冒泡
- 概念：父子元素同时监听同一个事件，当子元素的事件响应时，同一个时间也会被传递到父元素的事件里去响应
- 如何阻止事件的冒泡：通过在子元素的响应事件中设置return false
十二、JavaScript事件对象
- 封装有触发的事件信息的一个JavaScript对象，如何拿到，如何使用
- 在绑定事件时，向函数中添加一个参数名，一般命名为event，如$("div").click(function(event){ console.log(event) })
浙公网安备 33010602011771号