博客

//jQuery 中可使用 $ 替代 jQuery 函数，两者指向相同
/**
* $(selctor,[context]) : jQuery 取DOM对象函数
* @param selector : jQuery 选择器
* @param [context] : 查找 DOM 的上下文
* return jQuery 元素对象 或 jQuery 元素对象数组
*/ 
var $div = $("div",document);//建议 jQuery 对象变量均以 $ 符开头以示区别
var $p2 = $("<p>第一行</p><p>第二行</p>");
/**
* $(html) : jQuery 创建 jQuery 元素 
* @param html html标签文本
*/
var $input =$("<input type='checkbox'>");//创建input函数
$input.attr("type","text");//IE中将会失败

/**
* jQuery(callback) : 文档加载后执行，$(document).ready(callback) 的缩写
* @param callback 回调函数
*/
$(function(){
    console.log("文档加载完成");
});
$(function(){
    console.log("多个 $(document).ready() 均会执行与 window.onload 不同");
});
window.load = function(){
    console.log("window.load 第一个代码执行函数");
}
window.load = function(){
    console.log("后绑定的函数会覆盖 window.onload 原来的方法！");
}
/**
* jQuery.holdReady(flag) : 暂停或回复 .ready() 事件的执行
* flag : true 暂停执行，false 回复执行
*/
$.holdReady(true);
$.getScript("bootstrap.min.js",function(){
    $.holdReady(false);
});
/**
* $(selector).each(callback) : 为每个匹配元素执行函数 callback
* @param callback 执行函数 
*/
$("p").each(function(index){
    var $this = $(this);//注意：函数内部的 this 指向的是DOM元素
    if($this.attr("data-index")==index){
        console.log("属性值与索引相同，继续下一个循环");
        return true;//使用return true 来跳入下一个循环， 类似 for 循环的 continue
    }else if($this.attr("data-index" - 5 > index)){
        console.log("使用 return false 来跳出 jQuery 的 each 函数的循环");
        return false;//类似于 for 中的 break;
    }
    console.log("正常进行循环，索引"+index);
});
/**
* $(selector).size() : jQuery 对象中元素的个数，与$(selector).length 相同
*/
console.log($("<p></p><p></p>").size());//2
console.log($("<p></p><p></p>").length);//1
/**
* $(selector).selector : 获取 jQuery 对象的原始选择器
*/
console.log($("ul").selector);// 输出 ul
/**
* $(selector).context : 获取传递给 jQuery 对象的上下文，默认为 document
*/
console.log($("ul").context);// 输出
/**
* $(selector).get([index]) : 获取 jQuery 数组对象的第 index 个元素，以 DOM 对象返回
* @param index 可选，数组索引值，不传入时将返回整个 DOM 对象数组
*/
console.log($p2[0]);// <p>第一行</p>
console.log($p2.get());// <p>第一行</p><p>第二行</p>
console.log($p2.get(1));// <p>第二行</p>
/**
* $selector.index(selector) : 搜索匹配元素的索引值
*/
console.log($p2.index("p"));//返回 0 
/**
* $(selector).data([key],[value]) : 在元素上存放数据，返回 jQuery 对象
* @param [key] 获取或设置数据的键值，
* @param [value] 可选，有传入时为设置 key 键的值并返回返回 jQuery 对象，当[key]和[value] 都不传入时返回所有数据
*/
$p2.data("cat",{name:"MiMi"});
console.log($p2.data("dog",{name:"Hom"}));//[p, p]
console.log($p2.data("cat"));//Object {name: "MiMi"}
console.log($p2.data());//{cat: Object, dog: Object}
/**
* $(selector).queue([queueName],callback) : 在匹配元素上执行队列函数
* $(selector).dequeue([queueName]) : 从队列最前端移除一个队列函数，并执行他
* $(selector).clearQueue([queueName]) : 清空对象上尚未执行的所有队列
* @param [queueName] 函数队列名称，默认为 fx
*/
$p2.queue(function(){
    console.log("执行队列函数");
    $(this).dequeue();//加入队列后又从队列移除，即移除执行 function 本身
});
console.log($p2.dequeue());// 从队列中天出一个对象
//$.push();//入队列
//$.pop();//获取队列的第一个元素
/**
* jQuery.noConflict([extreme]) : 将变量$的控制权让渡给其他实现它的库
*/
jQuery.noConflict();
jQuery("div.red").hide();//使用jQuery函数操作DOM
//$("content").style.display = 'none';//其他库的$()实现，如 Prototype.js