jQuery选择器

最新推荐文章于 2022-11-03 22:33:30 发布
最新推荐文章于 2022-11-03 22:33:30 发布
阅读量100 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjy23580/article/details/103321111
版权

ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器之id选择器</title>
    <style>
        div {
            width:100px;
            height:90px;
            float:left;
            padding:5px;
            margin:10px;
            background-color: #838685;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="js">
    <p>div id="js"</p>
    <p>got you!</p>
</div>
<div id="jq">
    <p>div id="jq"</p>
    <p>got you!</p>
</div>
<div id="no">
    <p>div id="no"</p>
    <p>got you!</p>
</div>
    <script type="text/javascript">
        var js = document.getElementById('js');
        js.style.border = '3px solid blue';
    </script>

    <script type="text/javascript">
        $('#jq').css('border','3px solid red');
    </script>

</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery类选择器</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            float: left;
            padding: 5px;
            margin: 10px;
            background-color: #cccccc;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="js">
    <p>div id="js"</p>
    <p>got you!</p>
</div>
<div class ="jq">
    <p>div id="jq"</p>
    <p>got you!</p>
</div>
<div id="no">
    <p>div id="no"</p>
    <p>got you!</p>
</div>

<script type="text/javascript">
    <!--原生js处理-->
    var oDiv = document.getElementsByClassName('js');
    for(var i=0; i<oDiv.length; i++){
        oDiv[i].style.border = '3px solid green';
    }
</script>

<script type="text/javascript">
    <!--通过jQuery直接传入类-->
    $('.jq').css('border','3px solid red');
</script>

</body>
</html>

元素选择器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        div {
            width: 100px;
            height: 90px;
            float: left;
            padding: 5px;
            margin: 5px;
            background-color: #EEEEEE;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="aaron">
    <p>class="aaron"</p>
    <p>选中</p>
</div>
<div class="aaron">
    <p>class="aaron"</p>
    <p>选中</p>
</div>
<div class="imooc">
    <p>class="imooc"</p>
    <p>jQuery选中</p>
</div>
<div class="imooc">
    <p>class="imooc"</p>
    <p>jQuery选中</p>
</div>

<script type="text/javascript">
    //通过原生方法处理
    //获取到所有的节点标记名为div的元素
    //给每一个div加上绿色的边框
    var divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.border = "5px solid green";
    }
</script>
<script type="text/javascript">
    //通过jQuery直接传入标签名p
    //可以多个标签，所以得到的同样也是一个合集
    $('p').css("border", "5px solid red");
</script>

</body>

</html>

全选择器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery全选择器</title>
    <style>
        div {
            width: 100px;
            height: 90px;
            float: left;
            padding: 5px;
            margin: 5px;
            background-color: #EEEEEE;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="aaron">
    <p>class="aaron"</p>
    <p>选中</p>
</div>
<div class="aaron">
    <p>class="aaron"</p>
    <p>选中</p>
</div>
<div class="imooc">
    <p>class="imooc"</p>
    <p>jQuery选中</p>
</div>
<div class="imooc">
    <p>class="imooc"</p>
    <p>jQuery选中</p>
</div>

<script type="text/javascript">
    <!--js原生方式-->
    //获取页面中所有的元素
    var elements1 = document.getElementsByTagName('*');
</script>
<script type="text/javascript">
    <!--jQuery方式-->
    //获取页面中所有的元素
    var elements2 = $('*');
    //原生与jQuery方法比较
    //===表示数据和类型都相等
    if(elements2.length === elements1.length){
        elements2.css("border","3px solid red");
    }
</script>
</body>

</html>

层级选择器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery层级选择器</title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>

<!--
$( "parent > child" )
子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。

$("ancestor descendant")
后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等

$("prev + next")
相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素

$("prev ~ siblings")
一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器

相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下!同一个父元素下!同一个父元素下!

层级选择器都有一个参考节点！

-->

<h2>子选择器与后代选择器</h2>
<div class="left">
    <div class="aaron">
        <p>div下的第一个p元素</p>
    </div>
    <div class="aaron">
        <p>div下的第一个p元素</p>
    </div>
</div>
<div class="right">
    <div class="imooc">
        <article>
            <p>div下的article下的p元素</p>
        </article>
    </div>
    <div class="imooc">
        <article>
            <p>div下的article下的p元素</p>
        </article>
    </div>
</div>

<script type="text/javascript">
    //子选择器
    //$('div > p') 选择所有div元素里面的子元素P
    $('div>p').css("border", "5px solid green");
</script>

<script type="text/javascript">
    //后代选择器
    //$('div  p') 选择所有div元素里面的p元素
    $('div article').css("border", "5px solid red");
</script>


<h2>相邻兄弟选择器与一般兄弟选择器</h2>
<div class="bottom">
    <div>兄弟节点div, +~选择器不能向前选择</div>
    <span class="prev">选择器span元素</span>
    <div>span后第一个兄弟节点div</div>
    <div>兄弟节点div
        <div class="small">子元素div</div>
    </div>
    <span>兄弟节点span,不可选</span>
    <div>兄弟节点div</div>
</div>

<script type="text/javascript">
    //相邻兄弟选择器
    //选取prev后面的第一个的div兄弟节点
    $('.prev+div').css("border", "3px solid blue");
</script>

<script type="text/javascript">
    //一般相邻选择器
    //选取prev后面的所有的div兄弟节点
    $('.prev~span').css("border", "3px solid red");
</script>

</body>

</html>

基本筛选选择器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery基本筛选选择器</title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>基本筛选器</h2>
<h3>:first/:last/:even/:odd</h3>
<div class="left">
    <div class="div">
        <p>div:first</p>
        <p>:even</p>
    </div>
    <div class="div">
        <p>:odd</p>
    </div>
    <div class="div">
        <p>:even</p>
    </div>
    很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，
    为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。
    筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器

    <div class="div">
        <p>:odd</p>
    </div>
    <div class="div">
        <p>:even</p>
    </div>
    <div class="div">
        <p>div:last</p>
        <p>:odd</p>
    </div>
</div>
<script type="text/javascript">
    //找到第一个div
    $('.div:first').css("color", "#CD00CD");
</script>

<script type="text/javascript">
    //找到最后一个div
    $('.div:last').css("color", "#CD00CD");
</script>

<script type="text/javascript">
    //:even 选择所引值为偶数的元素，从 0 开始计数
    $('.div:even').css("border", "3px groove red");
</script>

<script type="text/javascript">
    //:odd 选择所引值为奇数的元素，从 0 开始计数
    $('.div:odd').css("border", "3px groove blue");
</script>


<h3>:eq/:gt/:lt</h3>
<div class="left">
    <div class="choose">
        <p>:lt(3)</p>
    </div>
    <div class="choose">
        <p>:lt(3)</p>
    </div>
    <div class="choose">
        <p>:eq(2)</p>
    </div>
    <div class="choose">
    </div>
    <div class="choose">
        <p>:gt(3)</p>
    </div>
    <div class="choose">
        <p>:gt(3)</p>
    </div>
</div>
<script type="text/javascript">
    //:eq
    //选择单个
    $('.choose:eq(2)').css("border", "3px groove blue");
</script>

<script type="text/javascript">
    //:gt 选择匹配集合中所有索引值大于给定index参数的元素
    $('.choose:gt(3)').css("border", "3px groove blue");
</script>

<script type="text/javascript">
    //:lt 选择匹配集合中所有索引值小于给定index参数的元素
    //与:gt相反
    $('.choose:lt(2)').css("color", "#CD00CD");
</script>

<h3>:not</h3>
<div class="left">
    <div>
        <input type="checkbox" name="a" />
        <p>choose</p>
    </div>
    <div>
        <input type="checkbox" name="b" />
        <p>world</p>
    </div>
    <div>
        <input type="checkbox" name="c" checked="checked" />
        <p>others</p>
    </div>
</div>
<script type="text/javascript">
    //:not 选择所有元素去除不匹配给定的选择器的元素
    //选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
    $('input:not(:checked)+p').css("background-color", "#CD00CD");
</script>
</body>

</html>

内容筛选选择器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery内容筛选选择器</title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>

<!--注意！-->

<!--1，:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素。-->

<!--2，如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。-->

<!--3，:parent与:empty是相反的，两者所涉及的子元素，包括文本节点-->

<!--<h2>内容筛选器</h2>-->
<h3>:contains/:has</h3>
<div class="left">
    <div class="div">
        <p>content</p>
    </div>
    <div class="div">
        <p>content</p>
    </div>
    <div class="div">
        <p>
            <span>:has</span>
        </p>
    </div>
    <div class="div">
        <p>content</p>
    </div>
</div>

<script type="text/javascript">
    //查找所有class='div'中DOM元素中包含"contains"的元素节点
    //并且设置颜色
    $('.div:contains("content")').css("color", "#CD00CD");
</script>

<script type="text/javascript">
    //查找所有class='div'中DOM元素中包含"span"的元素节点
    //并且设置颜色
    $('.div:has(span)').css("color", "blue");
</script>


<h3>:parent/:empty</h3>
<div class="left">
    <div class="aaron">
        <a>:parent</a>
    </div>
    <div class="aaron">
        <a>:parent</a>
    </div>
    <div class="aaron">
        <a>:parent</a>
    </div>
    <div class="aaron">
        <a></a>
    </div>
</div>
<script type="text/javascript">
    //选择所有包含子元素或者文本的a元素
    //增加一个蓝色的边框
    $('a:parent').css("border", "3px groove blue");
</script>

<script type="text/javascript">
    //找到a元素下面的所有空节点(没有子元素)
    //增加一段文本与边框
    $('a:empty').text(":empty").css("border", "3px groove red");
</script>

</body>

</html>

可见性筛选选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery可见性筛选选择器</title>
    <link rel="stylesheet" href="2-9.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>

隐藏一个元素的方式：
1，CSS display属性的值为none。
2，type="hidden"的表单元素。
3，宽度和高度都显式设置为0。
4，一个祖先元素是隐藏的，该元素是不会在页面上显示的。
5，CSS visibility的值是hidden。
6，CSS opacity的值是0。

<h2>可见性筛选选择器</h2>
<h3>:visible/:hidden</h3>
<div class="left">
    <div class="div">
        <a>display</a>
        <p id="div1" style="display:none;">display</p>
    </div>
    <div class="div">
        <a>width</a>
        <a>height</a>
        <p id="div2" style="width:0;height:0">width/height</p>
    </div>
    <div class="div">
        <a>visibility</a>
        <a>opacity</a>
        <p id="div3" style="visibility:hidden;opacity:0">visibility</p>
    </div>
    <p id="show"></p>

    <script type="text/javascript">
        function show(ele){
            if(ele instanceof jQuery){
                $('#show').html('元素的长度：'+ ele.length)
            }else{
                alert(ele+' 不是jQuery对象')
            }
        }
    </script>


    <script type="text/javascript">
        show($('#div1:visible'));
    </script>

    <script type="text/javascript">
        show($('#div2:visible'));

    </script>
    <script type="text/javascript">
        show($('#div3:visible'));

    </script>

    <script type="text/javascript">
        show($('#div1:hidden'));

    </script>

    <script type="text/javascript">
        show($('#div2:hidden'));

    </script>

    <script type="text/javascript">
        show($('#div3:hidden'));

    </script>



</div>


</body>
</html>

属性筛选选择器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery子元素筛选选择器</title>
    <link rel="stylesheet" href="2-9.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>属性筛选选择器</h2>
<h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
<div class="left" testattr="true" >
    <div class="div" testattr="true" name='p1'>
        <a>[att=val]</a>
    </div>
    <div class="div" testattr="true" p2>
        <a>[att]</a>
    </div>
    <div class="div" testattr="true" name="-">
        <a>[att|=val]</a>
    </div>
    <div class="div" testattr="true" name="a b">
        <a>[att~=val]</a>
    </div>
</div>

<script type="text/javascript">
    //查找所有div中，属性name=p1的div元素
    $('div[name=p1]').css("border", "3px groove red");
</script>

<script type="text/javascript">
    //查找所有div中，有属性p2的div元素
    $('div[p2]').css("border", "3px groove blue");
</script>

<script type="text/javascript">
    //查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
    $('div[name|="-"]').css("border", "3px groove #00FF00");
</script>

<script type="text/javascript">
    //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
    $('div[name~="a"]').css("border", "3px groove #668B8B");
</script>


<h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
<div class="left" testattr="true" >
    <div class="div" testattr="true"  name='xiao-shitou'>
        <a>[att^=val]</a>
    </div>
    <div class="div" testattr="true"  name='shitou-xiao'>
        <a>[att$=val]</a>
    </div>
    <div class="div" testattr="true"  name="attr-test-selector">
        <a>[att*=val]</a>
    </div>
    <div class="div" name="a b">
        <a>[att!=val]</a>
    </div>
</div>


<script type="text/javascript">
    //查找所有div中，属性name的值是用xiao开头的
    $('div[name^="xiao"]').css("border", "3px groove red");
</script>

<script type="text/javascript">
    //查找所有div中，属性name的值是用xiao结尾的
    $('div[name$="xiao"]').css("border", "3px groove blue");
</script>

<script type="text/javascript">
    //查找所有div中，有属性name中的值包含一个test字符串的div元素
    $('div[name*="test"]').css("border", "3px groove #00FF00");
</script>

<script type="text/javascript">
    //查找所有div中，有属性testattr中的值没有包含"true"的div
    $('div[testattr!="true"]').css("border", "3px groove #668B8B");
</script>


</body>

</html>

子元素筛选选择器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="choose.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>子元素筛选选择器</h2>
<h3>:first-child、:last-child、:only-child</h3>
<div class="left first-div">
    <div class="div">
        <a>:first-child</a>
        <a>第二个元素</a>
        <a>:last-child</a>
    </div>
    <div class="div">
        <a>:first-child</a>
    </div>
    <div class="div">
        <a>:first-child</a>
        <a>第二个元素</a>
        <a>:last-child</a>
    </div>
</div>

<script type="text/javascript">
    //查找class="first-div"下的第一个a元素
    //针对所有父级下的第一个
    $('.first-div a:first-child').css("color", "#CD00CD");
</script>

<script type="text/javascript">
    //查找class="first-div"下的最后一个a元素
    //针对所有父级下的最后一个
    //如果只有一个元素的话，last也是第一个元素
    $('.first-div a:last-child').css("color", "red");
</script>

<script type="text/javascript">
    //查找class="first-div"下的只有一个子元素的a元素
    $('.first-div a:only-child').css("color", "blue");
</script>


<h3>:nth-child、:nth-last-child</h3>
<div class="left last-div">
    <div class="div">
        <a>:first-child</a>
        <a>第二个元素</a>
        <a>第三个元素</a>
        <a>:last-child</a>
    </div>
    <div class="div">
        <a>:first-child</a>
        <a>第二个元素</a>
    </div>
    <div class="div">
        <a>:first-child</a>
        <a>第二个元素</a>
        <a>第三个元素</a>
        <a>:last-child</a>
    </div>
</div>

<script type="text/javascript">
    //查找class="last-div"下的第二个a元素
    $('.last-div a:nth-child(2)').css("color", "#CD00CD");
</script>

<script type="text/javascript">
    //查找class="last-div"下的倒数第二个a元素
    $('.last-div a:nth-last-child(2)').css("color", "red");
</script>

</body>

</html>

表单元素选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery表单元素选择器</title>
    <link rel="stylesheet" href="choose.css" type="text/css">
    <style>
        input{
            display: block;
            margin: 10px;
            padding:10px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>子元素筛选选择器</h2>
<h3>input、text、password、radio、checkbox</h3>
<h3>submit、image、reset、button、file</h3>
<div class="left first-div">
    <form>
        <input type="text" value="text类型"/>
        <input type="password" value="password"/>
        <input type="radio"/>
        <input type="checkbox"/>
        <input type="submit" />
        <input type="image" />
        <input type="reset" />
        <input type="button" value="Button" />
        <input type="file" />
    </form>
</div>

<script type="text/javascript">
    //查找所有 input, textarea, select 和 button 元素
    //:input 选择器基本上选择所有表单控件
    $(':input').css("border", "1px groove red");
</script>

<script type="text/javascript">
    //匹配所有input元素中类型为text的input元素
    $('input:text').css("background", "#A2CD5A");
</script>

<script type="text/javascript">
    //匹配所有input元素中类型为password的input元素
    $('input:password').css("background", "yellow");
</script>

<script type="text/javascript">
    //匹配所有input元素中的单选按钮,并选中
    $('input:radio').attr('checked','true');
</script>

<script type="text/javascript">
    //匹配所有input元素中的复选按钮,并选中
    $('input:checkbox').attr('checked','true');
</script>

<script type="text/javascript">
    //匹配所有input元素中的提交的按钮,修改背景颜色
    $('input:submit').css("background", "#C6E2FF");
</script>

<script type="text/javascript">
    //匹配所有input元素中的图像类型的元素,修改背景颜色
    $('input:image').css("background", "#F4A460");
</script>

<script type="text/javascript">
    //匹配所有input元素中类型为按钮的元素
    $('input:button').css("background", "red");
</script>

<script type="text/javascript">
    //匹配所有input元素中类型为file的元素
    $('input:file').css("background", "#CD1076");
</script>

</body>

</html>

表单对象选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
        <html>

        <head>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
            <title></title>
            <link rel="stylesheet" href="choose.css" type="text/css">
            <style>
                input {
                    display: block;
                    margin: 10px;
                    padding: 10px;
                }
            </style>
            <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
        </head>

<body>
<h2>子元素筛选选择器</h2>
<h3>enabled、disabled</h3>
<form>
    <input type="text" value="未设置disabled" />
    <input type="text" value="设置disabled" disabled="disabled" />
    <input type="text" value="未设置disabled" />
</form>

<script type="text/javascript">
    //查找所有input所有可用的（未被禁用的元素）input元素。
    $('input:enabled').css("border", "2px groove red");
</script>

<script type="text/javascript">
    //查找所有input所有不可用的（被禁用的元素）input元素。
    $('input:disabled').css("border", "2px groove blue");
</script>

<h3>checked、selected</h3>
<form>
    <input type="checkbox" checked="checked">
    <input type="checkbox">
    <input type="radio" checked>
    <input type="radio">

    <select name="garden" multiple="multiple">
        <option>码农</option>
        <option selected="selected">前端之乐</option>
        <option>活生生的生活</option>
        <option selected="selected">博客园</option>
    </select>

</form>

<script type="text/javascript">
    //查找所有input所有勾选的元素(单选框,复选框)
    //移除input的checked属性
    $('input:checked').removeAttr('checked')
</script>

<script type="text/javascript">
    //查找所有option元素中,有selected属性被选中的选项
    //移除option的selected属性
    $('option:selected').removeAttr('selected')
</script>

</body>

</html>

特殊选择器

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<h2>特殊选择器this</h2>

<p id="test1">click test：通过原生DOM处理</p>

<p id="test2">click test：通过原生jQuery处理</p>

<script type="text/javascript">
    var p1 = document.getElementById('test1')
    p1.addEventListener('click',function(){
        //直接通过dom的方法改变颜色
        this.style.color = "red";
    },false);
</script>

<script type="text/javascript">
    $('#test2').click(function(){
        //通过包装成jQuery对象改变颜色
        $(this).css('color','blue');
    })
</script>

</body>

</html>
zjy23580
关注
jQuery获取与设置div的宽高
碎语1992
07-30 3万+
有两种方法获取与设置div的宽高：使用尺寸函数或使用css方法 获取宽高 1. 尺寸函数：height() 获取高度，width() 获取宽度 2. css获取div宽高：css("height")获取高度，css("width")获取宽度 区别：尺寸函数获取的值为整型，而css获取的值为带px的字符串 $(".div1").click(function()
jQuery选择器中的特殊符号处理方法
12-29
一般情况下，在jQuery选择器中，我们很少会用到诸如“.”、“#”、“(”、“[”等特殊字符，因为根据W3C规定，HTML文档中属性的值是不能包含有这些个特殊字符的，但是在实际应用中，偶尔也会遇到表达式中含有“#”和...
jquery获取与设置元素的宽度与高度
worn_xiao的博客
04-09 1029
Width():width innerWidth():width+padding outerWidth():width+padding+border outerWidth(true):width+padding+border+margin
jQuery获取与设置div的宽和高
ztnhnr的专栏
01-01 5500
前端页面开发时，通过jquery有两种方法获取与设置div的宽高：使用尺寸函数或使用css方法。 一、获取宽和高 1.1 尺寸函数： width()获取宽度 height()获取高度 1.2 css方法： css("width")获取宽度 css("height")获取高度 区别： 尺寸函数返回的值为整型，而css获取的值为带px的字符串 举例： <!DOCTYPEhtml> <htmllang...
jquery实现html中单选按钮的切换选中
minzhang001的博客
02-17 9779
damo 男 女 ('.radio').click(function(){    if(('.radio').click(function(){ if( (this).val()=='1'){ (this).attr(′checked′,false);(this).attr('checked',false); (this).val(
JQuery选择器超级详细
热门推荐
林高禄
08-06 1万+
基本选择器 id选择器：$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮，将id为myid的元素背景为绿色 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>JQuery选择器</title> <script src="js/jquery-3.3.1.min...
jQuery选择器分类
weixin_45753617的博客
08-19 1205
jQuery选择器分类
jquery选择器以及案例
m0_59745705的博客
11-03 1186
jquery选择器是jquery为我们提供的一组方法，让我们更加方便的获取到页面中的元素，注意：jquery选择器返回的是jquery对象。 jquery选择器有很多，但是选择器之间可以互相替代，就是说获取到一个元素，会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。 Css()方法：获取/设置样式 1.获取样式：css（）方法设置参数为要获取值的样式名。 $('#getbtn').click(function(){ 1.1获取id为div1这个元素的样式 conso
jQuery选择器大全总结
impact_factor的博客
08-12 1万+
jQuery选择器jQuery的选择器基本选择器基本过滤选择器属性过滤选择器表单选择器子元素选择器操作元素属性操作样式操作样式类获取或设置元素高度和宽度操作HTML代码操作text代码 jQuery的选择器 基本选择器 id选择器：#id 类选择器：.class 标签名选择器： * ：匹配所有元素 基本过滤选择器 Element:first ：选取第一个元素 Element:last : 选取最后一个元素 Element:not(selector)：去除所有与给定选择器匹配的元素 Element:ev
详解强大的jQuery选择器之基本选择器、层次选择器
12-10
jQuery选择器是jQuery库的核心特性之一，它极大地简化了JavaScript中的DOM操作，使得开发者能够更加高效地选取和操作页面上的元素。本文将详细介绍jQuery的基本选择器和层次选择器。 首先，我们来看基本选择器，这...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
jQuery 选择器
01-19
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”...
java项目，课程设计-ssm病人跟踪治疗信息管理系统
11-13
病人跟踪治疗信息管理系统采用B/S模式，促进了病人跟踪治疗信息管理系统的安全、快捷、高效的发展。传统的管理模式还处于手工处理阶段，管理效率极低，随着病人的不断增多，传统基于手工管理模式已经无法满足当前病人需求，随着信息化时代的到来，使得病人跟踪治疗信息管理系统的开发成了必然。 本网站系统使用动态网页开发SSM框架，Java作为系统的开发语言，MySQL作为后台数据库。设计开发了具有管理员；首页、个人中心、病人管理、病例采集管理、预约管理、医生管理、上传核酸检测报告管理、上传行动轨迹管理、分类管理、病人治疗状况管理、留言板管理、系统管理，病人；首页、个人中心、病例采集管理、预约管理、医生管理、上传核酸检测报告管理、上传行动轨迹管理、病人治疗状况管理，前台首页；首页、医生、医疗资讯、留言反馈、个人中心、后台管理、在线咨询等功能的病人跟踪治疗信息管理系统。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。
liunx project 5
最新发布
11-13
liunx project 5
PostgreSQL DBA实战视频教程（完整10门课程合集）
11-13
分享课程——PostgreSQL DBA实战视频教程（完整10门课程合集）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值