JQuery 学习笔记 选择器之五_jquery

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.3.2.js"></script>
<script type="text/javascript"><!--
    $(function(){
            $("#aFirst").click(function(){
                    $("div[id]").each(function(){
                        $(this).css("background","#773300");
                    })
            })
            $("#aSecond").click(function(){
                    $("div[id = div2]").each(function(){
                         $(this).css("background","#8833ff");
                    })
            })
            $("#aThird").click(function(){
                    $("div[id != div2]").each(function(){
                         $(this).css("background","#87f289");
                    })
            })
            $("#aFourthly").click(function(){
                    $("div[name ^= DIV]").each(function(){
                         $(this).css("background","#140586");
                    })
            })
            $("#aFifthly").click(function(){
                    $("div[name $= ly]").each(function(){
                         $(this).css("background","#930584");
                    })
            })
            $("#aSixth").click(function(){
                    $("div[name *= th]").each(function(){
                         $(this).css("background","#099483");
                    })
            })
            $("#aSeventh").click(function(){
                    $("div[id][name !=Fifthly][name *= i]").each(function(){
                         $(this).css("background","#938607");
                    })
            })
     })
// --></script>
<title>无标题文档</title>
</head>
<body>
<a href="#" onclick="javascript:location.reload();">重置</a>
<div id="div1" name ="DIV_First">div1</div>
<div id="div2" name ="DIV_Second">div2</div>
<div id="div3" name = "DIV_Third">div3</div>
<div id="div4" name = "DIV_Fourthly">div4</div>
<div id="div5" name="Fifthly">div5</div>

<a href="#" id="aFirst">设置页面所有DIV元素的背景颜色</a>|
<a href="#" id="aSecond">设置第2个DIV的背景颜色</a>|
<a href="#" id="aThird">设置除第2个DIV以外DIV的背景颜色</a>|
<a href="#" id="aFourthly">设置name属性值以DIV开头的元素</a>|
<a href="#" id="aFifthly">设置name属性值以ly结尾的元素</a>|
<a href="#" id="aSixth">设置name属性值包含th的元素</a>|
<a href="#" id="aSeventh">综合应用</a>

</body>
</html>

1.$("selector [Attribute]")--注,以下直接简写为[Attribute]
描述:获取selector选择的元素集合里,拥有Attribute属性的元素集合。应该较为简单,在这就不做啥详细说明了,有不了解的跟下贴,哈
返回值:Array(Element);
2.[attribute=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值等于Value的元素集合。
返回值:Array(Element);
3.[attribute!=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值不等于Value的元素集合。
返回值:Array(Element);
4.[attribute^=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值以Value开头的元素集合。相当于正则的规范^^
返回值:Array(Element);
5.[attribute$=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值以Value结尾的元素集合。相当于正则的规范^^
返回值:Array(Element);
6.[attribute*=value]
描述:获取selector选择的元素集合里,拥有Attribute属性值包含Value的元素集合。
返回值:Array(Element);
7.[selector1][selector2][selectorN]
描述:与第一章中,基本选择器综合应用一样,此方法也就是前6种的综合版,就如我例子中$("div[id][name !=Fifthly][name *= i]")就是取所有的div元素中,拥有ID属性&&name属性!=Fifthly&&name属性包含字符i的DIV元素的集合,大家用我例子试下就能很清楚的了解看到效果了,哈。好好利用此方法应该很有用^^
返回值:Array(Element);

时间: 2024-09-13 08:22:02

JQuery 学习笔记 选择器之五_jquery的相关文章

JQuery 学习笔记 选择器之一_jquery

本章主要先对Jquery的选择器进行说明下,本人也不敢说讲解,哈,因为我也是正在学习中,本系列文章所写目的只在与对自己学习过程中的心得等记录下来,一方面加强自己的印象,另一方面共享下学习的经验,呵,小弟刚开始写这种文章,希望大家多多支持^^,有哪些方法不好可以跟贴指导指导^^ 现在,让我们一起开始在JQuery的世界里飞翔吧^^ 首先,本章先来学习JQuery最基本的选择器的使用咯 先声明下,使用JQuery最基本的规则 $(document).ready(function(){ //do so

JQuery 学习笔记 选择器之三_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

JQuery 学习笔记 选择器之四_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

JQuery 学习笔记 选择器之六_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

jQuery学习笔记之入门_jquery

最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下: 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: $('#info').val('Hello World!'); 嗯,可以看

jQuery学习笔记之toArray()_jquery

从源码中可以看到,这些常见的方法,都是直接从原生的javascript中"借鉴"过来的.为什么这么说呢?225行中,在运行时,this是指向jQuery对象的,通过call语句借鉴slice方法,切割出一个数组出来,这种"借鸡下蛋"的方法,真的是让人拍手叫绝.slice(start,end)是用来切分数组的.start表示切分数组的开始位置.省略end表示到从start一直到最后

jQuery学习笔记之回调函数_jquery

1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法. 2.代码 JS代码 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opacity:0.1

jQuery学习笔记之插件开发(4)

jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用的功能定义为函数,然后绑定到jQuery对象上,从而成为jQuery对象的一个扩展方法. 目前,大部分jQuery插件都是这种类型的插件,由于这种插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQuery强大的选择器的优势.有很多jQuery内部方法,也是

Jquery 学习笔记(二)jQuery性能优化指南

Jquery 学习笔记(二) -jQuery性能优化指南 2009年11月30日 一 作者:   邦畿千里   1,总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HTML代码: <div id="content"> <form method="post" action="#"> <h2>交通信号灯<