码迷,mamicode.com
首页 > Web开发 > 详细

jQuery学习笔记

时间:2014-08-02 01:34:42      阅读:341      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   使用   io   cti   ar   代码   

以下代码表示在页面框架下载完毕后执行,类似于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学习笔记,布布扣,bubuko.com

jQuery学习笔记

标签:style   blog   color   使用   io   cti   ar   代码   

原文地址:http://www.cnblogs.com/michaeljunlove/p/3886003.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!