Python-day17

最新推荐文章于 2024-05-07 17:04:53 发布

Charlie彬

最新推荐文章于 2024-05-07 17:04:53 发布

阅读量232

点赞数

文章标签： jquery dom

本文链接：https://blog.csdn.net/qq_34001852/article/details/78541626

版权

运维自动化专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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"]

Charlie彬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Python-day17

jQuery$("#1")[div#1, context: document, selector: "#1"]$("#1")[0]d = document.getElementById("1")<div id="1">123</div>$(d)[div#1, context: div#1]注：jquery和dom存在包含与被包含关系$(".c1 a")(2) [a, a, pre
复制链接

扫一扫

专栏目录