我读jQuery系列一：核心
//=================================================
// jQuery核心函数
// jQuery(expression,[context]) jQuery(html [ownerDocument])
// jQuery(elements) jQuery(callback)
//=================================================
//jQuery(expression, [context])
//这个函数接收一个包含 CSS 选择器的字符串，
//然后用这个字符串去匹配一组元素。
//jQuery 的核心功能都是通过这个函数实现的。
//jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。
//这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），
//然后根据这个表达式来查找所有匹配的元素。
//默认情况下, 如果没有指定context参数，$()将在当前的 HTML 文档中查找 DOM 元素；
//如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。
//参考 Selectors 获取更多用于 expression 参数的 CSS 语法的信息。
//例一:找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。
var a=$('div > p');
//例二:在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。
var a=$('input:radio',document.forms[0]);
$('#msg').append(a)
//jQuery(html [ownerDocument])
//根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。
//你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件
//创建的字符串，也可以是通过 AJAX 加载过来的字符串。
//但是在你创建 input 元素的时会有限制，可以参考第二个示例。
//当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。
//当你创建单个元素时，请使用闭合标签或 XHTML 格式。
//例如，创建一个 span ，可以用 $("<span/>") 或 $("<span></span>") ，
//但不推荐 $("<span>")。在jQuery 中，
//这个语法等同于$(document.createElement("span")) 。
//例一:动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。
//在这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，
//来实现标记到 DOM 元素转换的。所以，这个函数既有灵活性，也有局限性。
$('<div><p>Hello</p></div>').appendTo('body');
//例二:创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。
$('<input type="checkbox"');
//jQuery(elements)将一个或多个DOM元素转化为jQuery对象。
//这个函数也可以接收XML文档和Window对象（虽然它们不是DOM元素）作为有效的参数。
//jQuery(callback) $(document).ready()的简写。
//允许你绑定一个在DOM文档载入完成后执行的函数。
//这个函数的作用如同$(document).ready()一样，只不过用这个函数时，
//需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。
//从技术上来说，这个函数是可链接的－－但真正以这种方式链接的情况并不多。
//你可以在一个页面中使用任意多个$(document).ready事件。
//参考 ready(Function) 获取更多 ready 事件的信息。
//=================================================
// jQuery对像访问
// each(callback) size() length selector
// context get() get(index) index(subject)
//=================================================
//each(callback)以每一个匹配的元素作为上下文来执行一个函数。
//意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素
//（每次都是一个不同的匹配元素）。而且，在每次执行函数时，
//都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整形）。
// 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。
//返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
//例一:迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
$('img').each(function(i){
this.src="images/test" +i + ".gif";
})
//例二:如果你想得到 jQuery对象，可以使用 $(this) 函数。
$('img').each(function(){
$(this).toggleClass('example');
})
$('button').click(function(){
$('div').each(function(index,domEle){
$(domEle).css('backgroundColor','yellow');
if($(this).is('#stop')){
$('span').text("Stopped at div index #" + index);
return false;
}
});
});
//size() jQuery 对象中元素的个数。
//这个函数的返回值与 jQuery 对象的'length' 属性一致。
//例:计算文档中所有图片数量
var a=$('img').size();
alert(a);
//length jQuery 对象中元素的个数。
//当前匹配的元素个数。 size 将返回相同的值。
//selector jQuery 1.3新增。返回传给jQuery()的原始选择器。
//换句话说，就是返回你用什么选择器来找到这个元素的。
//可以与context一起使用，用于精确检测选择器查询情况。
//这两个属性对插件开发人员很有用
//例:确定查询的选择器
$('ul')
.append("<li>" + $("ul").selector + "</li>")
.append("<li>" + $("ul li").selector +"</li>")
.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
//context jQuery 1.3新增。返回传给jQuery()的原始的DOM节点内容，
//即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。
//可以与selector一起使用，用于精确检测选择器查询情况。
//这两个属性对插件开发人员很有用。
//例:检测使用的文档内容
$("ul")
.append("<li>" + $("ul").context + "</li>")
.append("<li>" + $("ul", document.body).context.nodeName + "</li>");
//示例所需要Html代码：
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>
<p>one</p> <div><p>two</p></div> <p>three</p>
<img /><img />
<div id="d1">
<form id="form1" name="form1" method="post" action="">
<p>
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_0" />
单选</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_1" />
单选</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_2" />
单选</label>
<br />
</p>
</form>
</div>
<form id="form2" name="form2" method="post" action="">
<p>
<label>
<input type="radio" name="RadioGroup2" value="单选" id="RadioGroup2_0" />
1</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="单选" id="RadioGroup2_1" />
2</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="单选" id="RadioGroup2_2" />
3</label>
<br />
</p>
</form>
<p id="msg"> </p>
浙公网安备 33010602011771号