内容概览
- JQuery的初步认识
- JQuery的选择器
- JQuery的过滤器
一、JQuery的初步认识
JQuery概念
- 一个JavaScript框架。本质上就是一些js文件，封装了js的原生代码而已。简化JS开发。
JQuery能做什么
- javascript用来干什么的:
- 操作DOM对象
- 动态操作样式css
- 数据访问
- 控制响应事件
- jquery作用一样，但是更加快速简洁。
jquery有哪些功能（API）
- 选择器
- 过滤器
- 事件
- 动画效果
- ajax
如何引用jquery
-
引入本地jquery： <script type="text/javascript" src="jquery.js">
-
引入Google在线提供的库文件（稳定可靠高速）
-
写第一个JQUery案例
-
解释:在JQuery库中，'$()'等效于就jQuery()
//引入jquery文件 <script type=“text/javascript” src=“”></script> //在html页面编写jq <script type=“text/javascript”> $(function(){ alert(“jQuery 你好!”); }); </script>
-
讲解$(function(){})
- ‘$’是jQuery的别名，如‘$()'也可写作jQuery(),相当于页面初始化函数，当页面加载完毕，会执行jQuery()。
- JQuery操作DOM文档时，必须确保DOM已经载入完毕，此时就需要用到JQuery的ready事件。
- $(document).ready(function(){})即$(function(){})
- 类似于js的window.onload事件函数，但是ready事件要先于onload事件执行
- window.onload = function(){};
- 为方便开发，jQuery简化这样的方法，直接用$()表示
- JQuery的ready事件不等于Js的load：
- 执行时机不同：load需要等外部图片和视频等全部加载才执行。ready是DOM绘制完毕后执行，先与外部文件
- 用法不同：load只可写一次，ready可写多次
-
window.onload与$(document).ready()对比
window.onload $(document).ready() 执行时机 必须等网页中所有内容加载完后(图片)才执行 网页中的DOM结构绘制完后就执行,可能DOM元素相关的东西并没有加载完 编写个数 不能同时执行多个 能同时执行多个 简化写法 无 $(document).ready(function(){ //.. }); 推荐写法：$(function(){ });
JQuery对象与JS对象的区别与转换
- JQuery对象在操作时，更加方便
- JQuery对象和js对象方法部分不通用
- 两者相互转换
- jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
- js -- > jq : $(js对象)
$()讲解
- $在JQuery库中,$是JQuery的别名，$()等效于就jQuery().
- $()是JQuery方法,咱可看作是JQuery的选择器，与css选择器相似（可做对比）
- 只要是jQuery的对象都这样变量加上一个符号$ 方便识别：var $div = $("#")
function $(id){
return document.getElementById(id);
}
$和document是相等的吗？
<div id="a" class="aa"></div>
<div id="b" class="aa"></div>
<div id="c" class="aa"></div>
alert(document.getElementById("a") == $("#a"));//返回结果为false
alert(document.getElementById("a") == $("#a").get(0));//返回true
-
对象转换($(element))
- 原生dom对象和jquery代理对象的相互转换
$(传入的原生对象); //原生对象转化成jQuery对象 var nav = document.getElementById("nav"); var $nav = $(nav); alert($nav.get(0) == nav);//true二、选择器
基本选择器
- 基本选择器
- id选择器：$("#id")
- 类选择器：$(".classname")
- 元素选择器：$("div")
- 组合选择器：$("div,p,.classname,#id")
- 层级选择器:通过DOM的嵌套关系匹配元素
- 包含选择器：$("a b")在给定的祖先元素下匹配所有后代元素。(不受层级限制)
- 子选择器：$("parent > child") 在给定的父元素下匹配所有子元素。
- 相邻选择器：$("prev + next") 匹配所有紧接在prev元素后的next元素。
- 兄弟选择器：$("prev ~ siblings") 匹配prev元素之后的所有sibling元素。
过滤选择器
基本过滤选择
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
$("li:eq(4)") //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)") //下标大于 2 的li
$("li:lt(2)") //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的元素
$("td:empty") //不包含子元素或者文本的空元素
$("div:has(selector)") //含有选择器所匹配的元素
$("td:parent") //含有子元素或者文本的元素
可见过滤选择器
$("li:hidden") //匹配所有不可见元素，或type为hidden的元素
$("li:visible") //匹配所有可见元素
属性过滤选择器
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
$("div[id^='qq']") // id属性值以qq开头的div 元素
$("div[id$='zz']") // id属性值以zz结尾的div 元素
$("div[id*='bb']") // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素
子元素过滤选择器
| 选择器 | 说明 | 返回 |
|---|---|---|
| :nth-child(index/even/odd) | 选取每个父元素下的第index个子元素或者奇偶元素（index从1算起） | 集合元素 |
| first-child() | 选取每个元素的第一个子元素 | 集合元素 |
| last-child() | 选取每个元素的最后一个子元素 | 集合元素 |
- :nth-child()选择器是很常用的子元素过滤选择器，如下
- :nth-child(even)选择每个父元素下的索引值是偶数的元素
- :nth-child(odd)选择每个父元素下的索引值是奇数的元素
- :nth-child(2)选择每个父元素下的索引值是2的元素
- :nth-child(3n)选择每个父元素下的索引值是3的倍数的元素 (n从1开始)
表单对象属性过滤选择器
| 选择器 | 说明 | 返回 |
|---|---|---|
| $("input:enabled") | 选取所有可用元素 | 集合元素 |
| $("input:disabled") | 选取所有不可用元素 | 集合元素 |
| $("input:checked") | 选取所有被选中的元素（单选框、复选框） | 集合元素 |
| $("option:selected") | 选取所有被选中的元素（下拉列表） | 集合元素 |
表单选择器
| 选择器 | 说明 |
|---|---|
| $(":input") | 选取所有input textarea select button元素 |
| $(":text") | 选取所有单行文本框 |
| $(":password") | 选取所有密码框 |
| $(":radio") | 选取所有单选框 |
| $(":checkbox") | 选取所有多选框 |
| $(:submit") | 选取所有的提交按钮 |
| $(":image") | 选取所有的图像按钮 |
| $(":reset") | 选取所有的重置按钮 |
| $(":button") | 选取所有的按钮 |
| $(":file") | 选取所有的上传域 |
| $(":hidden") | 选取所有的不可见元素 |
特定位置选择器
- :first
- :last
- eq(index)
指定范围选择器
- :even
- :odd
- :gt(index)
- :lt(index)
排除选择器
- :not 非
三、选择器优化
-
使用合适的选择器表达式可以提高性能、增强语义并简化逻辑。常用的选择器中，ID选择器速度最快，其次是类型选择器。
- 多用ID选择器
- 少直接使用class选择器
- 多用父子关系，少用嵌套关系
-
查找
- 向下查找后代元素
- children():取得所有元素的所有子元素集合（子元素）（沿着 DOM 树向下遍历单一层级）
- find():搜索所有与指定表达式匹配的元素(所有后代元素中查找)
- 查找兄弟元素 siblings()查找当前元素的兄弟
- 向下查找后代元素
四、JQuery操作属性
1..操作属性：attr()、prop()
-
attr和prop区别：如果属性的值是布尔类型的值 用prop操作，反之attr
返回属性的值： $(selector).attr(attribute) 设置属性和值： $(selector).attr(attribute,value) 使用函数设置属性和值： $(selector).attr(attribute,function(index,currentvalue)) 设置多个属性和值： $(selector).attr({attribute:value, attribute:value,...})