master

分支 (1)

管理

管理

master

lnmpbroter
/
117.jquery基础选择器练习.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery1.11.3.js"></script>
    <script src="demo.js"></script>
    <style>
        /*#box{*/
        /*    background: red;*/
        /*    width: 100px;*/
        /*    position: absolute;*/
        /*    left:10px*/
        /*}*/
        .box1{
            font-size: 10px;
        }
        .apple,.st{
            background-color: #3A87EF;
        }
        .test+.test2{
            font-size: 100px;
        }
        .box{
            width: 100px;
            height: 100px;
        }
    </style>

    <script>
        console.log(typeof jQuery());//object  任何对象的类型都是obj，即任何对象的数据类型都是object
        console.log(typeof Object());//object  除了object的派生对象，就连object对象本身都是object类型
        console.log(jQuery());//如果你要的不是这个对象的类型，而是要的这个对象本身，他会打印出对象的内容，在这里就是打印jQuery初始对象的内容
        console.log(Object());//而如果你要的是Object对象本身，object里面是空的，即{}这样的内容。

        window.onload=function(){
            console.log(typeof jQuery('#box'));//刚刚说了，任何对象的类型都是object，所以这里也是object
            console.log(typeof document.getElementById('box'));//刚刚说了，任何对象的类型都是object，所以这里也是object
            console.log(jQuery('#box'));//这里需要打印的是jQuery对象的内容 'jQuery.fn.init [div#box, context: document, selector: "#box"]'
            //这个对象你可能看不懂，不过没关系，不需要你看懂。你需要学习它的方法有哪些。
            console.log(document.getElementById('box'));//这里你要的是一个div dom对象。 '<div id="box">基础语法</div>'
            //dom对象 jQuery对象，有各自的方法，不能混用。学的越多，乱得越快。
            //我已经不记得dom对象有哪些方法了，那就总结一下吧
            /*
            * dom对象的方法:
            * *.style.*
            * *.offsetleft
            * *.getAttribute
            * *.addEventListener
            * *.onclick
            * *.clientWidth
            * 这些早晚得忘，不用记。
            * 真要记住，唯有天天使用。
            * 这里要重申：学习深度
            * */
            var a=document.getElementById('box');

            function Person() {
                this.gender='男';
            }
            var ggc = new Person();
            console.log(typeof ggc);//object
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

            function Person() {
                this.gender='男';
            }
            var ggc = new Person();
            console.log(ggc);//object
            var boxObj=document.getElementById("box");
            //boxObj.style.backgroundColor="green";//只能获取内联样式的颜色
            console.log(boxObj.getAttribute("style"));//只能获取id class style type 之类的在尖括号里面写的属性
            //不能获取写在style里面的各种属性。
            //不能获取，也就不能set. 那么如何获取背景颜色呢？暂时不会
                //如果获取的是style中的颜色，可以用 console.log(boxObj.style.backgroundColor);
                //如果要获取的是css中的颜色，就不知道了。知道了
                    //var boxObjStyle=getComputedStyle( boxObj , false );
                    //console.log(boxObjStyle.backgroundColor);//这个适用于非ie8的浏览器
                    //console.log(boxObj.currentStyle.backgroundColor);//这个只能ie8用
                    //如果要获取当前宽度，用offsetWidth   console.log(boxObj.offsetWidth);
                    //如果要获取当前元素的相对位置，可以用offsetLeft console.log(boxObj.offsetLeft);

            //能通过jquery获取吗？不会获取，只会设置
            console.log($("#box").css("background-color",'pink'));
            $("#box").css("background",'yellow');
            ///////////////////////////////////////////////////////////////////
            var test1=document.getElementById('box');//获取一个dom对象
            var test2=$('#box').get(0);//用jquery获取一个dom对象
            console.log(test1,test2);
        }
        $(function () {
            var divs=$('div');//测试 jquery 按元素类型选择元素们。
            console.log('divs.length:'+divs.length);
            divs.css("color","red");

            var divs1=$(".box1");//测试用class选择元素们
            console.log("divs1.length : "+divs1.length);
            console.log("divs1.size() : "+divs1.size());

            $('#box3 > p').css('color',"green");//测试复杂选择器的应用
            $('#box3  p').css('background-color',"pink");//复习css选择器

            console.log($('p'));//获得一个jquery对象
            console.log($('p').eq(0));//从多个jquery对象中获得其中一个
            console.log($('p').eq(1));//可以用索引查看jquery对象
            $('p').eq(1).css('background-color','#777779');//复习给jquery对象设置背景

            $('span,i,strong').css('background-color','red');//复习css中的同时选中多种元素

            $('.apple,.st').css('color','red');//一下搜索两种class的标签

            $('div .test').css('color','red');//测试复杂选择器的应用  这叫层次选择器
            $('div *').css('color','black');//测试复杂选择器的应用  这叫层次选择器

            $('#box3').children('p').css('background-color',"pink");//测试children

            $('.test+.test2').css('background-color','yellow');// 选择后面最近的一个兄弟元素，而非子元素
            $('.test').next('.test2').css('color','red');//等效于上面的句子
            $('.test').nextAll('.test2').css('color','green');//选择兄弟元素中class是test2的全部元素，而不是仅选择一个而已
            $('.test').next('*').css('color','red'); //next中传*星和空，是一样的。都表示任何
            $('.test').next().css('color','green');

            $('.test2').prev('.test').css('color','red');//获得兄长元素中最近的一个
            $('.test2').prevAll('.test').css('color','red');//获得兄长元素中全部的元素

            $('.test2').siblings().css('color','blue');//使兄弟姐妹都变颜色

            $('.test').nextUntil('.test2').css('color','pink');//利用排除法，给兄弟节点设置颜色。当遇到test2时，就停止赋值行为.不包含test2
            $('.test2').prevUntil('.test').css('color','yellow');//利用排除法，给兄弟节点设置颜色。当遇到test2时，就停止赋值行为.不包含test

            //以上是选择器
            ////////////////////////////////////////////
            //以下是过滤器
            $('li:first').css('color','red');//从多个相同元素中提取第一个
            $('li:last').css('color','red');//从多个相同元素中提取最后一个
            $('li:odd').css('color','red');//从多个相同元素中提取奇数对应的元素，索引从0开始
            $('li:even').css('color','green');//从多个相同元素中提取偶数对应的元素，索引从0开始
            $('li:not(.red)').css('color','green');//选择class不是red的元素
            $('li').eq(2).css('color','red');//选择索引值等于指定值的元素
            $('li:eq(2)').css('color','red');//选择索引值等于指定值的元素
            $('li:gt(2)').css('color','red');//选择索引值大于指定值的元素
            $('li:lt(2)').css('color','red');//选择索引值小于指定值的元素

            $('input').focus();//当页面加载完后，给元素设置光标
            $(':focus').css('color','red');//给有光标的元素设置样式

            $("p:contains('a')").css('color','red');//选择包含特定内容的标签
            $(":empty").css('background-color','red');//选择内容为空的标签
            $("div:parent").css('background-color','red');//选择内容不为空的标签
            $("div").parent().css('background-color','red');//选择div的各级父亲节点
            $("div").parentsUntil("div").css('background-color','red');//选择div的各级父亲节点,直到遇到div就结束赋值
            $("div:has('.box1')").css('background-color','green');//选择包含特定类的标签的父元素，div就是父元素的种类
            $("div").has('.box1').css('background-color','yellow');//选择包含特定类的标签的父元素，div就是父元素的种类
            console.log($('li').eq(3).hasClass('red'));//看看第三个li有没有red class

            $('li:first-child').css('background-color','gray');//选择各个分组中众多li中做为第一个子元素的li
            $('li:last-child').css('background-color','gray');//选择各个分组中众多li中做为最后一个子元素的li
            $('div:only-child').css('background-color','gray');//选择是父元素唯一的子元素的div，子元素div在父元素里面
            $('li:nth-child(even)').css('background-color','gray');//选择偶数行的li，设置背景

            for (var i in $('.red')){
                if($('.red').eq(i).is('li')){ //判断获得到的元素是不是li
                    console.log('class是red的元素是li')
                }else{
                    console.log('class是red的元素不是li')
                }
            }
            console.log($('li').eq(3).hasClass('red'));//看看第三个li有没有red class
            $('li').slice(2,4).css('background-color','green');//从li选择集合中选择23变背景颜色，从0开始，不包含4
            $('li').slice(2,).css('background-color','green');//从li选择集合中选择第二个到之后变背景颜色

            console.log('size()'+$('h2').size());  //总共查到有1一个
            console.log('children().size()'+$('h2').children().size());//它的子节点有1个
            console.log('contents().size()'+$('h2').contents().size());//它的子节点+文本节点有2个

            $('li').filter('.green').css('background-color','yellow');//选择li集合中有green class的元素
            $('li .green').css('background-color','blue');//选择li下子元素有green class的元素
            $('li').filter('.green,:first-child,.red').css('background-color','yellow');//选择li集合中有green class的元素，以及更多元素，用逗号隔开
            $('li').filter(function () {//如果return true，就执行后面的赋值语句
                if(this.className=='red'){
                    //alert(this.className)  //这是js写法
                    //alert(this.getAttribute('class')); //这是js写法  对应的还有赋值操作 setAttribute('class','redClass')
                    alert($(this).attr('class'));//  这是jqurey写法  只能获取结果，不能赋值
                    return true
                }
            }).css('background-color','blue');


        })
    </script>
</head>
<body>
<div  class="box1" id="box">基础语法</div>
<div  class="box1" id="box2">基础语法2</div>
<div id="box3">
    <p class="test4">1</p>
    <p class="test">2</p>
    <p class="test">3</p>
    <p class="test3">4</p>
    <p class="test2">5</p>
    <p class="test2">6</p>
    <p class="test5">7</p>
    <p>1</p>
    <div>
        <p>2</p>
        <p>2</p>
        <p>2</p>
        <p>2</p>
    </div>
</div>
<span>a</span><i>b</i><strong>c</strong>
<p class="apple">苹果</p>
<p class="st">草莓</p>
<ul>
    <li>1</li>
    <li class="red">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

<input type="text">

<div class="box">
    <p class="box1">a</p>
    <p>b</p>
</div>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<ul>
    <li>1</li>
</ul>
<div>
    <div class="box">
        <p>b</p>
    </div>
</div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

<ul>
    <li class="red">1</li>
    <li class="green">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <p class="red"></p>
</ul>
<h2>
    b
    <p>a</p>
</h2>

</body>
</html>