首页 > 代码库 > Jquery基础1-----入门
Jquery基础1-----入门
1.让jQuery放弃对$符号的使用
出了jquery之外,仍有一些javascript库也使用了$符号,可以使用jQuery.noConflict();方法让jQuery放弃对$符号的使用
也可自定义jQuery的简写符号:
var jq = jQuery.noConflict();
jq(document).ready(function(){});//jq代替$,成为jquery的简写形式
2.等待DOM就绪
$(document).ready(function(){
console.log("在function内部编写代码");
});
这种方法的实质是:以函数作为参数传递给ready方法,其实是为jQuery的ready事件绑定事件处理函数,可简写为$(function(){});
3.延迟ready事件的出发事件------holdReady()
当我们动态载入外部资源时这个方法有用
$.holdReady(true);//延迟ready事件的触发
$(document).ready(function(){
console.log("在function内部编写代码");
});
setTimeout(function(){
$.holdReady(false);//五秒后接触ready时间的延迟
},5000);
4. 使用上下文限制搜索范围
1) 将一个选择器用作下一个选择器的上下文
$(document).ready(function(){
$("img:odd",$("div")).mouseout(function(){});//选取所有div中的第奇数个img,$("div")用作另一个选择器的上下文。
});
2)将HTMLElement对象用作上下文
$(document).ready(function(){
var ele = document.getElementById(""block);
$("img:odd",block).mouseout(function(){});//在block元素内搜索奇数图片
});
5.确定创建jQuery对象对应的上下文对象-----context属性
$(document).ready(function() {
var jq1 = $("img:odd");
//没有上下文对象,默认为document,由于document没有tagName属性,所以返回undifined
console.log("No context: " + jq1.context.tagName);//undifined
//上下文元素为多个元素时,其上下文对象为document
var jq2 = $("img:odd", $("div"));
console.log("Multiple context elements: " + jq2.context.tagName);//undifined
//使用单一HTMLElement元素创建jQuery对象,其上下文对象为该HTMLElement元素
var jq3 = $("img:odd", document.getElementById("block"));
console.log("Single context element: " + jq3.context.tagName); //block对应的标签名
});
6.jQuery对象和DOM对象的转换与处理
由DOM对象生成Jquery对象
var $id1 = $(document.getElementById("id1"));//此时$id1 为jQuery对象
jQuery对象生成DOM对象:可以通过数组、each、索引等方法获得具体如下
1)把jQuery对象看成是一个HTMLElement对象数组---享受jQuery高级功能的同时仍可以直接访问DOM
$(document).ready(function() {
var elems = $("img:odd");
for (var i = 0; i < elems.length; i++) {
console.log(elems[i].tagName + " " + elems[i].src);//直接访问Img对象的src属性
}
});
2)迭代JQuery对象内含的DOM对象
$(document).ready(function() {
$("img:odd").each(function(index, elem) {//index为索引,elem为每一个DOM对象
console.log("Element: " + elem.tagName + " " + elem.src);
});
});
3)获取指定索引位置的HTMLElement对象(DOM对象)
$(document).ready(function() {
var elem = $("img:odd").get(1);//获取索引位置为1的DOM元素
console.log( elem.tagName + " " + elem.src);
});
4)确定一个HTMLElement对象的序号----index方法
$(document).ready(function() {
var elems = $("body *");
// index方法传入DOM参数
var index = elems.index(document.getElementById("oblock"));
console.log("Index using DOM element is: " + index);
// index对象传入jQuery对象
index = elems.index($("#oblock"));
console.log("Index using jQuery object is: " + index);
});
注意:index方法也可传入字符串参数(解释成选择器,可能会造成两个结果集翻转)和空参数(得到一个元素相当于邻居的序号)
5.jquery支持链式调用
Jquery基础1-----入门