jQuery(1)

jQuery(1)

jQuery是什么?

jQuery是一个JavaScript函数库。

为什么学习jQuery?

JS中一个简单的功能需要大量的代码
JS中兼容的问题很多
JS中代码的容错性很差
JS中window.onload也只能有一个
jQuery的好处:很好的解决了不同浏览器的兼容性问题(IE6.0+,Safari3.0+,Opera 9.0+,Chrome),体积小,使用方便,链式编程,隐式迭代,插件丰富,开源,免费

jQuery的顶级对象$

jQuery中最常用的对象即$对象,要想使用jQuery的方法必须通过$对象.
JavaScript中的顶级对象是window
window.onload只能写一次,重复会被后面的干掉
页面所有的标签图片外部引入加载后才会触发
$(document).ready()DOM基本标签加载后就触发可以多些几个

$(document),ready()和$(function())一样
<script>
        /*
        *DOM中的顶级对象:document---页面中的顶级对象
        *document点出来的是DOM中的属性和方法
        *BOM中的顶级对象:window-----浏览器中的顶级对象
        * window点出来的是浏览器中的属性和方法
        *window.document
        *jQuery的顶级对象:jQuery----$
        * $点出来的是jQuery中的方法
         */


        // //  页面加载   window只会加载最后一个
        // window.onload = function () {
        //     console.log('111');
        // }
        // window.onload = function () {
        //     console.log('222');
        // }
        // 页面中所有的内容加载完毕后才触发,标签,图片,文字内容.... load (所有元素加载完毕再触发)  ready(基本元素加载完毕就触发 )
        // jQuery的代码--和DOM中的window.onload事件是相同的
        // $(window).load(function () {
        //     console.log('111');
        // });
        $(window).load(function () {
            console.log('222');
        });


        // 第二种页面加载的事件的写法----都是方法了
        // 页面中基本的标签加载完毕后就可以触发了
        // ready先执行再执行load
        $(document).ready(function () {
            console.log('111');
        });
        $(document).ready(function () {
            console.log('2222');
        });
    </script>

jQuery引入js文件

jquery下载地址

<script src="jquery-1.11.3.min.js"></script>

jQuery对象和DOM对象互转

DOM对象转jQuery对象操作方便,毕竟jquery中方法都是封装好了的,而且兼容问题解决的很好,代码少,方便
jQuery对象转DOM对象,因为jQuery中文件一直在更新,很多东西都是随着使用而进行封装和升级,还有很多未知的兼容性问题,所以,jQuery对象有的时候需要转成dom对象来进行操作。

  <script>
        // window中DOM对象转换成jquery中$对象
        // document.getElementById('btn').onclick = function () {
        //     this.style.backgroundColor = 'red';
        // }
        // $(function () {


        //     $("#btn").click(function () {
        //         $(this).css("backgroundColor", 'red');
        //     });
        // })

        // 把jquery对象转DOM对象两种方式
        // 1.$(btnObj).get(0);  ------>DOM对象
        // 2.$(btnObj)[0];     -------> DOM对象

        var btnObj = document.getElementById('btn'); //DOM对象
        // var obj = $(btnObj).get(0);   //DOM对象
        var obj = $(btnObj)[0];   //DOM对象
        obj.onclick = function () {
            this.style.backgroundColor = "green";
        }

        /*
        * DOM对象和jquery对象可以互转
        * DOM对象转---->jquery对象
        * $(DOM的对象)  ----> jquery对象
        * jquery对象-----> DOM对象
        * 1.$(btnObj).get(0);
        * 2.$(btnObj)[0];
         */

    </script>

案例-网页开关灯

在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //点击按钮设置body的背景颜色,实现网页开关灯的效果
        //DOM的方式来操作
//        window.onload=function () {
//            //获取按钮,注册点击事件,设置body的背景颜色
//            document.getElementById("btn").onclick=function () {
//                  //判断--->按钮的value值如果是关灯,则body的背景颜色为黑色
//                if(this.value=="关灯"){
//                    document.body.style.backgroundColor="black";
//                    this.value="开灯";
//                }else{
//                    document.body.style.backgroundColor="white";
//                    this.value="关灯";
//                }
//                //如果按钮的value值为开灯,则body的背景颜色为白色
//            };
//        };
    </script>
    <script src="jquery-1.12.2.js"></script>
    <script>
        //页面的加载事件
        $(function () {
            //获取按钮,注册点击事件
            $("#btn").click(function () {
                //.val()方法--->获取按钮的value属性的值
                //.val("内容");是设置按钮的value属性的值
                if($(this).val()=="关灯"){
                    $("body").css("backgroundColor","black");
                    $(this).val("开灯");
                }else{
                    $("body").css("backgroundColor","white");
                    $(this).val("关灯");
                }
            });
        });
    </script>
</head>
<body>
<input type="button" value="关灯" id="btn"/>
</body>
</html>

jQuery选择器

选择器:就是为了获取元素的,css中设置元素的样式可以通过选择器,jQuery中通过选择器来获取元素进行操作
DOM中获取元素的方式:

  • document.getElementById()
  • document.getElementByTagName()
  • document.getElementByClassName()
    jQuery用法
  • $(“#id”)
  • $(“.class”)
  • $(“div”)
  • $(“*”)

标签+类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            background-color: red;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        //点击按钮设置页面上应用cls类样式li标签的背景颜色
    //页面加载的事件
        $(function () {
            //获取按钮,注册点击事件
            $("#btn").click(function () {
                //获取应用cls类样式的li标签
                //标签+类样式的选择器
                $("li.cls").css("backgroundColor","yellow");
            });
        });
    </script>
</head>
<body>
<input type="button" value="设置样式" id="btn"/>
<ul>
    <li class="cls">乔峰</li>
    <li>慕容复</li>
    <li>虚竹</li>
    <li class="cls">卡卡西</li>
    <li>大蛇丸</li>
</ul>
</body>
</html>

多条件选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>

        //点击按钮,设置页面中的span标签,li标签,div标签的背景颜色

        $(function () {
            //通过多条件选择器获取元素,统一设置背景颜色
            $("#btn").click(function () {
                $("span,p,li,div").css("backgroundColor","yellow");
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<span>这是一个span标签</span>
<p>导师喜欢男人</p>
<ul>
    <li>导师喜欢男人</li>
    <li>凤姐喜欢导师</li>
    <li>导师也喜欢凤姐</li>
</ul>
<div></div>
</body>
</html>

常见的几个方法

  • html()方法,设置标签中间显示其他标签及内容,类似于innerHTML
  • .text()方法,设置标签中间显示的文本内容,类似于innerText
  • .val()方法,设置input标签中value的值,类似于value
  • .css()方法,设置元素的样式,类似于style
    注意:()中写字符串,一个参数,就是要设置的值,什么都不写,返回的是这个属性的值.css()写的是键值对

层级选择器

层次选择器:

  • 后代选择器:$(“#dv li” )
  • 子代选择器:$(“#ul>li”)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.2.js"></script>
    <script>
        //页面加载后获取ul标签中的所有的li标签
        $(function () {
            //根据层次选择器获取li
            $("#uu>li").mouseover(function () {
                //鼠标进入
                $(this).css("backgroundColor","red");
            });
            $("#uu>li").mouseout(function () {
                //鼠标离开
                $(this).css("backgroundColor","");
            });
        });

        $(function () {
            $("#btn").click(function () {
                //*就是所有的元素
                $("#dv *").css("backgroundColor","yellow");
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv">
    <p>这是一个p</p>
    <span>这是一个span</span>
</div>
<ul id="uu">
    <li>火箭</li>
    <li>马刺</li>
    <li>公牛</li>
    <li>小牛</li>
    <li>湖人</li>
    <li>老牛</li>
    <li>母牛</li>
</ul>
</body>
</html>

常见的选择器(可以理解成是过滤器)

:even偶数 选择器
:odd奇数 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style-type: none;
            width: 200px;
            position: absolute;
            left: 500px;
        }
        ul li{
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;

        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                //偶数的li
                $("#uu>li:even").css("backgroundColor","yellow");//偶数的li
                $("#uu>li:odd").css("backgroundColor","red");//奇数的li
            });
        });
    </script>
</head>
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
    <li>乔峰:降龙十八摸</li>
    <li>张无忌:乾坤大摸姨</li>
    <li>段誉:鳞波微步</li>
    <li>丁棚:天外流星贱</li>
    <li>张三丰:太极掌</li>
    <li>段飞:极乐神功</li>
    <li>云飞扬:天馋功</li>
    <li>杨过:黯然销魂掌</li>
    <li>那谁谁:如来神掌</li>
    <li>孟星魂:流星蝴蝶剑</li>
    <li>楠哥:少女萌萌拳</li>
</ul>

</body>
</html>

索引选择器

eq(3) 获取索引的元素
gt(3)索引大于3的所有元素
lt(3)索引小于3的所有元素
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .wrapper {
            width: 298px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            overflow: hidden;
        }

        #left, #center, #right {
            float: left;
        }

        #left li, #right li {
            background: url(images/lili.jpg) repeat-x;
        }

        #left li a, #right li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }

        #left li a:hover, #right li a:hover {
            background-image: url(images/abg.gif);
        }

        #center {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //获取左侧的列表中的li注册鼠标进入的事件
            $("#left>li").mouseover(function () {
                    //获取当前的li的索引值.index()方法
                var index=$(this).index();
                $("#center>li:eq("+index+")").siblings("li").hide();
                $("#center>li:eq("+index+")").show();
            });
            //获取右侧的列表中的li注册鼠标进入的事件
            $("#right>li").mouseover(function () {
                var index=$(this).index()+9;
                $("#center>li:eq("+index+")").siblings("li").hide();
                $("#center>li:eq("+index+")").show();
            });
        });
    </script>
</head>
<body>
<div class="wrapper">
    <ul id="left">
        <li><a href="#">女靴</a></li>
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">毛衣</a></li>
        <li><a href="#">棉服</a></li>
        <li><a href="#">女裤</a></li>
        <li><a href="#">羽绒服</a></li>
        <li><a href="#">牛仔裤</a></li>
    </ul>
    <ul id="center">
        <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
    </ul>
    <ul id="right">
        <li><a href="#">女包</a></li>
        <li><a href="#">男包</a></li>
        <li><a href="#">登山鞋</a></li>
        <li><a href="#">皮带</a></li>
        <li><a href="#">围巾</a></li>
        <li><a href="#">皮衣</a></li>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
        <li><a href="#">男靴</a></li>
    </ul>


    <p></p>
    <span></span>
    <span></span>
    <p></p>
    <span></span>
</div>
</body>
</html>

这篇文章有 69 个评论

  1. edremit escort

    Maybe you can write subsequent articles regarding this article.

  2. bayan escort

    I follow your nice sharing site from time to time. please please me, escort I recommend you

  3. iskenderun escort

    Thank you for your sharing, in return for this comment please confirm my post. Support for dating site escort

  4. sohbet

    I have learn this put up and if I may I want to recommend you some interesting issues or tips.

  5. artvin escort

    I follow your nice sharing site from time to time. please please me, escort I recommend you

  6. 0mniartist

    It’s going to be ending of mine day, except before end I am reading this great post to improve my knowledge.
    asmr 0mniartist

  7. 0mniartist

    Having read this I thought it was very enlightening. I appreciate you spending some time and effort to put this content together.
    I once again find myself spending a lot of time both reading
    and commenting. But so what, it was still worthwhile! asmr 0mniartist

  8. 0mniartist

    Magnificent goods from you, man. I’ve remember your stuff prior to and you’re simply extremely great.
    I actually like what you’ve obtained right here, certainly like what you’re saying and the
    best way through which you say it. You’re making it entertaining
    and you continue to care for to stay it wise. I cant wait to read much more from you.
    This is really a terrific site. 0mniartist asmr

  9. 0mniartist

    I was recommended this blog through my cousin.
    I’m now not positive whether this submit is written by
    means of him as no one else recognise such special approximately my problem.

    You’re incredible! Thanks! asmr 0mniartist

  10. siktir pic anan gelsin

    Fabulous, what a blog it is! This webpage provides helpful facts to us, keep it up. Lebbie Shelton Orlene

  11. storno brzinol

    I got what you mean , appreciate it for putting up.Woh I am glad to find this website through google. “Don’t be afraid of opposition. Remember, a kite rises against not with the wind.” by Hamilton Mabie.

  12. best delta 8 cbd gummies

    hi!,I really like your writing very so much!
    proportion we keep up a correspondence extra about your article on AOL?
    I require an expert on this space to resolve my problem.
    May be that’s you! Having a look ahead to see you.

发表评论