jQuery学习笔记

浏览数：58 / 时间：2015年06月09日

以下代码表示在页面框架下载完毕后执行,类似于window.onload=function(){},但在执行效率上比后者高，后者必须要等页面的所有东西加载完毕才执行代码

$(document).ready(function(){
   //执行的代码         
})
等价于
$(function(){

})

以前都是直接写JS原生的，比如：

var t1=document.getElementById("mm")//获取id=mm的DOM对象
var t2=t1.innerHTML;//获得该DOM对象中的内容
t2.innerHTML="设置DOM对象中的内容";

在jQuery中，获取DOM对象的用法简单多了，如下：（class 用点。id用#选择）

var t1=$(#mm);//获取id=mm的DOM对象
var t2=t1.html();//获取该对象中的内容
t2.html（"设置改对象中的内容"）；

所以，使用jQuery比传统的JS代码要简洁许多，并且还兼容各种浏览器。

jQuery选择器：

1.基本选择器

 //ID匹配元素，选择id=divOne的DOM节点
$("#divOne").css("display","block");//显示id=divOne的页面元素

//元素名匹配元素
 $("div span").css("display","block");//显示元素名为span的页面元素

//类匹配元素,选择class=clsOne的DOM节点
$(".clsOne").css("display","block");//显示类别名为clsOne的页面元素

//匹配所有元素
 $("*").css("display","block");//显示页面中的所有元素

 //合并匹配元素
 $("#divOne,span").css("display","block");//显示id=divOne和元素名为span的页面元素

2.层次选择器：主要层次关系包括后代，父子，相邻，兄弟关系

//匹配后代元素
$("div span").css("display","block");//显示div中所有sapn的标记
            
//匹配子元素
$("div>span").css("display","block");//显示div中子span标记
           
//匹配后面元素
$("#divMid + div").css("display","block");//显示id为divMid元素后的下一个div
$("#divMid").next().css("display","block");
           
//匹配所有后面元素
$("#divMid ~ div").css("display","block");//显示id为divMid元素后的所有div
$("#divMid").nextAll().css("display","block");
           
//匹配所有相邻元素
$("#divMid").siblings("div").css("display","block");//显示id为divMid的所有相邻div

3.简单过滤选择器，书写都用冒号开头

//增加第一个元素的类别
$("li:first").addClass("GetFocus");//增加第一个li的class类别
            
//增加最后一个元素的类别
$("li:last").addClass("GetFocus");//增加最后一个li的class类别
            
//增加去除所有与给定选择器匹配的元素类别
$("li:not(.NotClass)").addClass("GetFocus");
           
//增加所有索引值为偶数的元素类别,从0开始计数
$("li:even").addClass("GetFocus");
            
//增加所有索引值为奇数的元素类别,从0开始计数
$("li:odd").addClass("GetFocus");
            
//增加一个给定索引值的元素类别,从0开始计数
$("li:eq(1)").addClass("GetFocus");
            
//增加所有大于给定索引值的元素类别,从0开始计数
$("li:gt(1)").addClass("GetFocus");
            
//增加所有小于给定索引值的元素类别,从0开始计数
$("li:lt(4)").addClass("GetFocus");
            
//增加标题类元素类别
$("div h1").css("width","238");
$(":header").addClass("GetFocus");
            
            
animateIt(); //增加动画效果元素类别
$("#spnMove:animated").addClass("GetFocus");
           
function animateIt() { //动画效果   
    $("#spnMove").slideToggle("slow", animateIt);   
}

4.内容过滤选择器：根据元素中的文字内容或所包含的子元素获取元素，其文字内容可以模糊或绝对匹配进行元素定位

//显示包含给定文本的元素
$("div:contains(‘A‘)").css("display","block");
           
//显示所有不包含子元素或者文本的空元素
$("div:empty").css("display","block");
            
//显示含有选择器所匹配的元素的元素
$("div:has(span)").css("display","block");

//显示含有子元素或者文本的元素
$("div:parent").css("display","block");

jQuery学习笔记,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery学习笔记