jQuery笔记

最新推荐文章于 2024-01-20 21:49:50 发布

scgillian

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量478

点赞数

本文链接：https://blog.csdn.net/zhanglei0107/article/details/44347345

版权

选自jQuery API（http://api.jquery.com/id-selector/）

id selector
Description: Selects a single element with the given id attribute.

jQuery( "#id" )
id: An ID to search for, specified via the id attribute of an element.

For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.

Calling jQuery() (or $()) with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element.

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

选择具有指定id属性的单个元素。jQuery实际调用的是JS函数document.getElementById()。

调用id选择器将返回包含0个或1个DOM元素的jQuery集合对象，每一个id值在文档中只能使用一次，如果超过1个元素使用了相同的id值，使用该id的选择器仅会选则DOM中第一个匹配的元素

jQuery属性选择器

Has Attribute Selector [name]

Description: Selects elements that have the specified attribute, with any value.

jQuery( "[attribute]" )

attribute: An attribute name.

例如$("[href]") 匹配所有带有 href 属性的元素

[attr=val]匹配指定属性为某个值的元素

以下两句等效

$("p[id='p1']").text("test");

$("p#p1").text("test");

<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("p#p1").text("test");
});
</script>
</head>
<body>
<p id="p1">aaa</p>
</body>
</html>

如果下面获取href的代码不写在$(document).ready()中，因为此时body中的内容还没有加载完成，直接获取

$("div#post a[href]")将不会找到元素

<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var urls= [];
$("div#post a[href]").each(function(i){
	urls[i] = $(this).attr('href');
	
});
alert(urls.join(","));
});
</script>
</head>
<body>
<div id="post">
<a href="www.baidu.com"/>
<a href="www.google.com"/>
</div>

</body>
</html>

child selector
Description: Selects all direct child elements specified by "child" of elements specified by "parent".

jQuery( "parent > child" )
parent: Any valid selector.

child: A selector to filter the child elements.

>大于号选择直接后代

compound selector

$('p, li').fadeTo('slow', 0);

逗号隔开将既选择标签p也选则标签li

jQuery .load方法

.load( url [, data ] [, complete ] )

参数

url Type: String
A string containing the URL to which the request is sent.

请求对象的URL

data Type: PlainObject or String
A plain object or string that is sent to the server with the request.

请求中发送给服务器的纯对象或字符串
complete
Type: Function( String responseText, String textStatus, jqXHR jqXHR )
A callback function that is executed when the request completes.

<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
$("#post").load("5.html");
});
</script>
</head>
<body>
<div id="post">
</div>
</body>
</html>

load方法无法调用外部网址，比如说加载http://www.baidu.com，这是由于浏览器的限制，不支持跨域调用，需使用JSONP，

YQL等技术