一、jQuery的引入
1、什么是jQuery?
jQuery是一个轻量级的JavaScript库。
2、jQuery的优点
(1)拥有CSS1-CSS3所有的选择器;
(2)简化了dom操作;
(3)优化了事件机制。
3、jQuery的引入
<script src="URL"></script>
其中,URL地址为jQuery库的地址。
二、jQuery选择器
1、基本选择器
基本选择器:#id,element,class,*
(1)id选择器:
<div id="mydiv1">id1</div>
<div id="mydiv2">id2</div>
<script src=" "></script>
<script>
$("#mydiv1");
</script>
结果:
<div id="mydiv1">id1</div>
(2)element选择器:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
<script src=" "></script>
<script>
$("div");
</script>
结果:
<div>DIV1</div>,<div>DIV2</div>
(3)class选择器:
<div class="mydiv1">id1</div>
<div class="mydiv2">id2</div>
<script src=" "></script>
<script>
$(".mydiv1");
</script>
结果:
<div class="mydiv1">id1</div>
(4)*选择器
<div>div</div>
<span>span</span>
<p>p</p>
<script src=" "></script>
<script>
$("*");
</script>
结果:
<div>div</div>,<span>span</span>,<p>p</p>
(5)多个选择器:中间用,隔开
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn" id="anniu1">按钮</button>
<button class="btn" id="anniu2">按钮</button>
<script src=" "></script>
<script>
$("#anniu1,#anniu2");
</script>
2、parent child
匹配父元素下的所有子元素。
<ul class="menu">
<li>1</li>
<li class="child">2
<ul>
<li>21</li>
<li>22</li>
<li>你好</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
<div></div>
<div>
</div>
<div>123</div>
<script src=" "></script>
<script>
$("ul li");//ul下所有的li,共7个li
$("ul.menu>li");//menu的子集li,共4个li
$("ul.menu>li:nth-child(1)+li");//menu的子集li中第一个li标签之后紧跟的li
$("ul.menu>li:nth-child(1)~li");//menu的子集li中第一个li标签之后所有的子集li,共3个
$("ul.menu>li:first");//menu的子集li中第一个li
$("ul.menu>li:first-child");//menu的子集li中第一个li
$("ul li:contains(2)");//匹配ul下所有li标签中包含2 的元素。
$("ul.menu:has(.child)");//匹配含有.child选择器的元素,即ul.menu
$("div:parent");//匹配的元素必须有子元素或者内容,这里是2个,因为第一个div没有内容
</script>
3、按照索引值来匹配元素
<ul class="menu">
<li>1</li>
<li class="child">2
<ul>
<li>21</li>
<li>22</li>
<li>你好</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
<script src=" "></script>
<script>
$("ul.menu>li:even")//索引为偶数的li
$("ul.menu>li:odd")//索引为奇数的li
$(".menu>li:eq(3)")//根据索引匹配,参数为索引值。
$(".menu>li:lt(2)")//匹配所有小于给定索引值的元素,参数为索引值
$(".menu>li:gt(2)")//匹配所有大于给定索引值的元素,参数为索引值
</script>
4、header :匹配h1, h2之类的标题元素
<ul class="menu">
<li>1</li>
<li class="child">2
<ul>
<li>21</li>
<li>22</li>
<li>你好</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
<h1>1111</h1>
<h2>1111</h2>
<h3>1111</h3>
<h4>1111</h4>
<script src=" "></script>
<script>
$("body :header");
</script>
5、focus:匹配获得焦点的元素
$(" ").focus(); //默认获得焦点
$("body :focus");
6、root:选择文档的根元素。
$(":root"); //html
7、hidden和visible
hidden:匹配所有不可见元素,或者type为hidden的元素;
visible:匹配所有可见元素。
三、jQuery属性
1、attr属性;
attr属性:设置或者返回被选元素的属性值。
<input type="text" id="ipt" value="123"/>
<script>
console.log($("#ipt").attr("value"));//123
$("#ipt").attr("value","456"); //设置值
$("#ipt").attr("value",function(index,val){
console.log((index, val));
return val * val ;
});
console.log($("#info").attr("value"));
$("#info").removeAttr ("value");
</script>
2、removeAttr属性;
removeAttr属性:从匹配的元素中删除一个属性。
<input type="text" id="info" value="1" class="ipt1"/>
<script>
console.log($("#info").attr("value"));
$("#info").removeAttr ("value");
</script>
3、prop属性;
prop属性:获取在匹配的元素集中的第一个元素的属性值。
<input type="text" id="info" value="1" class="ipt1"/>
<script>
console.log($(".ipt1").prop("value")); //1
$(".ipt1").prop("value","abc");
$(".ipt1").prop("value",function (index,val){
console.log(index,val);
return val+"m";
});
</script>
4、removeProp属性;
removeProp属性:删除由.prop()方法设置的属性。
<input type="text" id="info" value="1" class="ipt1"/>
<script>
console.log($(".ipt1").prop("value")); //1
$(".ipt1").prop("value","abc");
$(".ipt1").prop("value",function (index,val){
console.log(index,val);
return val+"m";
});
$(".ipt1").removeProp("value");
console.log($(".ipt1").prop("value"));//undefined
</script>
5、addClass属性;
addClass属性:匹配的元素添加指定的类名。多个类名时,中间用空格隔开。
<div class="block"> </div>
$(".block").addClass("box ");
$(".block").addClass("box text");
$(".block").addClass(function (index,elec){
return "data";
6、removeClasss属性;
removeClasss属性:从匹配的元素中删除类,删除多个类名时用空格隔开
$(".block").removeClass("data");
//或者:
$(".block").removeClass(function (index,elec){
return "data";
});
//删除匹配元素的所有类
$(" ").removeClass();
7、toggleClass属性;
toggleClass属性:当添加的类已经存在时则删除,不存在时则添加。
$(".block").toggleClass("div1");
$(".block").toggleClass(function (index,elec){
return "div1";
},false);
8、html属性;
html属性:获取或者设置元素的内容值。
<div class="content"></div>
<script>
$(".content").html("<span>123</span>");
$(".content").html(function (index,val){
return "不知道"
});
</script>
9、text属性;
text属性:获取或者设置元素的文本值
<div class="content"></div>
<script>
$(".content").text("<span>123</span>");
$(".content").text(function (index,val){
return "text"
});
</script>
10、val属性;
val属性:获取匹配元素的当前值。
获取文本框的值:$("input").val();
设置值:$("input").val("设置的值");
回调函数设置:
$(" input").val(function (index,val){
return "值";
});