锋利的jquery学习
2015-12-25 23:30
495 查看
jquery环境配置
从官网上下载jquery.js文件,然后在页面中引入:在标签中引入jQuery库。<script src="jquery.js" type="test/javascript"></script>
jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象,是jQuery独有的。jQuery对象无法使用DOM对象的任何方法,DOM对象也不能使用jQuery对象的方法。1、jQuery对象转成DOM对象
jQuery提供两个方法将一个jQuery对象转换成DOM对象。Query对象是一个类似数组的对象,可以通过[index]的方法获取。
var $cr = $("#cr"); //jQuery对象 var cr = $cr[0]; //DOM对象
jQuery本身提供的,通过get(index)方法得到相应的DOM对象。
var $cr = $("#cr"); //jQuery对象 var cr = $cr.get(0); //DOM对象
2、DOM对象转换成jQuery对象
对于DOM对象,只需要用$()把DOM包装起来就可以得到jQuery对象。var cr = document.getELementById("cr"); //DOM对象 var $cr = $(cr); //jQuery对象
jQuery冲突
jQuery库在其他库之前导入,无需调用jQuery.noConflict()函数
jQuery库在其他库之后导入
其一:
jQuery.noConflict(); //将变量$的控制权移交给prototype.js jQuery(function($){ //使用jQuery设定页面加载时执行函数 alert($(this).text()); //在内部继续使用$()方法 })
其二:
jQuery.noConflict(); //将变量$的控制权移交给prototype.js (function($){ //定义匿名函数并设置形参为$ $(function(){ //匿名函数内部的$均为jQuery alert($(this).text()); //在内部继续使用$()方法 }); });
jQuery选择器
jquery选择器的写法和CSS选择器的写法十分相似,只不过效果不同,CSS选择器找到元素后是添加样式,jquery找到元素后添加行为。优势:
1. 写法非常简洁。
$()代替
document.getElementById()函数。
2. 支持CSS1到CSS3选择器,兼容性高。
3. 完善的处理机制。利用传统的
getElementById()如果没有该元素,浏览器就会>报错,而
$()可以避免这种情况。
$()获取的永远是对象,即使网页上没有此元素。
当jQuery检查某个元素在网页上是否存在时,可以根据获取到的元素的长度来判断,代码如下:
if($("#tt").length > 0){ //do something }
或者转换成DOM对象来判断,如下:
if($("#tt")[0]){ //do something }
一、基本选择器
通过元素id、class和标签名等来查找DOM元素。选择器 | 描述 | 返回 | 示例 |
---|---|---|---|
id | 指定的id | 单个元素 | $("#test") |
.class | 类名 | 集合元素 | $(".test") |
element | 元素名 | 集合元素 | $("p") |
* | 所有元素 | 集合元素 | $("*")选取所有元素 |
多个选择 | 将每一个选择器匹配到的元素合并返回 | 集合元素 | $("div,span,p") |
二、层次选择器
通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素选择器 | 描述 | 返回 | 示例 |
---|---|---|---|
$(“ancestor descendant”) | 选取ancestor元素里所有descendant(后代)元素 | 集合元素 | $("div span")选取所有div中的span元素 |
$(“parent > child”) | 选取parent元素下的child(子)元素 | 集合元素 | $(div>span)选取元素下元素名是的子元素 |
$(“prev+next”) | 选取紧接在prev元素后的next元素 | 集合元素 | $(.one+div)选取class为one的下一个 <div>同辈元素,等价于 $("one").next("div") |
$(“prev~siblings”) | 选取prev元素后所有siblings元素 | 集合元素 | $("#two~div")选取id为two的元素后面的所有div元素,等价于 $("two").nextAll("div") |
<div>,而siblings()方法与前后位置无关,只要是同辈节点都能匹配。
$(".one ~ div").css(); //选取.one之后的所有同辈div元素 $(".one").nextAll("div").css(); //选取.one之后的所有同辈div元素 $(".one").siblings("div").css();//选取.one所有同辈div元素,无论前后位置
三、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素,过滤规则与CSS中的伪类选择器语法相同。按照不同的过滤规则,过滤选择器可以分为以下几种:
1、基本过滤选择器
2、内容过滤选择器
3、可见性过滤选择器
4、属性过滤选择器
5、子元素过滤选择器
6、表单对象属性过滤选择器
1.基本过滤选择器
基本过滤选择器是过滤选择器中用的最多的一种,它的过滤规则主要体现在元素的位置(索引)上及一些特定的元素。选 择 器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:first | 选取第1个元素 | 单个元素 | $(“div:first”)选取所有 元素中第一个div元素 |
:last | 选取最后1个元素 | 单个元素 | $(“div:last”)选取所有 元素中最后一个元素 |
:not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $(“input:not(.myClass)”)选取class不是myClass的input元素 |
:even | 选取索引(从0开始)是偶数的所有元素 | 集合元素 | $(“input:even”)选取索引是偶数的input元素 |
:odd | 选取索引(从0开始)是奇数的所有元素 | 集合元素 | $(“input:odd”)选取索引是奇数的input元素 |
:eq(index) | 选取索引(从0开始)等于index的元素 | 单个元素 | $(“input:eq(1)”)选取索引等于1的input元素 |
:gt(index) | 选取索引(从0开始)大于index的元素 | 集合元素 | $(“input:gt(1)”)选取索引大于1的input元素 |
:lt(index) | 选取索引(从0开始)小于index的元素 | 集合元素 | $(“input:lt(1)”)选取索引小于1的input元素 |
:header | 选取所有的标题元素,即h1到h6 | 集合元素 | $(“:header”)选取页面中所有的标题元素 |
:animated | 选取当前正在执行动画的所有元素 | 集合元素 | $(“div:animated”)选取当前正在执行动画的div元素 |
2.内容过滤选择器
它是对元素和文本内容的操作。选 择 器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:contains(text) | 选取含有文本内容为text的元素 | 集合元素 | $(“div:contains(‘test’)”)选取含有文本内容为test的元素 |
:empty | 选取不包含子元素或文本的空元素 | 集合元素 | $(“div:empty”)选取不包含子元素或文本的空元素 |
:has(selector) | 选取含有给定选择器匹配的元素的元素 | 集合元素 | $(“div:has(.myClass)”)选取含有class为myClass的元素的元素 |
:parent | 选取含有子元素或文本的元素 | 集合元素 | $(“div:parent”)选取含有子元素或文本的元素 |
3. 可见性过滤选择器
根据元素的可见与不可见状态来选取元素。选 择 器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:hidden | 选取所有不可见的元素 | 集合元素 | $(“div:hidden”)选取所有不可见的元素 |
:visible | 选取所有不可见的元素 | 集合元素 | $(“div:visible”)选取所有可见的元素 |
4.属性过滤选择器
通过元素的属性来选取相应的元素。选 择 器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
[attribute] | 选取拥有此属性的元素 | 集合元素 | $(“div[id]”)选取拥有属性id的元素 |
[attribute=value] | 选取属性的值为value的元素 | 集合元素 | $(“div[title=test]”)选取属性 title 为test 的元素 |
[attribute!=value] | 选取属性的值不等于value的元素 | 集合元素 | $(“div[title!=test]”)选取属性 title 不等于 test 的元素 |
[attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 | $(“div[title^=test]”)选取属性 title 以test 开始的元素 |
[attribute$=value] | 选取属性的值以value结束的元素 | 集合元素 | $(“div[title$=test]”)选取属性 title 以test 结束的元素 |
[attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | $(“div[title*=test]”)选取属性 title 含有 test 的元素 |
[selector1][selector2]…[selectorN] | 选取匹配以上所有属性选择器的元素 | 集合元素 | $(“div[id][title*=test]”)选取拥有属性id,且属性 title 含有 test 的元素 |
[selector1] [selector2]…[selectorN],复合性选择器,首先经[selector1]选择返回集合A,集合A再经过[selector2]选择返回集合B,集合B再经过[selectorN]选择返回结果集合。
5.子元素过滤选择器
子元素过滤选择器的过滤规则是通过元素的父子关系来获取相应的元素。选 择 器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:nth-child(index/even/odd/equation) | 选取每个父元素下的第index(索引值为奇数索引值为偶数索引值等于某个表达式)个子元素,index从1开始 | 集合元素 | $(“div:nth-child(1)”)选取每个中第一个子元素 |
:first-child | 选取每个父元素下的第1个子元素 | 集合元素 | $(“div :first-child”)选取每个下第一个子元素 |
:last-child | 选取每个父元素下的最后1个子元素 | 集合元素 | $(“div :last-child”)选取每个下最后一个子元素 |
:only-child | 选取只有唯一子元素的元素的子元素 | 集合元素 | $(“div :only-child”)选择只有一个子元素 |
1. nth-child(even) 能选取每个父元素下的索引值是偶数的元素
2. nth-child(odd) 能选取每个父元素下的索引值是奇数的元素
3. nth-child(2) 能选取每个父元素下的索引值等于2的元素
4. nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素,n从0开始
5. nth-child(3n+1) 能选取每个父元素下的索引值等于 (3n+1) 的的元素,n从0开始
6.表单对象属性过滤选择器
此选择器主要是对所选择的表单元素进行过滤。选 择 器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:enabled | 选取所有可用元素 | 集合元素 | $(“body:enabled”)选取页面内所有可用元素 |
:disabled | 选取所有不可用元素 | 集合元素 | $(“body:disabled”)选取页面内所有不可用元素 |
:checked | 选取所有被选中的元素(单选框、复选框) | 集合元素 | $(“input:checked”)选取所有被选中的input元素 |
:selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $(“select:selected”)选取所有被选中的选项元素 |
四、表单选择器
表单选择器是为了能更加容易地操作表单,表单选择器是根据元素|类型来定义的。选 择 器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:input | 选取所有的input、 textarea、 select和 button元素 | 集合元素 | $(“:input”)选取所有的input、 textarea、 select和 button元素 |
:text | 选取所有的单行文本框 | 集合元素 | $(“:text”)选取所有的单行文本框 |
:password | 选取所有的密码框 | 集合元素 | $(“:password”)选取所有的密码框 |
:radio | 选取所有的单选框 | 集合元素 | $(“:radio”)选取所有的单选框 |
:checkbox | 选取所有的多选框 | 集合元素 | $(“:checkbox”)选取所有的多选框 |
:submit | 选取所有的提交按钮 | 集合元素 | $(“:submit”)选取所有的提交按钮 |
:image | 选取所有的图像按钮 | 集合元素 | $(“:image”)选取所有的图像按钮 |
:reset | 选取所有的重置按钮 | 集合元素 | $(“:reset”)选取所有的重置按钮 |
:button | 选取所有的按钮 | 集合元素 | $(“:button”)选取所有的按钮 |
:file | 选取所有的上传按钮 | 集合元素 | $(“:file”)选取所有的上传按钮 |
:hidden | 选取所有的不可见元素 | 集合元素 | $(“:hidden”)选取所有的不可见元素 |
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法