jQuery入门及各种选择器讲解

最新推荐文章于 2024-05-06 00:10:39 发布

chance2015

最新推荐文章于 2024-05-06 00:10:39 发布

阅读量1.6k

点赞数 1

分类专栏： JavaScript_DOM编程

本文链接：https://blog.csdn.net/chance2015/article/details/50616087

版权

JavaScript_DOM编程专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery入门及各种选择器讲解

1.jQuery简介(write less do more)

jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库

jQuery 理念: 写得少, 做得多. 优势如下:

轻量级

强大的选择器

出色的 DOM 操作的封装

可靠的事件处理机制

完善的 Ajax

出色的浏览器兼容性

链式操作方式

……

第一个jQuery代码:helloworld

<!DOCTYPE html>

<html>

<head>

<title>编写helloworld</title>

//$(function(){}) 相当于window.onload, 代码写在{}之间

$(function(){

//1.选取button $("button")

//2.为button添加响应函数 $("button").click(function(){})

//代码写在function的{}中

$("button").click(function(){

//3、弹出helloworld

alert("helloworld");

});

})

</script>

</head>

<body>

</body>

</html>

2.jQuery对象与DOM对象

2.1 jQuery对象：

jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象

jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();

jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.

var $variable = jQuery 对象

var variable = DOM 对象

2.2 jQuery对象转成DOM对象

jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM 对象的时候, 有如下两种处理方法:

(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.

(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象

2.3 DOM对象转成jQuery对象

对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象. 转换后就可以使用 jQuery 中的方法了

例子如下:

<!DOCTYPE html>

<html>

<head>

<title>编写helloworld</title>

//$(function(){}) 相当于window.onload, 代码写在{}之间

$(function(){

//1.选取button $("button")

//2.为button添加响应函数 $("button").click(function(){})

//代码写在function的{}中

$("button").click(function(){

//3、弹出helloworld

alert("helloworld");

//jQuery对象和DOM对象

// 1由jQuery对象转为DOM对象

// 1.1获取一个jQuery对象

var $btn = $("button");

//1.2 jQuery对象是一个数组

alert($btn.length);

//1.3可以通过数组的下标转化成DOM对象

alert($btn[1].firstChild.nodeValue);

//2.DOM对象转化为jquery对象

//2.1获取一个DOM对象

var btn = document.getElementById("btn");

//2.2将DOM对象转化为jquery对象使用$() 进行包装

alert($(btn).text());

});

})

</script>

</head>

<body>

<button id="btn">第一个按钮</button>

<button>第二个按钮</button>

</body>

</html>

3.jQuery选择器

3.1介绍

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器

jQuery 选择器的优点:

简洁的写法

完善的事件处理机制

3.2基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).

练习:

改变 id 为 one 的元素的背景色为 # bbffaa

改变 class 为 mini 的所有元素的背景色为 # bbffaa

改变元素名为 <div> 的所有元素的背景色为 # bbffaa

改变所有元素的背景色为 # bbffaa

改变所有的<span>元素和 id 为 two 的元素的背景色为 # bbffaa

示例代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

div, span, p {

width: 140px;

height: 140px;

margin: 5px;

background: #aaa;

border: #000 1px solid;

float: left;

font-size: 17px;

font-family: Verdana;

}

div.mini {

width: 55px;

height: 55px;

background-color: #aaa;

font-size: 12px;

}

div.hide {

display: none;

}

</style>

$(function(){

//1.使用id选择器选择 id="btn1"的元素 $("#btn1")

//2.为选择的jquery对象添加响应函数 $("#btn1").click(function(){});代码写在{}里面

$("#btn1").click(function(){

//alert("btn1 click...");

$("#one").css("background","#FFFAAA");

});

$("#btn2").click(function(){

//alert("btn1 click...");

$(".mini").css("background","#FFFAAA");

});

$("#btn3").click(function(){

//alert("btn1 click...");

$("div").css("background","#FFFAAA");

});

$("#btn4").click(function(){

//alert("btn1 click...");

$("*").css("background","#FFFAAA");

});

$("#btn5").click(function(){

//alert("btn1 click...");

$("span,#two").css("background","#FFFAAA");

});

})

</script>

</head>

<body>

id 为 one,class 为 one 的div

<div class="mini">class为mini</div>

</div>

id为two,class为one,title为test的div

<div class="mini" title="other">class为mini,title为other</div>

<div class="mini" title="test">class为mini,title为test</div>

</div>

<div class="mini">class为mini</div>

</div>

<div class="mini">class为mini</div>

<div class="mini" title="tesst">class为mini,title为tesst</div>

</div>

<div style="display:none;" class="none">style的display为"none"的div</div>

<div class="hide">class为"hide"的div</div>

<div>

包含input的type为"hidden"的div<input type="hidden" size="8">

</div>

<span id="span">^^span元素^^</span>

</body>

</html>

3.3层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.

注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

练习:

改变 id 为 one 的元素的背景色为 # bbffaa

改变 class 为 mini 的所有元素的背景色为 # bbffaa

改变元素名为 <div> 的所有元素的背景色为 # bbffaa

改变所有元素的背景色为 # bbffaa

改变所有的<span>元素和 id 为 two 的元素的背景色为 # bbffaa

示例代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

div, span, p {

width: 140px;

height: 140px;

margin: 5px;

background: #aaa;

border: #000 1px solid;

float: left;

font-size: 17px;

font-family: Verdana;

}

div.mini {

width: 55px;

height: 55px;

background-color: #aaa;

font-size: 12px;

}

div.hide {

display: none;

}

</style>

$(function(){

$("#btn1").click(function(){

$("body div").css("background","#FFFAAA");

});

$("#btn2").click(function(){

//alert("btn1 click...");

$("body > div").css("background","#FFFAAA");

});

$("#btn3").click(function(){

//alert("btn1 click...");

$("#one + div").css("background","#FFFAAA");

});

$("#btn4").click(function(){

//alert("btn1 click...");

$("#two ~ div").css("background","#FFFAAA");

});

$("#btn5").click(function(){

//alert("btn1 click...");

$("#two").siblings("div").css("background","#FFFAAA");

});

$("#btn6").click(function(){

//alert("btn1 click...");

//以下选择器选择的是和#one紧相邻的span 若span与#one不相邻，则该选择器无效

//$("#one + span").css("background","#FFFAAA");

$("#one").nextAll("span:first").css("background","#FFFAAA");

});

$("#bt7").click(function(){

//alert("btn1 click...");

$("#two").prevAll("div").css("background","#FFFAAA");

});

</script>

</head>

<body>

id 为 one,class 为 one 的div

<div class="mini">class为mini</div>

</div>

id为two,class为one,title为test的div

<div class="mini" title="other">class为mini,title为other</div>

<div class="mini" title="test">class为mini,title为test</div>

</div>

<div class="mini">class为mini</div>

</div>

<div class="mini">class为mini</div>

<div class="mini" title="tesst">class为mini,title为tesst</div>

</div>

<div style="display:none;" class="none">style的display为"none"的div</div>

<div class="hide">class为"hide"的div</div>

<div>

包含input的type为"hidden"的div<input type="hidden" size="8">

</div>

<span id="span">^^span元素^^</span>

<span id="span">--span元素--</span>

</body>

</html>

3.4基本过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头

按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

基本过滤选择器:

练习：

改变第一个 div 元素的背景色为 # bbffaa

改变最后一个 div 元素的背景色为 # bbffaa

改变class不为 one 的所有 div 元素的背景色为 # bbffaa

改变索引值为偶数的 div 元素的背景色为 # bbffaa

改变索引值为奇数的 div 元素的背景色为 # bbffaa

改变索引值为大于 3 的 div 元素的背景色为 # bbffaa

改变索引值为等于 3 的 div 元素的背景色为 # bbffaa

改变索引值为小于 3 的 div 元素的背景色为 # bbffaa

改变所有的标题元素的背景色为 # bbffaa

改变当前正在执行动画的所有元素的背景色为 # bbffaa

示例代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

div, span, p {

width: 140px;

height: 140px;

margin: 5px;

background: #aaa;

border: #000 1px solid;

float: left;

font-size: 17px;

font-family: Verdana;

}

div.mini {

width: 55px;

height: 55px;

background-color: #aaa;

font-size: 12px;

}

div.hide {

display: none;

}

</style>

$(document).ready(function(){

function anmateIt(){

$("#mover").slideToggle("slow", anmateIt);

}

anmateIt();

$("#btn1").click(function(){

$("div:first").css("background","#FFFAAA");

});

$("#btn2").click(function(){

//alert("btn1 click...");

$("div:last").css("background","#FFFAAA");

});

$("#btn3").click(function(){

//alert("btn1 click...");

$("div:not(.one)").css("background","#FFFAAA");

});

$("#btn4").click(function(){

$("div:even").css("background","#FFFAAA");

});

$("#btn5").click(function(){

//alert("btn1 click...");

$("div:odd").css("background","#FFFAAA");

});

$("#btn6").click(function(){

//alert("btn1 click...");

$("div:gt(3)").css("background","#FFFAAA");

});

$("#btn7").click(function(){

$("div:eq(3)").css("background","#FFFAAA");

});

$("#btn8").click(function(){

//alert("btn1 click...");

$("div:lt(3)").css("background","#FFFAAA");

});

$("#btn9").click(function(){

//alert("btn1 click...");

$(":header").css("background","#FFFAAA");

});

$("#btn10").click(function(){

$(":animated").css("background","#FFFAAA");

});

$("#btn11").click(function(){

//alert("btn1 click...");

$("#two").nextAll("span:first").css("background","#FFFAAA");

});

</script>

</head>

<body>

<h3>基本选择器.</h3>

id 为 one,class 为 one 的div

<div class="mini">class为mini</div>

</div>

id为two,class为one,title为test的div

<div class="mini" title="other">class为mini,title为other</div>

<div class="mini" title="test">class为mini,title为test</div>

</div>

<div class="mini">class为mini</div>

</div>

<div class="mini">class为mini</div>

<div class="mini" title="tesst">class为mini,title为tesst</div>

</div>

<div style="display:none;" class="none">style的display为"none"的div</div>

<div class="hide">class为"hide"的div</div>

<div>

包含input的type为"hidden"的div<input type="hidden" size="8">

</div>

<span id="span">^^span元素 111^^</span>

<span id="span">^^span元素 222^^</span>

<div id="mover">正在执行动画的div元素.</div>

</body>

</html>

3.5.内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

练习：

改变含有文本 ‘di’ 的 div 元素的背景色为 # bbffaa

改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa

改变含有 class 为 mini 元素的 div 元素的背景色为 # bbffaa

改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa

示例代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

div, span, p {

width: 140px;

height: 140px;

margin: 5px;

background: #aaa;

border: #000 1px solid;

float: left;

font-size: 17px;

font-family: Verdana;

}

div.mini {

width: 55px;

height: 55px;

background-color: #aaa;

font-size: 12px;

}

div.hide {

display: none;

}

</style>

$(document).ready(function(){

$("#btn1").click(function(){

$("div:contains('di')").css("background","#FFFAAA");

});

$("#btn2").click(function(){

//alert("btn1 click...");

$("div:empty").css("background","#FFFAAA");

});

$("#btn3").click(function(){

//alert("btn1 click...");

$("div:has(.mini))").css("background","#FFFAAA");

});

$("#btn4").click(function(){

$("div:not(:empty)").css("background","#FFFAAA");

});

</script>

</head>

<body>

id 为 one,class 为 one 的div

<div class="mini">class为mini</div>

</div>

id为two,class为one,title为test的div

<div class="mini" title="other">class为mini,title为other</div>

<div class="mini" title="test">class为mini,title为test</div>

</div>

<div class="mini">class为mini</div>

</div>

<div class="mini">class为mini</div>

<div class="mini" title="tesst">class为mini,title为tesst</div>

</div>

<div style="display:none;" class="none">style的display为"none"的div</div>

<div class="hide">class为"hide"的div</div>

<div>

包含input的type为"hidden"的div<input type="hidden" size="8">

</div>

<div id="mover">正在执行动画的div元素.</div>

</body>

</html>

3.6.可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden 之类的元素

练习:

改变所有可见的div元素的背景色为 # bbffaa

选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 # bbffaa

选取所有的文本隐藏域, 并打印它们的值

示例代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

div, span, p {

width: 140px;

height: 140px;

margin: 5px;

background: #aaa;

border: #000 1px solid;

float: left;

font-size: 17px;

font-family: Verdana;

}

div.mini {

width: 55px;

height: 55px;

background-color: #aaa;

font-size: 12px;

}

div.hide {

display: none;

}

</style>

$(document).ready(function(){

$("#btn1").click(function(){

$("div:visible").css("background","#FFFAAA");

});

$("#btn2").click(function(){

//alert($("div:hidden").length);

//show(time):可以使不可见的元素变成可见时间单位为毫秒

//jQuery的很多方法都支持连缀

$("div:hidden").show(2000).css("background","#FFFAAA");

});

$("#btn3").click(function(){

//val方法可获取某个表单元素的属性值

alert($("input:hidden").val());

});

</script>

</head>

<body>

id 为 one,class 为 one 的div

<div class="mini">class为mini</div>

</div>

id为two,class为one,title为test的div

<div class="mini" title="other">class为mini,title为other</div>

<div class="mini" title="test">class为mini,title为test</div>

</div>

<div class="mini">class为mini</div>

</div>

<div class="mini">class为mini</div>

<div class="mini" title="tesst">class为mini,title为tesst</div>

</div>

<div style="display:none;" class="none">style的display为"none"的div</div>

<div class="hide">class为"hide"的div</div>

<div>

包含input的type为"hidden"的div

</div>

<div id="mover">正在执行动画的div元素.</div>

</body>

</html>

3.7属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

练习:选取下列元素,改变其背景色为 # bbffaa

含有属性title 的div元素.

属性title值等于"test"的div元素.

属性title值不等于"test"的div元素(没有属性title的也将被选中).

属性title值以"te"开始的div元素.

属性title值以"est"结束的div元素.

属性title值含有"es"的div元素.

选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素.

示例代码:

(以下代码只写出javascript部分)

$(function(){

$("#btn1").click(function(){

$("div[title]").css("background", "#ffbbaa");

});

$("#btn2").click(function(){

$("div[title='test']").css("background", "#ffbbaa");

});

$("#btn3").click(function(){

//选取的元素中包含没有 title 的 div 元素.

$("div[title!='test']").css("background", "#ffbbaa");

});

$("#btn4").click(function(){

$("div[title^='te']").css("background", "#ffbbaa");

});

$("#btn5").click(function(){

$("div[title$='est']").css("background", "#ffbbaa");

});

$("#btn6").click(function(){

$("div[title*='es']").css("background", "#ffbbaa");

});

$("#btn7").click(function(){

$("div[id][title*='es']").css("background", "#ffbbaa");

});

$("#btn8").click(function(){

$("div[title][title!='test']").css("background", "#ffbbaa");

});

</script>

3.8子元素过滤选择器

nth-child() 选择器详解如下：

(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素

(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素

(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

练习:

选取下列元素,改变其背景色为 # bbffaa

每个class为one的div父元素下的第2个子元素.

每个class为one的div父元素下的第一个子元素

每个class为one的div父元素下的最后一个子元素

如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素

示例代码:

(以下代码仅包含js部分)

$(document).ready(function(){

$("#btn1").click(function(){

//选取子元素, 需要在选择器前添加一个空格.

$("div.one :nth-child(2)").css("background", "#ffbbaa");

});

$("#btn2").click(function(){

$("div.one :first-child").css("background", "#ffbbaa");

});

$("#btn3").click(function(){

$("div.one :last-child").css("background", "#ffbbaa");

});

$("#btn4").click(function(){

$("div.one :only-child").css("background", "#ffbbaa");

});

</script>

3.9.表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

练习：

利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值

利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值

利用 jQuery 对象的 length 属性获取多选框选中的个数

利用 jQuery 对象的 text() 方法获取下拉框选中的内容

示例代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

$(function(){

$("#btn1").click(function(){

//使所有的可用的单行文本框的 value 值变为chance

alert($(":text:enabled").val());

$(":text:enabled").val("chance");

});

$("#btn2").click(function(){

$(":text:disabled").val("www.csdn.net");

});

$("#btn3").click(function(){

var num = $(":checkbox[name='newsletter']:checked").length;

alert(num);

});

$("#btn5").click(function(){

//实际被选择的不是 select, 而是 select 的 option 子节点

//所以要加一个空格.

//var len = $("select :selected").length

//alert(len);

//因为 $("select :selected") 选择的是一个数组

//当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了.

//alert($("select :selected").val());

//jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在

//得到的 DOM 对象, 而不是一个 jQuery 对象

$("select :selected").each(function(){

alert(this.value);

});

$("#btn4").click(function(){

$(":checkbox[name='newsletter']:checked").each(function(){

alert(this.value);

});

})

</script>

</head>

<body>

<h3>表单对象属性过滤选择器</h3>

<button id="btn1">对表单内可用input 赋值操作.</button>

<button id="btn2">对表单内不可用input 赋值操作.</button><br /><br />

<button id="btn3">获取多选框选中的个数.</button>

<button id="btn4">获取多选框选中的内容.</button><br /><br />

<button id="btn5">获取下拉框选中的内容.</button><br /><br />

可用元素: <input name="add" value="可用文本框1"/><br>

不可用元素: <input name="email" disabled="true" value="不可用文本框"/><br>

可用元素: <input name="che" value="可用文本框2"/><br>

不可用元素: <input name="name" disabled="true" value="不可用文本框"/><br><br>

多选框: <br>

<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1

<input type="checkbox" name="newsletter" value="test2" />test2

<input type="checkbox" name="newsletter" value="test3" />test3

<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4

<input type="checkbox" name="newsletter" value="test5" />test5

下拉列表1: <br>

</select>

下拉列表2: <br>

</select>

</form>

</body>

</html>

3.10.表单选择器

4.总结

1.jQuery是JavaScript的一个函数库，非常方便，非常主流

2.利用jQuery开发步骤:

1).导入jQuery库

2).在$(function(){})的{}中编写jQuery代码

$(function(){

$("#btn1").click(function(){

alert("helloworld");

});

</script>

3.jQuery对象 VS DOM对象

1).jQuery对象不能使用DOM对象的属性和方法，反之，DOM对象也不能使用jQuery对象的属性和方法

2).jQuery对象是一个DOM数组对象，所以可以使用下标的方式转为DOM对象

var $btn = $("button");

var btn = $btn[0];

3).jQuery对象是使用$()保证DOM对象产生的对象

$("select:seected").each(function(){

alert($(this),val);

});

4.jQuery的选择器

1).选取被选中的Select的option

5.jQuery对象的几个方法

1).val():获取或设置表单元素的value属性值

//设置值

$(":text:enabled").val("chance");

//获取值

alert($(":text:enabled").val());

2).attr():和val()方法类似

attr(name,val);为name属性赋值为val

attr(name);获取name属性值

3).each():对jQuery对象进行遍历其参数为function，函数内部的this是正在遍历的DOM对象

$(select:selected).each(fuhnction(){

alert(this.value);

});

4).text();和val()方法类似

text():获取元素节点的文本子节点的值

text(str):设置元素节点的文本子节点的值。

chance2015

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
jQuery入门及各种选择器讲解

jQuery入门及各种选择器讲解1.jQuery简介(write less do more)jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库jQuery 理念: 写得少, 做得多. 优势如下:轻量级强大的选择器出色的 DOM 操作的封装可靠的事件处理机制完善的 Ajax出色的浏览器兼容性链式操作方式……第一个jQue
复制链接

扫一扫

专栏目录