1、使用$()函数 $()函数其实是创建了一个jQuery对象. 这个函数接受CSS选择符作为参数,充当一个工厂, 返回包含页面中对应元素的jQuery对象. 所有能在样式表中使用的选择符都可以传给这个函数, 随后就可以对匹配的元素集合应用jQuery方法. 在jQuery中 ...
1、使用$()函数
$()函数其实是创建了一个jQuery对象. 这个函数接受CSS选择符作为参数,充当一个工厂, 返回包含页面中对应元素的jQuery对象. 所有能在样式表中使用的选择符都可以传给这个函数, 随后就可以对匹配的元素集合应用jQuery方法.
在jQuery中,美元符号$其实就是标示符jQuery的"别名".
2、选择符
1. 基本选择符 $('p') //取得所有标签为p的元素 $('.class') //取得所有类为class的元素 $('#id') //取得id为id的元素 //以及其他css中的选择符2. 属性选择符 $('img[alt]') //选择带有alt属性的所有图像元素 //^表示值在字符串的开始, $表示值在字符串的结尾. *表示要匹配的值可以出现在字符串的任意位置, !表示对值取反 $('a[href^="mailto:"]') //选择页面中所有mailto:链接 $('a[href$=".pdf"]') //选择页面中所有pdf文档链接 $('a[href^="http"][href*="henry"]') //选择href属性以http开头且在任意位置包含henry的元素3. 自定义选择符 $('div.horizontal:eq(1)') //取得集合中的第二个元素 $('tr:even') //选择奇数行. 之所以是奇数行是因为第一行的编号是0 还可以写作: $('tr').filter(':even') $('tr:nth-child(odd)') //选择奇数行. :nth-child()是jq中唯一从1开始计数的选择符 $('tr:contains(Henry)') //根据上下文内容选择元素. contains选择符区分大小写4. 基于表单的选择符 $('input[type="radio"]:checked') //可以选择所有选中的单选按钮 $('input[type="text"]:disabled') //选择禁用的文本输入字段
更多的基于表单的选择符
:input :button :enabled :disabled :checked:selected
3、 DOM遍历方法
filter方法
$('tr').filter(':even') $('a').filter(function(){ return this.hostname && this.hostname!=location.hostname; }) //选择包含带有域名的href属性的,且域名不等于页面当前所在域的名称的a元素
.next() //选择下一个最接近的同辈元素 $('td:contains(Henry)').next() .nextAll() //选择后面的全部同辈元素 //对应方法 .prev() .prevAll() .siblings() //选择处于相同DOM层次的所有其他元素,无论这些元素处于当前元素之前还是之后 .parent().children() //另一种方法
连缀方法的原理:
几乎所有的jQuery方法都会返回一个jQuery对象, 因而可连缀调用多个jQuery方法.
4. 访问DOM元素
.get() var myTag = $('#my-element').get(0).tagName; //获取带有id为my-element属性的元素的标签名 var myTag = $('my-element')[0].tagName; //一种简写方式
函数 | 描述 |
---|
.add() | 将元素添加到匹配元素的集合中。 |
.andSelf() | 把堆栈中之前的元素集添加到当前集合中。 |
.children() | 获得匹配元素集合中每个元素的所有子元素。 |
.closest() | 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。 |
.contents() | 获得匹配元素集合中每个元素的子元素,包括文本和注释节点。 |
.each() | 对 jQuery 对象进行迭代,为每个匹配元素执行函数。 |
.end() | 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。 |
.eq() | 将匹配元素集合缩减为位于指定索引的新元素。 |
.filter() | 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。 |
.find() | 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。 |
.first() | 将匹配元素集合缩减为集合中的第一个元素。 |
.has() | 将匹配元素集合缩减为包含特定元素的后代的集合。 |
.is() | 根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。 |
.last() | 将匹配元素集合缩减为集合中的最后一个元素。 |
.map() | 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。 |
.next() | 获得匹配元素集合中每个元素紧邻的同辈元素。 |
.nextAll() | 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。 |
.nextUntil() | 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。 |
.not() | 从匹配元素集合中删除元素。 |
.offsetParent() | 获得用于定位的第一个父元素。 |
.parent() | 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。 |
.parents() | 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。 |
.parentsUntil() | 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。 |
.prev() | 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。 |
.prevAll() | 获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。 |
.prevUntil() | 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。 |
.siblings() | 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。 |
.slice() | 将匹配元素集合缩减为指定范围的子集。
|
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:jQuery基础教程
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。