JQuery对象与DOM对象的区别
JQuery对象和DOM的属性方法不互通
基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<script src="JQuery.js"></script>
<script>
function fun1(){
$("#one").css("background-color","red");
}
function fun2(){
$(".two").css("background-color","green")
}
function fun3(){
$("div").css("background-color","#bfa")
}
function fun4(){
$("*").css("background-color","yellow")
}
function fun5(){
$("#one,span").css("background-color","green")
}
</script>
<div id="one" class="two"></div><br>
<div class="two"></div><br>
<div></div>
<span>span</span>
<br>
<input type="button" value="选择id为one的元素" onclick="fun1()">
<input type="button" value="选择class为two的元素" onclick="fun2()">
<input type="button" value="选择所有div元素" onclick="fun3()">
<input type="button" value="选择所有元素" onclick="fun4()">
<input type="button" value="选择id为one与所有span元素" onclick="fun5()">
</body>
</html>
层级选择器
Input标签选择器
$(":input标签属性")
Text
Checkbox
Button
submit等
过滤器
基本过滤器:
$("选择器:first")//第一个
$("选择器:last")/最后一个
$("选择器:eq(下标)")下标等于该下标的dom对象
$("选择器:lt(下标)")小于该下标的
$("选择器:gt(下标)")大于该下标的
-------------------------------------------------------
基本属性选择器:
$("选择器[属性名]")
留下满足定位条件并且在声明时为指定属性进行手动赋值的DOM对象
$("选择器[属性名="属性值"]")
留下满足定位条件并且指定属性内容等于属性值的DOM对象
$("选择器[属性名^='值']")
留下满足定位条件并且指定属性内容是以值为开始的
$("选择器[属性名$='值']")
留下满足定位条件并且指定属性内容是以值为结尾
$("选择器[属性名*='值']")
留下满足定位条件并且指定属性内容是包含值的
工作状态选择器:
$("选择器":enabled)
$("选择器":disabled)
$("选择器":checked)
$("选择器":selected)
html标签属性分类
常用函数(prop函数)
4.text函数:innerText
$obj.text("123"):为jquery对象的所有DOM对象的innerText统一赋值[123]
$obj.text():为jquery对象的所有DOM对象的innerText拼接成一个字符串返回
each函数(省去遍历调用同一个函数
show() hide()
show display:block
hide: display:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #bfa;
color: red;
}
</style>
</head>
<body>
<script src="JQuery.js"></script>
<script>
function fun1(){
$("div").show(1000);
}
function fun2(){
$("div").hide(1000)
}
</script>
<div>我是一个div</div>
<input type="button" value="隐藏div" onclick="fun2()">
<input type="button" value="展示div" onclick="fun1()">
</body>
</html>
remove() empty()
remove()//把当前标签及其子标签删除
empty()//把当前标签的子标签删除
绑定事件的方式
2.通过bind绑定(这种方式可以解绑)
Jquery对象.bind("事件名",方法)
事件名 click,change等
Jquery对象.unbind("事件名")//解除该事件绑定
Jquery对象.unbind()//解除该jquery对象的所有事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="JQuery.js"></script>
<script>
/*
$(":button").click(fun1);
*/
function fun() {
$(":button:lt(3)").bind("click",fun1);
}
function fun1() {
alert($(this).val());
}
function fun2() {
$(":button:gt(0)").unbind("click");
}
</script>
<input type="button" value="我是大哥">
<input type="button" value="我是二哥">
<input type="button" value="我是三哥">
<input type="button" value="为前三个绑定" onclick="fun()">
<input type="button" value="为后两个解除绑定" onclick="fun2()">
</body>
</html>
拼接table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="/JQuery/JQuery.js"></script>
<script>
var data = {
"total": 4,
"emps": [
{ "eno": 7763, "ename": "SMITH", "Salary": 800.0 },
{ "eno": 7760, "ename": "LISI", "Salary": 1800.0 },
{ "eno": 7743, "ename": "ZHANGSAN", "Salary": 1800.0 }
]
}
window.onload = function () {
document.getElementById("displaybut").onclick = function () {
var emps = data.emps;
var html = "";
html += "<tr><th>员工部门</th><th>员工名称</th><th>员工薪资</th></tr>";
for (var i = 0; i < emps.length; i++) {
var temp = emps[i];
html += "<tr>" + "<td>" + temp.eno + "</td>";
html += "<td>" + temp.ename + "</td>";
html += "<td>" + temp.Salary + "</td>";
}
document.getElementById("table").innerHTML = html;
}
}
</script>
<input type="button" value="展示table" id="displaybut">
<table border="1px" width="50%" id="table">
</table>
</body>
</html>