您的位置：首页 > 编程语言 > Python开发

Python-day17

2017-12-04 15:54 120 查看

jQuery

$("#1")
[div#1, context: document, selector: "#1"]
$("#1")[0]
<div id="i1">aaaaaaa</div>

注：[0]索引等于是把jquery对象转换成dom对象

d = document.getElementById("1")
<div id="1">123</div>
$(d)
[div#1, context: div#1]

注：$(d)将dom对象转换成jQuery对象

选择器：

1.id $(‘#xx’)

2.class $(‘.xx’)

3.标签 $(‘a’) 寻找所有的a标签

4.同时寻找a标签以及class c1 $(‘a,.c1’)，也叫组合选择器

<div id="i10" class="c1">
<div>
<a>3</a>
</div>
<a>1</a>
<a>2</a>
<a>44</a>
</div>

$('#i10 a')
(3) [a, a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a"]

$('#i10>a')
(3) [a, a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10>a"]
$('#i10>a:first') # 输出第一个儿子，也就是1，last则是最后一个儿子

注：寻找c1样式表对应div标签下的所有a标签（子子孙孙），>号就是只找儿子，不找孙子44

$('#i10 a:eq(0)')
[a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:eq(0)"]0: acontext: documentlength: 1prevObject: [document, context: document]selector: "#i10 a:eq(0)"__proto__: Object(0)
$('#i10 a:eq(1)')
[a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:eq(1)"]

注：eq循环，加入索引取对应的值，也就是第一个匹配元素以及第二个匹配元素

$("#i10>a")
[a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10>a"]

注：只找儿子，不继续往下找

$("#i10>a:last")
$("#i10>a:first")
$("#i10>a:eq(0)")

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i10" class="c1">
<div>
<a>3</a>
</div>
<a>1</a>
<a>2</a>
<a>44</a>
<a alex="123">alex</a>
</div>
<script src="jquery-1.12.4.js">
</script>
</body>
</html>

$('[alex]')
[a, prevObject: jQuery.fn.init(1), context: document, selector: "[alex]"]

注：根据属性查找标签，如果是 ‘[alex=123]’ 那么只输出具有alex属性并且值是123的标签

<input type="text" disabled>
$(':disabled') # 寻找属性为disabled的input输入框

注：disabled的意思是不可编辑

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkALL()">
<input type="button" value="反选" onclick="reverseALL()">
<input type="button" value="取消" onclick="cancelALL()">
<table border="1">
<!--表头-->
<thead>
<!--tr行-->
<tr>
<!--th列-->
<th>选项</th>
<th>IP</th>
<th>port</th>
</tr>
</thead>
<!--表内容-->
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkALL() {
$("#tb :checkbox").prop('checked', true);
}

function cancelALL() {
$("#tb :checkbox").prop('checked', false);
}

function reverseALL() {
$("#tb :checkbox").each(function () {
//          if($(this).prop('checked')){
//              $(this).prop('checked',false)
//          }
//          else{
//              $(this).prop('checked',true)
//          }
//            使用三元运算实现
var v = $(this).prop('checked') ? false : true;
$(this).prop('checked', v)
})
}
</script>
</body>
</html>

注：prop的作用是获取在匹配的元素集中的第一个元素的属性值；在这也就是设置全部元素（输入框）的属性，然后按照设置的属性设置成设置的值，each就是自动执行for循环（循环每个匹配到的元素）！

jQuery("#i1").text()
"asfasfsdfasfasfa"
jQuery("#i1").html()
"asfasf<a>sdfasfasfa</a>"
jQuery("#i1").text()
"asfasfsdfasfasfa"
jQuery("#i1").text("123123")
[div#i1, context: document, selector: "#i1"]
jQuery("#i1").text("123123").text()
"123123"

注：DOM不加参数获取文本内容，加参数设置文本内容

jQuery("#i2").val()
"1231231"
jQuery("#i2").val("bvbvvv")
[input#i2, context: document, selector: "#i2"]
jQuery("#i2").val("bvbvvv").val()
"bvbvvv"

注：jquery用法

$('#i1')[0]
<input id="i1" type="button" value="开关">
$('#i1').attr("id")
"i1"
$('#i1').attr("type")
"button"
$('#i1').attr("value")
"开关"
$('#i1').attr("name",'charlie')
[input#i1, context: document, selector: "#i1"]
$('#i1')[0]
<input id="i1" type="button" value="开关" name="charlie">
$('#i1').removeAttr("name")
[input#i1, context: document, selector: "#i1"]
$('#i1')[0]
<input id="i1" type="button" value="开关">
$("#i2").prop("checked",true)
[input#i2, context: document, selector: "#i2"]
$("#i2").prop("checked",false)
[input#i2, context: document, selector: "#i2"]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery dom

相关文章推荐

新的分享

章节导航