1、基本选择器
①id选择器:# ②class选择器:. ③标签名选择:标签名
④并列选择:用,隔开 ⑤后代选择:用空格隔开
<title></title>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<a>aaaaa</a> <%--a标记--%>
</div>
<div id="div2"></div>
<div class="div"></div>
<div></div>
</form>
</body>
</html>
<%-- $ JQuery标志性符--%>
<script type="text/javascript" >
$("#div1").css("background-color", "red"); //id选择,$("#div1")相当于js中docunment.getElementById("div1"),下面其他类似
$(".div2").css("background-color", "red"); //class选择
$("div").css("background-color", "red"); //标签选择
$("#div1,#div2").css("background-color", "red"); //并列选择,用逗号隔开
$("#div1 a").css("background-color", "red"); //后代选择,用空格隔开
</script>
二、事件
1、常规事件——把js事件前面的on去掉
比如:js:onclick——JQuery:click
2、复合事件
①houver(function(){},functiaon(){})——相当于把mouseover()mouseout()合二为一
②toggle(function(){},function(){},…)——点击事件循环执行,具体看下面的代码用法展示
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="div">aaa</div>
<div class="div">bbb</div>
<div class="div"><a></a></div>
<div class="div">bbb</div>
<div class="div">aaa</div>
<div class="div"><a></a></div>
</form>
</body>
</html>
<script type="text/javascript" >
//单击事件
$(".div").click(function () {
alert('aaa');
});
//双击事件
$(".div").dblclick(function () {
alert('aaa');
});
//复合事件hover——相当于把mouseover()mouseout()合二为一
$(".div").hover(function () {
$(this).css("background-color","red");
}, function () {
$(this).css("background-color", "blue");
});
//复合事件toggle——点击事件循环执行,下面代码中即点击div,循环为div更换背景色
$(".div").toggle(function () {
$(this).css("background-color", "red");
}, function () {
$(this).css("background-color", "yellow");
}, function () {
$(this).css("background-color", "blue");
}, function () {
$(this).css("background-color", "green");
}, function () {
$(this).css("background-color", "orange");
});
</script>
//常规和复合事件
三、DOM操作
1、操作内容
①表单元素:取值:var s=$(“选择器”).val()
赋值:$(“选择器”).val(“值”)
②非标单元素:取值: var s =$(“选择器”).text(“内容”)
var s = $(“选择器”).html(“内容”);
赋值:$(“选择器”).text(“内容”)
$(“选择器”).html(“内容”);
<script type ="text/javascript" >
//$(document).ready相当于js中的window.onload
$(document).ready(function () {
$("#a").click(function () {
$(this).text("bbbb");//改变a标记的显示内容
})
$("#btn1").click(function () {
$("#txt").val("aaaaaa");//改变文本框的显示内容
$(this).val("bbbb");//改变按钮的显示内容
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<%--操作内容 start--%>
<a id="a">aaaaa</a>
<input type ="text" id="txt" />
<input type ="button" id="btn1" value ="btn1" />
<%--操作内容 end--%>
</form>
</body>
2、操作属性
①获取属性:var s=$(“选择器”).attr(“属性名”)
②设置属性:$(“选择器”).attr(“属性名”,”属性值”)
③更改属性:$(“选择器”).attr(“属性名”,”属性值”)
④删除属性:$(“选择器”).removeAttr(“属性名”)
通用属性操作
1. attr(): 获取/设置元素的属性
attr("属性名");//获取的是属性值
attr("属性名","属性值");//如果该属性名存储,修改其属性值.
//如果该属性值不存在,这添加该属性名和属性值
2. removeAttr():删除属性 // 根据属性名称,删除属性名和属性值
3. prop():获取/设置元素的属性
4. removeProp():删除属性
* attr和prop区别?
1. 如果操作的是元素的固有属性,则建议使用prop
checked
selected 必须使用prop
2. 如果操作的是元素自定义的属性,则建议使用attr
<style type="text/css" >
.aaa {
border :5px solid red;
}
.bbb {
border :10px solid blue;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<%--操作属性 start--%>
<input type ="text" id="txt1" />
<input type ="button" id="btn1" value ="btn1" />
<input type ="button" id="btn2" value ="btn2" />
<input type ="button" id="btn3" value ="btn3" />
<%--操作属性 end--%>
</form>
</body>
</html>
<script type ="text/javascript" >
$("#btn1").click(function () {
$("#txt1").attr("disabled", "disabled");//点击btn1按钮,给文本框设置不可用属性和class
$("#txt1").attr("class", "aaa");
});
$("#btn2").click(function () {
$("#txt1").removeAttr("disabled").attr("class","bbb");//点击btn2按钮,删除文本框不可用属性,并且更改class属性
});
$("#btn3").click(function () {
var aa = $("#txt1").attr("class");//点击btn3按钮,获取文本框的class属性,然后alert弹出看看
alert(aa);
});
</script>
3、操作样式(一般用操作属性就可以)
①操作内联样式:获取样式:var s=$(“选择器”).css(“样式名”)
设置样式:$(“选择器”).css(“样式名”,”值”)
$("#btn1").click(function () {
$("#txt1").css("border", " 5px solid red");});
②操作样式表的class:添加class:$(“选择器”).addClass(“class名”)
移除class:$(“选择器”).removeClass(“class名”)
添加移除交替class:$(“选择器”).toggleClass(“class名”)
4、操作相关元素
①查找:父辈、前辈:parent() parents(“选择器”)
子代、后代:children(“选择器”) find(“选择器”)
兄弟:哥哥:prev() prevAll(“选择器”)
弟弟:next() next All(“选择器”)
<script src="js/jquery-1.7.2.min.js"></script>
<style type="text/css" >
#div1 {
width :400px;
height :400px;
background-color :red;
}
#div2 {
width :300px;
height :300px;
background-color :yellow;
}
#div3 {
width :200px;
height :200px;
background-color :blue;
}
#div4 {
width :100px;
height :100px;
background-color :green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4"></div>
</div>
</div>
</div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
</form>
</body>
</html>
<script type="text/javascript" >
$("#div4").click(function () {
var p = $(this).parent();//查找div4的父级
var p = $(this).parent().parent();//查找div4的父级的父级
var p = $(this).parents("#div2");//若知道前辈的id或name,可以用parents("选择器")
});
$("#div1").click(function () {
var p = $(this).children("#div2");//查找div1的子级,children("#div3")是找不出来的,div3是div1子集的子集
var p = $(this).find("#div3");//查找div1的后代div3
});
//div1、div5、div6、div7平级
$("#div1").click(function () {
var p = $(this).next();//查找div1的弟弟,可以next().next()
var p = $(this).nextAll("#div6");//nextAll("选择器"),前提知道需要查找的弟弟的选择器
});
$("#div7").click(function () {
var p = $(this).prev();//查找div1的哥哥,可以prev().prev()
var p = $(this).prevAll("#div6");//prevtAll("选择器"),前提知道需要查找的哥哥的选择器
});
</script>
②操作:新建:$(“html字符串”)
添加:appen(jquery对象或字符串)——某个元素内部添加
after(…)——下部平级添加
before(…)——上部平级添加
移除:empty()——清空内部全部元素
remove()——清空元素
复制:clone()