jquery
是javaScript框架,封装了js。
好处:使用方便,少代码多功能。
实现同一个功能的代码量少。
屏蔽浏览器差异。
简化ajax开发。
选择器
基本选择器
1、 id选择器
$(“#id”);è返回指定id的标签,为jquery对象。
2、 元素选择器
$(“tagName”);è返回指定tagName的标签,为jquery对象。
3、 class选择器
$(“.样式表名”);è返回指定样式类名的标签,并包装成jquery对象返回。
4、 多个选择器公用
交集:$(“selector1selector2selector3……”);è返回所有选择器所能匹配到的标签的交集
并集:$(“selector1,selector2,selector3,……”);è返回所有选择器所能匹配到的标签的并集
注:多个选择器共用时,都是从左到右的解析顺序。
每一个jquery里都是一个数组,这个数组是用来存放他所能匹配到的标签(即封装而来的js对象)。
层级选择器
1、 后代选择器(祖孙选择器)
$(“祖先 子孙”);è获得祖先标签下的所有子孙标签
2、 父子选择器
$(“父亲>孩子”);è获得父亲标签下的孩子标签
3、 紧邻兄弟选择器
$(“selector1+selector2”);è选取selector1兄弟节点中的紧挨着的selector2
4、 非紧邻兄弟选择器
$(“selecotr1~selector2”);è选取selector1下面的所有兄弟节点selector2
下面是代码演示:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div" class="dv">
<input type="text" value="123" id="a" class="b"/>
<input type="button" value="测试id" οnclick="idCheck()"/>
<input type="button" value="测试元素选择器" οnclick="eleCheck()"/>
<input type="button" value="测试类选择器" οnclick="ClassCheck()"/>
<input type="button" value="全选择器" οnclick="ALlCheck()"/>
<input type="button" value="多个选择器公用交集" οnclick="manys()"/>
<input type="button" value="多个选择器公用并集" οnclick="manyss()"/>
<input type="button" value="后代选择器" οnclick="houdai()"/>
<span>brother</span>
<input type="button" value="紧邻兄弟选择器" οnclick="jinlin()"/>
<input type="button" value="非紧邻兄弟选择器" οnclick="feijinlin()"/>
</div>
<p style="display: none" id="sh">Hello</p>
<button id="go"> Run</button>
<div id="block">Wa!</div>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
</body>
<script src="js/jquery.1.9.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
var a = $("#a")
console.log(a);
});
//id选择器
function idCheck(){
var str = $("#a");
alert("jquery对象:"+str.val());
alert("js对象:"+str.get(0).value);
}
//元素选择器
function eleCheck(){
var str = $("input");
alert("jquery对象:"+str.val());
alert("js对象:"+str.get(0).value);
}
//类选择器
function ClassCheck(){
var str = $(".b");
alert("jquery对象:"+str.val());
alert("js对象:"+str.get(0).value);
}
//全选择器
function ALlCheck(){
var str = $("*");
alert(str.html());
}
//多个选择器公用交集
function manys(){
var inputs = $("input#a.b");
alert(inputs.val());
}
//多个选择器公用并集
function manyss(){
var alls = $("body,input");
for(var i=0;i<alls.length;i++){
var temp = alls[i];
alert(temp.id);//获取的是id选择器
}
}
//后代选择器
function houdai(){
var inputs = $("div#a ");
alert(inputs.length);
}
//紧邻兄弟选择器
function jinlin(){
var brother_jinlin = $("span+input");
alert(brother_jinlin.length);
}
//非紧邻兄弟选择器
function feijinlin(){
var feijinlin_brother = $("span~input");
alert(feijinlin_brother.length);
}
$("#sh").show("slow");
$("#go").click(function(){
$("#block").animate({
"90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
//让指定元素左右移动
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
</script>
</html>