11月四号jQuery选择器

1:contains(text)

contains 选择器选取包含指定字符串的元素。

该字符串可以是直接包含在元素中的文本,或者被包含于子元素中。

经常与其他元素/选择器一起使用,来选择指定的组中包含指定文本的元素        

示例:$("p:contains(is)")   选择所有包含 "is" 的 <p> 元素:

2:has(selector)

:has() 选择器选取所有包含一个或多个元素在其内的元素(选择多个元素中间用逗号隔开),匹配指定的选择器。

例:$("p:has(span)") 选取所有包含有 <span> 元素在其内的 <p> 元素:

       $("p:has(span,div)") 选取所有包含有 <span> <div>元素在其内的 <p> 元素:

3,empty() 方法从被选元素移除所有内容,包括所有文本和子节点

示例:

$(".btn1").click(function(){
$("p").empty();
});
});
</script>
</head>
<body>
<p style="width:200px;height:200px;background-color:yellow">This is a paragraph. <b>Bold</b> and <i>italic</i> text.</p>
<button class="btn1">删除 p 元素的内容</button>

4,attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数,其工作方式也有所差异。

(1)设置被选元素的属性值(设置图像的 width 属性)

示例:

$("button").click(function(){
$("img").attr("width","180");
});
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" />
<br />
<button>设置图像的 width 属性</button>

(2)返回被选元素的属性值。(返回图像的宽度)

示例:

$("button").click(function(){
alert("Image width " + $("img").attr("width"));
});
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />
<button>返回图像的宽度</button>

5,

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时,则返回第一个匹配元素的值。

当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

注意:prop() 方法应该用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected)。

提示:如需检索 HTML 属性,请使用 attr() 方法代替。

提示:如需移除属性,请使用 removeProp() 方法。

 

document.getElementById()  根据id返回对象引用

document.getElementsByClassName()  根据class返回对象引用
document.getElementsByName()  根据name
document.getElementsByTagName()  根据 "<" 后的标签类型 eg:<div></div>中就是div
document.querySelector()  单个,css语法,*div #div div
document.querySelectorAll()  集合

window.onload和$函数的区别:
1.window.onload是在所有元素(HTML页面和CSS)加载完毕后再加载,$是在HTML(DOM结构)加载完后加载
2.window.onload不能同时编写多个,如果有多个window.onload方法只能执行一个(最后一次赋值会掩盖之前的赋值(只有最后一次赋值有效);
$(document).ready可以同时编写多个,并都能执行





posted @ 2021-11-04 22:13  郭军辉  阅读(55)  评论(0)    收藏  举报