jQuery中的一些方法和属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table tr td{
border:1px solid;
height: 10px;
width:30%;
background-color: skyblue;
text-align: center;
}
div{
background-color: skyblue;
}
#box1{
background-color: antiquewhite;
width: 200px;
height: 100px;
}
</style>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//以加载就会运行
$(document).ready(function(){
//jQuery选择器
// alert("hello");
//jQuery对象转DOM对象
var $tr1 = $("#tr1");//jQuery对象
var tr1 = $tr1[0];//普通DOM对象
console.log($tr1);
console.log(tr1);
//DOM对象转jQuery对象
var tr2=document.getElementById("tr1");
var tr = $("tr2");
console.log(tr.length);
var $next_tr = $("#tr1+tr");//选择tr1元素的下一个元素
console.log($next_tr.text());
var $tr_first = $("tr:first");//选择tr中的第一个元素
console.log($tr_first.text());
var $tr_next_first = $("#tr1+tr td:first");
console.log($tr_next_first.text());
var $tr_not_tr1 = $("tr:not(#tr1)");
console.log($tr_not_tr1.length);
var $tr_even = $("tr:even");//偶数，这里是从0开始的，0,2
console.log($tr_even.length);// 2
//tr不能设置背景，td才可以
$tr_even.find("td").each(function(){
$(this).css("background-color","antiquewhite")
});
var $tr_eq = $("tr:eq(0)");
console.log($tr_eq.text());
var $td_has_a = $("td:has(a)");
console.log($td_has_a.text());
var $tr1_by_attribute = $("tr[id='tr1'] td[id='td1']");//可以通过id , name ,type的形式获取
console.log($tr1_by_attribute.text());
var $tb1_last_child = $("#tb1 tr:last-child");
console.log($tb1_last_child.text());
var enable_input = $("form input:enabled");
console.log(enable_input.val());
var form_inuts = $("form input");
console.log(form_inuts.length);
console.log($("p").offset());
$("#box1_button").click(function(){
$("#box1").toggle(1000);
});
});
function addTr(){
var new_tr=$("<tr><td>3</td><td>Jerry</td></tr>");
$("#tb1").append(new_tr);//将添加table里面的最后面，而使用after会添加到table外面的后面，就不会接在table的最后一行后面
// $("#tb1").after(new_tr);
}
function delTr(){
var last_tr = $("tr:last");
// console.log(last_tr.text());
last_tr.remove();
// $("#tb1").empty();//清空，table还在
}
function clo(){
var tr1 = $("#tr1").clone();
$("#tb1").append(tr1);
}
function warpp(){
$("p").warpAll("<div></div>");
}
</script>
</head>
<body>
<table id="tb1">
<tr id="tr1">
<td id="td1">编号</td>
<td>名字</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">Tony</a></td>
</tr>
<tr>
<td>2</td>
<td>Tom</td>
</tr>
</table>
<button onclick="addTr()">添加</button>
<button onclick="delTr()">删除</button>
<button onclick="clo()">克隆</button>
<hr />
<form action="">
<input type="text" name="" id="" value="123" disabled="disabled"/>
<input type="text" name="" id="" value="456" />
</form>
<p>p1</p>
<p>p2</p>
<button onclick="warpp()">warp</button>
<hr />
<div id="box1">
</div>
<button id="box1_button"> Toggle</button>
</body>
</html>
