- JQuery简介:
- jQuery是一个快速、简洁的JavaScript框架,封装了大量的JS函数。
- 学习链接:w3schoolJQuery教程
- 中文API:JQuery中文API
- 在使用前必须先导入JQuery库,可以在jquery官网下载jquery库下载链接,选择版本,到现在最最新版是3.2.1。
教程:
1、把下载好的jquery库放到项目中,新建一个js文件夹,放在里面
2、在要用的页面导入
我们点进去看下
看得出来,这里面全是写的一些js代码,对js代码进行了封装。
- 选择器
- #id:
- 根据给定的ID匹配一个元素。
- 语法:
- $(“#id名”)
- 例子:
- #id:
//代码
function testA()
{
var div=$("#div1");
//通过$("#div1")就得到了id为"div1"的对象
alert(div.text());
//再用div.text()就可以得到div里面的文本内容
}
//body里面的代码
<div id="div1">第一个盒子</div>
- element:(在这里顺便说下两种循环遍历)
- 根据给定的元素标签名匹配所有元素。
- 例子:
var a=$("input");
//这样就得到了页面中的所有input标签对象,并赋给了a,返回的是一个数组,可以用each()函数遍历
//第一种each遍历:
function testB()
{
a.each(function(){
alert($(this).val());
//this是遍历到某一个input元素时的对象,在调用val()就得到了里面的值。
});
}
//第二种each遍历:
function testC()
{
var input=$("input");
$.each(input,function(i,d){
//这是用$调用的each函数.第一个参数是要遍历的对象数组,第二个是一个回调函数,"i"表示遍历对象数组的下标(从0开始的),"d"表示遍历到某一个input元素时的对象
alert("第"+i+"个元素的值为:"+$(d).val());
if(i==3){
$(d).val("傻逼");
//当i==3时改变input里面的值
}
});
}
//body里面的代码
<form action="">
<input type="text" name="username" id="div2"/>
<input type="password" name="pwd"/>
<input type="text" name="email"/>
<fieldset>
<span>十点半</span>
<input type="text" value="恩恩"/>
</fieldset>
</form>
- .class:
- 根据给定的css类名匹配元素。
- 例子:
$(".myClass");
//这样就找到了所有“class="myClass"”的元素
- selector1,selector2,selectorN
- 将每一个选择器匹配到的元素合并后一起返回。
- 你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
- 例子:
$("div,span,p.myClass")
//这样就找到了所有的div标签,span标签,class="myClass"的p标签
- ancestor descendant
- 在给定的祖先元素下匹配所有的后代元素( 中间用空格隔开的)
- 用以匹配元素的选择器,并且它是第一个选择器的后代元素
- 例子:
$("form input");
//这样就找到了所有form里面的input标签.注意只能找到form标签里面包含的,form外面的input标签是得不到的。
<input name="none000" />//input1
<form>
<input name="name" />//input2
<input name="name1" />//input3
</form>
//这里的话只能找到input2和input3,找不到input1,想要得到所有的input的话可以用$("input");
- parent > child:
- 在给定的父元素下匹配所有的子元素。
- 用以匹配元素的选择器,并且它是第一个选择器的子元素。
- 例子:
$("form>input")
//这里就得到了form标签里面的所有子input标签,注意是子元素,就是说只能有一层包含关系,不能是孙子关系。
<form action="">
<input type="text" name="username" />//input1
<input type="password" name="pwd"/>//input2
<fieldset>
<input type="text" value="恩恩"/>//input3
</fieldset>
</form>
//这里只能得到input1和input2,得不到input3,因为input3不是和form直接包含,不是form的子元素。
- prev + next
- 匹配所有紧接在 prev 元素后的 next 元素。
- 一个有效选择器并且紧接着第一个选择器。
- 例子:
$("label+input");
//这里就得到了所有紧跟在label标签后面的input标签元素,注意只得到了input,没有label
<form>
<label>Name:</label>
<input name="name" />//input1
<input name="name1" />//input2
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />//input3
</fieldset>
</form>
//这里得到了input1和input3,并没有得到input2,input2并没有紧跟着label标签。
- prev ~ siblings
- 匹配 prev 元素之后的所有 siblings 元素
- 一个选择器,并且它作为第一个选择器的同辈
- 例子:
$("form~input")
//这里得到了form标签后面与form标签同级的input标签。
<input name="none000" />//input1
<form>
<input name="name" />//input2
</form>
<input name="none" />//input3
//这里只得到了input3,input1在form标签前面,input2在form标签里面都不是是同级关系,所以只能得到input3.
总结:
- 以“,”隔开的选择器:匹配逗号隔开的所有选择器。
- 以空格隔开的选择器:在给定的祖先元素下匹配所有的后代元素。
- 以“>”符号连接的选择器:在给定的祖先元素下匹配儿子元素。
- 以“+”连接的选择器:匹配所有紧接在给定元素后的下一个元素。
- 以“~”连接的选择器:匹配给定元素后面的兄弟元素。
还有很简单选择器,就不一一列举了 大家可以查相应的API:
1、jquery选择器1
2、jquery选择器2