标签：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");
标签：style blog color 使用 io cti ar 代码
原文地址：http://www.cnblogs.com/michaeljunlove/p/3886003.html
