2017-02-24 10:58:54 sunxiaofre 阅读数 4995

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>

选择器综合练习

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery标签切换效果</title>
    <link rel="stylesheet" href="2-17.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<!--代码部分b圈圈中就是选择器对应的选择到的元素:

egin-->
<div id="menu">
    <!--tag标题-->
    <div id="menu_female">
        <h3>女装</h3>
        <div class="tag" style="display: block;">
            <dl>
                <dd>
                    <p>第一类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.雪纺衫</a>
                    <a>4.针织衫</a>
                    <a>5.短外套</a>
                    <a>6.卫衣</a>
                    <a>7.小西裤</a>
                    <a>8.风衣</a>
                    <a>9.吊带背心</a>
                    <a>10.连衣裙</a>
                    <a name="setColor">11.蕾丝连衣裙</a>
                    <a>12.复古连衣裙</a>
                    <a>13.印花连衣裙</a>
                    <a>14.真丝连衣裙</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第二类</p>
                    <a>1.背带裤</a>
                    <a>2.哈伦裤</a>
                    <a>3.牛仔裤</a>
                    <a>4.休闲裤</a>
                    <a>5.小脚裤</a>
                    <a>6.西装裤</a>
                    <a>7.打底裤</a>
                    <a>8.阔脚裤</a>
                    <a>9.短裤</a>
                    <a>10.马甲/背心</a>
                    <a>11.羽绒服</a>
                    <a>12.棉服</a>
                    <a>13.夹克</a>
                    <a>14.POLO衫</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>>
    </div>
    <div id="menu_con">
        <h3>男装</h3>
        <div class="tag" style="display:block">
            <dl>
                <dd>
                    <p>第一类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.牛仔裤</a>
                    <a>4.休闲裤</a>
                    <a>5.短裤</a>
                    <a>6.针织衫</a>
                    <a>7.西服</a>
                    <a>8.西裤</a>
                    <a>9.嘻哈裤</a>
                    <a>10.西服套装</a>
                    <a>11.马甲/背心</a>
                    <a name="setColor">12.羽绒服</a>
                    <a>13.棉服</a>
                    <a>14.夹克</a>
                    <p>更多</p>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第二类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.牛仔裤</a>
                    <a name='setColor'>4.休闲裤</a>
                    <a>5.短裤</a>
                    <a>6.针织衫</a>
                    <a>7.西服</a>
                    <a>8.西裤</a>
                    <a>9.嘻哈裤</a>
                    <a>10.西服套装</a>
                    <a>11.马甲/背心</a>
                    <a>12.羽绒服</a>
                    <a>13.棉服</a>
                    <a>14.夹克</a>
                    <p>更多</p>
                </dd>
            </dl>
        </div>>
    </div>
</div>

<script type="text/javascript">
    //找到男装下第一类衣服中的第一个p元素,并改变颜色
    //可以通过子类选择器  p:first-child 筛选出第一个p元素
    $('#menu_con div.tag dd>p:first-child').css('color','red');
</script>

<script type="text/javascript">
    //找到男装下第一类衣服把a元素从顺序1-4加上颜色
    //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素
    //注意了index是从0开始计算,所以选在1-4,为对应的index就是4
    $('#menu_con>div:first dd:eq(0)>a:lt(4)').css('color','blue');

</script>

<script type="text/javascript">
    //找到男装所有a元素中属性名name="setColor"的元素,并设置颜色
    //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素
    #('menu_con a[name="setColor"]').css('color','#66CD00');
</script>

<script type="text/javascript">
    //不分男女,选中第一类衣服中第9个a元素,并改变颜色
    //这里用了nth-child 选择的他们所有父元素的第n个子元素
    $('#menu div.tag dd a:nth-child(10)').css('color','#C71585');

</script>

<script type="text/javascript">
    //找到女装下第一类衣服,把a元素中包含文字"更多"的节点,改变颜色
    $('.tag:first a:contains("更多")')
</script>



</body>

</html>

2016-09-05 22:44:31 qq_35155205 阅读数 3058

配置jQuery即把下载的后缀名为.js的文件放置到项目的指定文件夹中,通常放置在JS文件夹中,然后根据需要应用到jQuery的页面中。使用下面的语句,将其引用到文件中:

<script src=http://www.csdn.net/gather_2d/"jquery.min.js" type="text/javascript"></script>

<!--或者-->

<script  Language="javascript"  src=http://www.csdn.net/gather_2d/"jquery.min.js" ></script>

注意:引用jQuery的<script>标签必须放在所有的自定义脚本的<script>之前,否则在自定义的脚本代码中应用不到jQuery脚本库。

2019-02-28 23:17:16 weixin_43241297 阅读数 1477

最近公司需要将项目中的旧版本jQuery升级到新版本的jQuery,为解决兼容性问题,在查阅相关资料后发现jQuery官方提供了解决兼容性问题的插件。
以我本次项目升级为例,我此次升级的项目中jQuery的版本比较旧和杂,但是统一将他们升级到了3.2.1版本。首先去官方下载jQuery3.2.1文件,然后再去下载jQuery-migrate-1.4.1文件(比较旧的jQuery升级到新版本jQuery,需要下载jQuery-migrate-1.x.x的版本)。然后在页面中将原来导入jQuery语句注释或者删掉,接着导入Query3.2.1文件,紧接着导入jQuery-migrate-1.4.1文件。此次jQuery升级就完成了。
示例如下:

<!-- 旧的注释 -->>
<!--  
<script type="text/javascript" src="http://www.csdn.net/gather_2d/WebContent/jQuery/jQuery-1.4.1.js">
</scrip>
-->
<!-- 导入新的 -->>
<script type="text/javascript" src="http://www.csdn.net/gather_2d/WebContent/jQueryUpgrate/jQuery-3.2.1.js">
</script>
<script type="text/javascript" src="http://www.csdn.net/gather_2d/WebContent/jQueryUpgrate/jQuery-migrate-1.4.1.js">
</script>

下载本次jQery升级所需文件,提取码(19ym)

官方地址

2018-03-19 19:04:51 weixin_39068791 阅读数 5330

①打开官网:https://jquery.com/


②找到如下三个文件,右击文件选择“另存为”

注:

Production jQuery版——优化压缩后的版本(删除空格等,文件较小,但不利于阅读),建议程序发布时使用

Develepment jQuery版——未压缩版本(格式标准,易于阅读),一般在网站建设时使用,便于调试

jQuery map文件——map文件能够被用来在某些现在浏览器上调试压缩后的jQuery文件,map文件可以增强调试的体验,对于使用jQuery的用户来说,一般不需要下载改文件。


写在最后:jQuery库实际上是一个扩展JavaScript功能的外部js文件,因此在网页上引用jQuery库的代码如下:

<script src="http://www.csdn.net/gather_2d/jQuery/jquery-3.1.1.js" type="text/javascript" ></script>

2018-11-14 11:51:42 qq_42632299 阅读数 1229

好久没更新博客了,最近除了写轮播图,飞机大战之外,就是学习jQuery了,所以今天就跟大家分享一下jQuery的心得。

由于手头上的jQuery文档是1.8.3的,所以就拿1.8.3来说吧。

说起框架,jQuery应该是最早开始做框架的,jQuery主要是简化了操作DOM的方法,并提供了简单的动画效果。

1、便捷操纵DOM。

      在jQuery中,选择DOM就跟css一样,.表示class名,#表示id,然后还可以使用first-child,:checked等这类,可以说就是照着css去写就ok了。这也是原生的以后的发展方向,例如现在已经有了doucument.querySelector,能够实现类似的功能。jQuery是使用时仅需把选择字符串传入$函数中即可,也是十分简便,在选择DOM元素上,jQuery已经十分方便了。

操纵DOM时要注意和原生分开,使用jQuery方法时,需要用$函数,使用原生时需要将jQuery对象变成DOM对象,例如使用[下标]。

原生中也有queryselector,也算是集成了jQuery的DOM选择器

2、扩展JS功能

$.contain,$.each,$.extend,这一些都被ECMA吸取过来,慢慢成为了原生的一部分

3、封装动画

封装了很多动画,虽然最后很多可以用css3,但是也是很方便的,再结合jQuery的$.on等,可以很方便的实现动画

JQuery环境配置

阅读数 2544

jquery学习总结

阅读数 2610

Jquery的常用操作

阅读数 4794

没有更多推荐了,返回首页