jquery:
基本的选择器:
$('#id').css('color','blue');//根据id属性为id,设置css样式颜色设置成蓝色
$('h2').css('background-color','pink');
$('input').css('width','500px');
$('.apple').css('background-color','lightgreen');//class属性值查找
$('*').css('background-color','gray');//通配符
$('h2,#usertel,#userqq').css('color','lightblue');//联合选择器
层次选择器:
$('div span');//在div内部获得span节点,不考虑层次,只获得div内第一个span节点,,注意不考虑层次
$('div > span')//在div内部获得子元素span节点
$('div+span')//在div后边获得紧紧挨着的第一个兄弟关系的span节点,获得的是span节点
$('div~span')//在div后边后边获得全部兄弟关系的span节点
并且选择器:
$('li').css('color','red');
$('li:first');//:first第一个 :last 最后一个
$('li:eq(3)').css('color','red')//eq(下标索引号码) 获得节点的下标索引值与给定索引值相等
gt(索引号) great than 节点索引值,大于某个范围
lt(索引值) less than 节点索引值,小于某个范围
$('li:gt(5)').css('background-color','pink');
$('li:lt(5)').css('background-color','orange');
:even 匹配到下标索引值为偶数的节点
:odd 匹配到下标索引值为奇数的节点
$('li:odd').css('background-color','lightblue');
$('li:even').css('background-color','lightgreen');
:not(selector选择器) 去除某个节点
$('li:not(#yun)').css('color','blue');
$(':header').css('background-color','yello');//:header 是一个选择器可以单独使用,选择所有的H标签
并且选择器的注意:
1、并且选择器可以单独使用$(':header.pear').css('color','red');//找出H标签,并且class属性为pear的标签
2、$('li:gt(1):lt(3)') 各种选择器都可以构造“并且”关系
3、并且关系的选择器可以使用多个,每个选择器使用前,已经获得节点的下标要“归位”(归零),这点是什么意思?
20150816-jQuery-07-并且选择器(复杂用法)
4、多个并且关系的选择器,没有前后顺序要求,但是要避免产生歧义
$('li.pear').css('background-color','orange');
内容过滤选择器:
1、 :contains(内容)
包含内容选择器,获得的节点内部必须包含指定的内容
$('div:contains(beijing)')
2、:empty
获得空元素(内部没有任何元素/文本(空))节点对象
$('div:empty')
3、:has(选择器)
节点内部必须包含指定选择器对应的元素
$('div:has(#apple)');
4、 :parent
寻找的节点必须作为父元素节点存在
$('div:parent')
小东西:console.log($('div:parent'));
表单域选中选择器:
复选框、单选框、下拉框选中
//获得被选中的复选框: :checked
console.log($('.hby:checked'));
//获得被选中的单选框 :checked
console.log($('.sx:checked'));
//获得被选中的下拉列表 :selected
console.log($('option:selected'));
属性操作:获得属性值、修改属性值、删除属性值
$().attr(属性名称); //获得属性信息值 console.log($('input:first')).attr('type');
$().attr(属性名称,值); //设置属性的信息 $('input:first').attr('class','roange'); jquery是不让修改type属性的
$().remoreAttr(属性名称); //删除属性,除了type属性不能删除,其他属性都可以删除 $('input:first').removeAttr('id');
$().attr(json对象); //同时为多个属性设置信息值,json对象的键值对就是名称和值
$().attr(属性名称,fn);//通过fn函数执行的return返回值对属性进行复制
//document.getElement('apple').type='checkbox';//这是js底层代码,对有的浏览器可以修改
function f4(){
var jn={class:'pear',id:'usermail',name:'usermail'};
$('input:first').attr(jn);//批量修改属性
}
function f5(){
//通过函数执行后return的返回值对属性进行修改复制操作
$('input:first').attr('value',function(){
return 12+30;//代码紧凑,可读性不好
});
}
快捷操作:
$().addclass();
$().removeclass();//删除class属性的某一个值,要区别$().removeAttr
$().toggleClass(class属性值);//开关效果,有就删除,没有就添加
.apple{width:300px;height:200px;background-color:pink;}
function f1(){
//attr()对同一个属性进行多次设置修改,后者要覆盖前者
$('div').attr('class','apple');
$('div').attr('class','pear');
$('div').attr('class','banana');
//addClass()给class属性“追加”信息值
//以下三个class共同起作用,同时存在
$('div').addClass('class','apple');
$('div').addClass('class','pear');
$('div').addClass('class','banana');
$('div').attr('class','apple pear banana');//是欧克的
}
function f2(){
$('div').removeClass('pear');//删除class属性值为pear
$('div').removeAttr('class');//删除整个class
}
function f3(){
$('div').toggleClass('apple');
}
标签包含内容操作:
$('div').html();//获取
$('div').html('百度');//设置
$('div').html('请访问百度');
$('div').text();//过滤html标签,获得字符串内容
$('div').text('
hell
o');//-->hell
o最好设置普通字符串内容,如果有html标签,则标签的"<"、">"会变成符号实体,<-----< >-----> 空格-----
css样式操作:
样式分类:行内样式、内部样式、外部样式
行内样式:写在html标签内的样式
内部样式:写在内的样式
外部样式:使用引入的样式
$('div').css("color");//获取样式。
$('div').css("width");//行内、内部、外部样式都可以获得
//js 的dom方式只能获得“行内”样式
$('div').css("border");//空格不能获得border,是一个复合样式
border:
border-top-style/border-top-color/border-top-width
border-left-style/border-left-color/border-left-width
border-right-style/border-right-color/border-right-width
border-bottom-style/border-bottom-color/border-bottom-width
$('div').css('border-left-style');
样式设置:(会被设置为行内样式,行内有则修改、行内无则添加)
$('div').css('font-size','40px'); //行内样式优先级高
复合样式可以进行直接设置
通过json对象批量修改css
$('div').css({'font-size':'50px',color:'purple'});
css()样式操作的特点:
1、样式获取,jquery可以获取行内、内部、外部的样式
dom方式只能获得行内样式
2、获取复合属性样式,需要拆分为“具体样式”才可以操作
(有的浏览器是可以获得复合属性信息的,例如:chrome)
3、复合的样式可以直接进行设置操作
value属性值快捷操作
复选框的使用:1、获得被选中复选框的value属性值
2、设置默认情况下哪个复选框被选中
function f1(){
//获取全部的复选框的value值;遍历全部的复选框;判断当前被遍历的复选框是否选中;如果有选中就获得其value值
//$('.hby:checked')
var s="";
for(var i=0;i<$(.hby:checked.length;i++)){
//$('.hby:checked:eq('+i+')').attr('value');
s+=$('.hby:checked:eq('+i+')').val()+",";
}
s=s.substr(0,s.length-1);
}
function f2(){
$('.hby').val([1,4]);//设置“value值=元素值”的项目选中}
下拉列表:
function f1(){
//获取(被选中下拉列表项目的value值)
//适合单选的下拉列表
$('option:selected').val();//attr('value')
//处理多选的下拉列表的思想是跟复选框的思路是一样的
//$(下拉列表)。val(); 获得全部被选中的下拉列表项目的value 值
$('select').val();//适合单选和多选
}
默认选中:
function f2(){
$('select').val([1,2,5]);//默认选中value值为1/2/5选中$('select').val(['A','B','E']);
}
单选按钮:
function f1(){
//获取(被选中单选框项目的value值)
$('.sx;checked').val();
}
function f2(){
//设置(被选中单选框项目的value值)
//$(全部单选按钮).val([元素值]);使得value值==元素值的项目选中
$('.sx;checked').val();
}
复选框操作:
全选、反选、全不选
$().attr('checked',true);//设置复选框选中
$().attr('checked',false);//取消复选框选中
$().attr();
在jquery框架里面,大部分方法本身有“遍历机制”,会为每个dom都设置对应的属性(包括普通属性、样式属性)
function fanxuan(){
$('.hby');
for(var i=0;i<$('.hby').length;i++){
var flag = $('.hby:eq('+i+')').attr('checked');//判断选中状态
$('.hby:eq('+i+')').attr('checked',!flag);
}
}
$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点 上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt 等等. 2.组选择器: 下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class. $("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 3.后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test 的标签) 可以见DEMO。 4.子选择器: $("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子: $("div>.test")
在$("div + #test")中能取到p段落节点
则不能取到 6.属性选择器: 把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"):选取所有该mix且具有attr属性的节点 $("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点 $("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的 $("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的 $("mix[@attr*=a_value"]):attr属性的属性值中包含a_value 7.进一步选择器:
jQuery常用功能大全 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery 对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.getElementByIdx_x("msg"))则为jquery对象,可以使用jquery的方法。 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。 如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。 以下几种写法都是正确的: $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery 对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个
单选: 1、下面哪一种不属于Jquery的选择器。(D) A:基本选择器B:层次选择器 C:表单选择器D:节点选择器 2、使用jquery检查元素在网页上是否存在。(B) A:if($("#id")) { //do someing... } B: if($("#id").length > 0) { //do someing... } C: if($("#id").length() > 0) { //do someing... } D: if($("#id").size > 0) { //do someing... } 3、新闻,获取元素title的属性值。(C) A:$("a").attr("title").val(); B:$("#a").attr("title"); C:$("a").attr("title"); D:$("a").attr("title").value; 4、执行下面语句 $(document).ready(function(){ $("#click").click(function(){ alert("click one time"); }); $("#click").click(function(){ alert("click two time"); });
}); 单击按钮,这个会有什么效果。(C) A:弹出一次对话框,显示click one time 。 B:弹出一次对话框,显示click two time 。 C:弹出两次对话框,依次显示click one time,click two time。D:js编译错误。 5、页面中有三个元素,如下:
jquery选择器之获取父级元素、同级元素、子元素 1、父级元素 1.1 parent() 方法返回被选元素的直接父元素。 如:$("span").parent(); 1.2 parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素()。 如:$("span").parents();
也可以使用可选参数来过滤对祖先元素的搜索。 如:$("span").parents("ul"); 1.3 parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 如:$("span").parentsUntil("div");
2、同胞 2.1 siblings() 方法返回被选元素的所有同胞元素。如:$("h2").siblings(); 返回属于
2.2 next() 方法返回被选元素的下一个同胞元素。 如:$("h2").next(); 2.3 nextAll() 方法返回被选元素的所有跟随的同胞元素。如:$("h2").nextAll();
2.4 nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。 如:$("h2").nextUntil("h6");
2.5 prev(), prevAll() 以及prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素。 3、子元素 3.1 children() 方法返回被选元素的所有直接子元素。 如:$("div").children(); 返回类名为"1" 的所有元素,并且它们是
一、jQuery获取Select选择的Text和Value:语法解释: 1.$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2.varcheckText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3.varcheckValue=$("#select_id").val(); //获取Select选择的Value 4.varcheckIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5.varmaxIndex=$("#select_idoption:last").attr("index"); //获取Select最大的索引值 二、jQuery设置Select选择的Text和Value:语法解释: 1.$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 2.$("#select_id ").val(4); // 设置Select的Value值为4的项选中 3.$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中 三、jQuery添加/删除Select的Option项:语法解释: 1.$("#select_id").append(""); //为Select追加一个Option(下拉项) 2.$("#select_id").prepend(""); //为Select插入一个Option(第一个位置) 3.$("#select_idoption:last").remove(); //删除Select中索引值最大Option(最后一个) 4.$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 5.$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 6.$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 四、获取值 1.jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中项 的值var item = $('input[@name=items][@checked]').val(); 2.获取select被选中项的文本:var item = $("select[@name=items] option[@selected]").text(); 3.select下拉框的第二个元素为当前选中值:$('#select_id')[0].selectedIndex = 1; 4.radio单选组的第二个元素为当前选中值:$('input[@name=items]').get(1).checked = true; 5.文本框,文本区域:$("#txt").attr("value"); 6.多选框checkbox:$("#checkbox_id").attr("value"); 7.单选组radio:$("input[@type=radio][@checked]").val(); 8.下拉框select:$('#sel').val(); 五、控制表单元素: 1.文本框,文本区域:$("#txt").attr("value",'');//清空内容 2.$("#txt").attr("value",'11');//填充内容 3.多选框checkbox:$("#chk1").attr("checked",'');//不打勾 4.$("#chk2").attr("checked",true);//打勾 5.if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 6.单选组radio:$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 7.下拉框select:$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 8.$("").appendTo("#sel")//添加下拉框的option 9.$("#sel").empty();//清空下拉框 10.//遍历option和添加、移除option functionchangeShipMethod(shipping){ varlen = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){ $("select[@name=ISHIPTYPE] option").each(function(){ if($(this).val() == 111){ $(this).remove(); } }); }else{ $("").appendTo($("select[@name=ISHIPTYPE]")); } } //取得下拉選單的選取值 $(#testSelectoption:selected').text(); 或$("#testSelect").find('option:selected').text(); 或$("#testSelect").val(); 六、下拉框: 1.var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格) 2.var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值 3.var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值 4.$("#select").empty();//清空下拉框//$("#select").html(''); 5.$("").appendTo("#select")//添加下拉框的option 稍微解释: 1.select[@name='country'] option[@selected] 表示具有name 属性,并且该属性值为'country' 的select元素里面的具有selected 属 性的option 元素;可以看出有@开头的就表示后面跟的是属性。 2.单选框:
jQuery选择器的工作原理和优化 至于有那些选择器,在帮助手册中都有,自己去看,这篇主要是分析他的工作原理,而优化我们写的选择器,尤其在页面内容很多的情况下,更应该需要优化。下边就言归正传。 每次申明一个jQuery对象的时候,返回的是 jQuery.prototype.init 对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同,这里就不讲原因了,等下一篇再讲为什么会是这样。 当我们使用选择器的时候$(selector,content),就会执行 init(selectot,content),我们看看inti中是怎样执行的: if ( typeof selector == "string" ) { //正则匹配,看是不是HTML代码或者是#id var match = quickExpr.exec( selector );
//没有作为待查找的 DOM 元素集、文档或 jQuery 对象。 //selector是#id的形式 if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array) //HTML代码,调用clean补全HTML 代码 if ( match[1] ){ selector = jQuery.clean( [ match[1] ], context ); } // 是: $("#id") else {
jQuery入门 什么是jQuery jQuery是一个JavaScript库,通过封装原生的JavaScript函数得到一整套定义好的方法。它是JohnResig于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。以最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。 主旨:以更少的代码、实现更多的功能(write less ,do more!) 官网:https://www.wendangku.net/doc/4d13897270.html,/ jQuery的功能和优势 jQuery作为JavaScript封装的库,它的目的就是为了简化开发者使用JavaScript。主要功能有以下几点: 像CSS那样访问和操作DOM; 修改CSS控制页面外观; 简化JavaScript代码操作; 事件处理更加容易; 各种动画效果使用方便; 让Ajax技术更加完美; 基于jQuery大量插件; 自行扩展功能插件。 jQuery最大的优势,就是特别的方便。比如模仿CSS获取DOM,比原生的JavaScript
要方便太多。并且在多个CSS设置上的集中处理非常舒服,而最常用的CSS功能又封装到单独的方法。 最重要的是jQuery的代码兼容性非常好,你不需要总是头疼着考虑不同浏览器的兼容问题。 其他JavaScript库 目前除了jQuery,还有5个JS库较为流行,他们分别是YUI、Prototype、Mootools、Dojo和ExtJS。 YUI,是雅虎公司开发的一套完备的、扩展性良好的富交互网页工具集。 Prototype,是最早成型的JavaScript库之一,对JavaScript内置对象做了大量的扩展。 Dojo,Dojo强大之处在于提供了其他库没有的功能。离线存储、图标组件等等。 Mootools,轻量、简洁、模块化和面向对象的JavaScript框架。 ExtJS,简称Ext,原本是对YUI的一个扩展,主要创建前端用户界面。(付费的) jQuery代码的编写 配置jQuery环境 1、获取jQuery最新版本 从官网下载:https://www.wendangku.net/doc/4d13897270.html,/ 3、jQuery环境配置 jQuery不需要安装,把下载的jQuery.js放到网站上的一个公共位置,想要在某个页面上使用jQuery时,只需在该HTML文档中引入该库文件即可。 4、在页面中引入jQuery 由于jQuery是JavaScript的一个库文件,也就是jQuery本质是一个.js文件,所以使用引入。 简单的jQuery示例
jquery: 基本的选择器: $('#id').css('color','blue');//根据id属性为id,设置css样式颜色设置成蓝色 $('h2').css('background-color','pink'); $('input').css('width','500px'); $('.apple').css('background-color','lightgreen');//class属性值查找 $('*').css('background-color','gray');//通配符 $('h2,#usertel,#userqq').css('color','lightblue');//联合选择器 层次选择器: $('div span');//在div内部获得span节点,不考虑层次,只获得div内第一个span节点,,注意不考虑层次 $('div > span')//在div内部获得子元素span节点 $('div+span')//在div后边获得紧紧挨着的第一个兄弟关系的span节点,获得的是span节点 $('div~span')//在div后边后边获得全部兄弟关系的span节点 并且选择器: $('li').css('color','red'); $('li:first');//:first第一个 :last 最后一个 $('li:eq(3)').css('color','red')//eq(下标索引号码) 获得节点的下标索引值与给定索引值相等 gt(索引号) great than 节点索引值,大于某个范围 lt(索引值) less than 节点索引值,小于某个范围 $('li:gt(5)').css('background-color','pink'); $('li:lt(5)').css('background-color','orange'); :even 匹配到下标索引值为偶数的节点 :odd 匹配到下标索引值为奇数的节点
jQuery选择器种类 由于经常使用jQuery,但是其中的很多选择器又不太能够熟练记牢使用,所以趁着上周有人分享,我再仔细的把jQuery的选择器过一遍,争取一次拿下,以后做到运用自如。jQuery选择器主要来分可以分为三种:(1)基本选择器(2)层次选择器(3)过滤选择器(4) 表单选择器 1、基本选择器 基本选择器主要就是比较常见和常用的集中,是必须要掌握的。 #ID id选择器返回一个对象$("#div") .class类选择器返回集合$(".content") Element 标签选择器返回集合$("input") * 匹配所有元素返回集合$("*") selector1,selector2,selector3,....合并每个选择器匹配的元素,返回集合$("#div,.class,input") 2、层次选择器(主要是选择层次下面的元素) $("E F") 选择E元素中的所有F后代元素(注意:是子孙元素) 返回集合 $("P>C") 选择P元素下的C子元素(注意:是子元素)返回集合 $("P+N") 选择P元素后的相邻元素(即下一个兄弟元素),和$("P").next("N")方法执行效果相同 $("P~S") 选择P元素之后的所有S兄弟元素,和$("P").nextAll("S")方法执行效果相同,另pre()方法和next()方法相对。preAll()和nextAll()相对。 注意siblings()方法和nextAll()方法的区别:siblings()是所有前后的兄弟元素,nextAll()是所有后面的兄弟元素 第三和第四个选择器常常用后面的写法代替
现在我们开始Jquery 的选择器之旅哈哈。 下面的选择器分类中, 带有“过滤器”的分类表示是“过滤”选择器, 否则就是“选择”功能的选择器。 jQuery 选择器分为如下几类: [说明] 1.点击“名称”会跳转到此方法的jQuery 官方说明文档。 2.可以在下节中的jQuery 选择器实验室测试各种选择器 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id 选择 $("divId") 选择ID 为divId 的元素 element 根据元素的名称选择, $("a") 选择所有元素 .class 根据元素的css 类选择 $(".bgRed") 选择所用CSS 类为bgRed 的 元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几 个选择器匹配的内容. $("#divId, a, .bgRed") [学习建议]: 大家暂时记住基础选择器即可, 可以直接跳到下一节“jQuery 选择器实验室”进行动手练习, 以后再回来慢慢学习全部的选择器, 或者用到的时候再回来查询。 2.层次选择器 Hierarchy
child必须包含在parent中并且父类是 parent元素.选择CSS类为myList元素中的直接子节点
jQuery 语法 您可以选取(查询,query)HTML 元素,并对它们执行“操作”(actions)。 jQuery 语法实例 $(this).hide() 演示jQuery hide() 函数,隐藏当前的HTML 的元素。 $("#test").hide() 演示jQuery hide() 函数,隐藏id="test" 的元素。 $("p").hide() 演示jQuery hide() 函数,隐藏所有 元素。 $(".test").hide() 演示jQuery hide() 函数,隐藏所有class="test" 的元素。 jQuery 语法 jQuery 语法是为HTML 元素的选取编制,可以对元素执行某些操作。 基础语法是:$(selector).action() ?美元符号定义jQuery ?选择符(selector)“查询”和“查找” HTML 元素 ?jQuery action() 执行对元素的操作 实例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - 隐藏所有class="test" 的段落 $("#test").hide() - 隐藏所有id="test" 的元素 提示:jQuery 使用的语法是XPath 与CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有jQuery 函数位于一个document ready 函数中:
这是为了防止文档在完全加载(就绪)之前运行jQuery 代码。 jQuery 选择器 选择器允许您对元素组或单个元素进行操作。 jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取HTML 元素的实例。 关键点是学习jQuery 选择器是如何准确地选取您希望应用效果的元素。 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML 元素进行选择。选择器允许您对HTML 元素组或单个元素进行操作。 在HTML DOM 术语中: 选择器允许您对DOM 元素组或单个DOM 节点进行操作。 jQuery 元素选择器 jQuery 使用CSS 选择器来选取HTML 元素。 $("p") 选取 元素。 $("p.intro") 选取所有class="intro" 的 元素。 $("p#demo") 选取id="demo" 的第一个 元素。 jQuery 属性选择器 jQuery 使用XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有href 属性的元素。 $("[href='#']") 选取所有带有href 值等于"#" 的元素。
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签或 var div=document.getElementById('a'); var ul=div.childNodes.item(0); var lis=ul.childNodes; for(var i=0;i