我们用服务每一个客户

Our intention to service each customer

诚实 守信 专业 专注

Jquery 常用代码及选择

更新时间: 点击:0
您当前的位置:主页 > 技术文档 > 网页特效 >

 选取

$("p") 

选取 <p> 元素。
 
$("p.intro") 
选取所有 class="intro" 的 <p> 元素。
 
$("p#demo") 
选取所有 id="demo" 的 <p> 元素。
 
$("p#demo > ul") 
选取 id=“demo” 的 <p> 元素下的所有直接子集 ul 元素。
 
$("p#demo ul") 
选择 id=“demo” 的所有 ul 子元素。
 
$("[href]") 
选取所有带有 href 属性的元素。
 
$("[href='#']") 
选取所有带有 href 值等于 "#" 的元素。
 
$("[href!='#']") 
选取所有带有 href 值不等于 "#" 的元素。
 
$("[href$='.jpg']") 
选取所有 href 值以 ".jpg" 结尾的元素。
 
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd            $("tr:odd") 所有奇数 <tr> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
 
:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 无子(元素)节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格
:not(selector) $("input:not(:empty)")   所有不为空的 input 元素
 
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
 
(一)返回 CSS 属性
 
如需返回指定的 CSS 属性的值,请使用如下语法:
 
css(“CSS属性名称”);
 
例如:
 
$(“#item”).css(“background-color”);       返回 id 是 item 的元素的背景颜色值;
 
需要注意的是获取 css 属性的操作是得到的符合选择器条件的第一个元素的 css属性值。
 
(二)设定 CSS 属性
 
(1)如需设置指定元素的 单个CSS 属性的值,请使用如下语法:
 
css(“CSS属性名称”, “值“);
 
例如:
 
$(“td”).css(“background-color”, “yellow”);       设定 td元素的背景色为黄色;
 
(2)如需设置指定元素的 多个CSS 属性的值,请使用如下语法:
 
css( {“CSS属性1”: “值“, ”CSS属性2”:“值2”});
 
例如:
 
$(“td”).css( {“background-color”:“yellow”,“color”: “red”} ); 设定 td元素的背景色为黄色,文字为红色;
 
需要注意的是设置 css 属性的操作会更改所有符合选择器条件的元素的 css 值,但不会覆盖  !important 属性。
 
(三)特定的 CSS 操作
 
css() 设置或返回匹配元素的样式属性。
height() 设置或返回匹配元素的高度。
offset() 返回第一个匹配元素相对于文档的位置。
offsetParent() 返回最近的定位祖先元素。
position() 返回第一个匹配元素相对于父元素的位置。
scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
width() 设置或返回匹配元素的宽度。
 
 
使用方式与其他 jQuery 方法相同,不带参数时返回指定属性的值,带参数时设定指定属性的值;
 
这些操作不会覆盖由 !important 标记过的值;

(四)css 的 class 属性操作方法

 

addClass() 给指定元素(组)的  class属性增加一个新值(如果已有该  class,不会重复添加)。

removeClass() 移除指定元素(组)的 class属性中指定的值(如果该值不存在则直接返回)。

hasClass() 测试指定元素(组)的 class属性中是否包含某一特定的值。

toggleClass() 给指定元素(组)的class属性增加或删除某一个类(存在时删除,不存在时添加)

 

jQuery 的 attr() 方法设置或返回被选元素的指定属性的值;

(一)返回属性

如需返回指定属性的值,请使用如下语法:

attr(“属性名称”);

例如:

$(“#item”).attr(“href”);       返回 id 是 item 的元素的 href 属性的值;

需要注意的是属性获取操作是得到的符合选择器条件的第一个元素的属性值。

(二)设定属性

(1)如需设置指定元素的单个属性的值,请使用如下语法(属性存在时替换,不存在时添加):

attr(“属性名称”, “值“);

例如:

$(“td”).attr(“data-cid”, “m1”);       设定 td元素的data-cid 属性的值为 m1;

(2)如需设置指定元素的 多个属性的值,请使用如下语法:

attr( {“属性1”: “值“  ,   ”属性2”:“值2”});

例如:

$(“td”).attr( {“id”:“td1”,“data-cid”: “red”}); 设定 td元素的 id 为 td1, data-cid属性为 red;

jQuery 的 removeAttr() 方法用来移除被选元素的指定属性;

语法:

removeAttr(“属性名称”);

当指定的属性不存在时直接返回;

Copyright © 2009-2029 武汉页维网络科技有限公司(www.yeweiw.com) All Rights Reserved.
鄂公网安备 鄂公网安备 42011102005606号 鄂ICP备2024069953号-1

服务热线

18062108535

提供专业技术服务

页维微信

微信客服