jQuery入门笔记

最新推荐文章于 2021-08-31 08:58:27 发布

余木尘

最新推荐文章于 2021-08-31 08:58:27 发布

阅读量96

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45583017/article/details/100376428

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

DOM对象与jQuery对象的相互转换

基本语法

DOM对象转Query对象：jQuery（DOM对象）
Query对象转DOM对象：jQuery对象[index]

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.0.js"></script>
    <script>
        var DOMobj = document.getElementById("id")  //DOM对象
        var jQueryobj = $("#id")  //jQuery对象

        var jQueryobj1 = $(DOMobj);  //DOM对象转为jQuery对象
        var DOMobj1 = jQueryobj[0];  //jQuery对象转为DOM对象
        
    </script>
</head>

<body>
    <div id="id">测试文字</div>
</body>

jQuery对象选择器

基本选择器

全选择器：$("*");
ID选择器：$("#id")
类选择器：$(".class")
标签选择器：$(“标签”)

<script src="js/jquery-3.4.0.js"></script>
    <script>
        $(function(){
            /*全选择器*/
            $("*");
            /*ID选择器*/
            $("#box");
            /*Class选择器*/
            $(".cla");
            /*tagName选择器*/
            $("div");
            /*交集选择器  满足选择器1并且满足选择器2*/
            $("div.clas");
        })
    </script>

<body>
    <div id="box" class="cla"></div>
</body>

层级选择器

后代选择器：parent child：获得父元素内部的所有子孙元素（子，孙）
子代选择器：parent>child：获得父元素下面的子元素
相邻兄弟选择器：prev + next：选择所有紧接在“prev”元素后的“next”一个元素（同一父级元素）
prev~siblings：选择“prev”元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器（同一父级元素）

<script src="js/jquery-3.4.0.js"></script>

<body>
<ul id="box">
    <li>老大</li>
    <li class="li2">老二</li>
    <p>sss</p>
    <li>老三</li>
    <li>老四</li>
    <li>
        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ul>
    </li>
</ul>
</body>
<script>
        $(function(){
         	$("ul li")  //获取了ul下面的8个li
			$("ul>li")  //获取了ul下面的5个直接子元素li
			$(".li2+p")  //获取到了class为li2下面的p标签
			$(".li2+li") //获取不到，因为.li2的下一个元素不是li，是p
			$(".li2~li")  //获取到了class为li2下面的3个兄弟li
        })
    </script>

过滤器选择器

:first $(“li:first”)：第一个li元素
:last $(“li:last”)：最后一个li
:not(…) $(“li:not(…)”)：除了…以外的所有li元素
:even $(“li:even”)：所有偶数li元素（注：索引从0开始）
:odd $(“li:odd”)：所有奇数li元素（注：索引从0开始）
eq(index) $(“ul li:eq(2)”)：li中的第3个li元素（注：索引从0开始）
get(index) $(“ul li:get(2)”)：索引大于2的所有li元素
lt(index) $(“lu li:lt(2)”)：索引小于2 的li元素
header $(“ul :header”)：ul下面的标题元素（:header 所有标题元素）
focus

<body>
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
    <li>列表6</li>
    <li class="li7">列表7</li>
    <li>列表8</li>
    <h1>标题一</h1>
</ul>
</body>

属性选择器

语法

$("[class]")：所有带class属性的元素
$("[class=‘abc’]")：所有class属性的值为abc的元素
$("[class！=‘abc’]")：所有class属性的值不为abc的元素
$("[class ^= ‘abc’]")：所有class属性的值包含以abc开头的元素
$("[class $= ‘abc’]")：所有class属性的值包含以abc结尾的元素
$("[class *= ‘abc’]")：所有class属性的值包含abc的元素

注：class为泛指，只要是属性就行

表单元素选择器

语法

$(“form:enable”)：所有激活的input元素
$(“form:disable”)：所有禁用的input元素
$(“form:selected”)：所有被选取的元素（只能用于下拉列表中被选中的元素）
$(“form:checked”)：所有被选中的元素（单选按钮、复选框、下拉列表都能用）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.0.js"></script>
    <script>
        $(function(){
           var len = $("form :enabled").length;  //8
          
           // var len = $("form :disabled").length;  //2
      
           //var len =  $("form :selected").length;  //1   /*只能选中下拉选项被选中的元素*/
           //var len =  $("form :checked").length;  //2  /*选中单选、复选、下拉选项被选中的元素*/
           
           alert(len);

        })
    </script>
</head>
<body>
<form action="" method="get">
    账户：<input type="text" name="username"  placeholder="请输入您的账户" 

required="required"><br><!--username=admin-->
    密码：<input type="password" name="pwd" value="666" disabled="disabled" ><br><!--pwd=123-->
    性别：
    <input type="radio" name="sex" value="male" checked="checked" >男<!--sex=male-->
    <input type="radio" name="sex" value="female" readonly="readonly">女
    <input type="radio" name="sex" value="other">其他 <br>
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sz" disabled="disabled">深圳</option>
        <option value="hz" selected="selected">杭州</option>
    </select><br>
</form>
</body>

余木尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门笔记

DOM对象与jQuery对象的相互转换基本语法DOM对象转Query对象：jQuery（DOM对象）Query对象转DOM对象：jQuery对象[index]<head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3....
复制链接

扫一扫