码迷,mamicode.com
首页 > Web开发 > 详细

jQuery相关方法10

时间:2018-06-04 18:23:23      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:remove   ===   包装   pen   rem   mouseover   none   构造函数   opacity   

一、链式编程的原理

    <script>
        //构造函数
        function Person(age){
            this.age=age;
            this.sayHi=function(txt){
                if(txt){
                console.log("你好"+txt);
                return this;//返回的是这个对象,就可以链式编程
                }else{
                    consle.log("hello");
                }
            }
            this.eat=function(){
                console.log("吃大餐");
                return this;
            }
        }
        //实例对象
        var per=new Person(10);
        per.sayHi("谢谢").eat();//你好谢谢   吃大餐
    </script>

二、each方法

  • 每个元素需要做不同的操作的时候,使用each方法,遍历jQuery的对象
  • 语法$(selector).each(function(index,element))
  • each方法就是用来遍历jQuery对象的,但是里面的每个元素最开始是DOM对象,如果要使用jQuery的方法,必须转换为jQuery对象
  • 例:分别把十个li设置成不一样的透明度
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        //每个元素需要做不同的操作的时候,使用each方法,遍历jQuery的对象
        //语法$(selector).each(function(index,element))
        //each方法就是用来遍历jQuery对象的,但是里面的每个元素最开始是DOM对象,如果要使用jQuery的方法,必须转换为jQuery对象
        //例:分别把十个li设置成不一样的透明度
        $(function(){
            $("#uu>li").each(function(index,ele){
                var opacity=(index+1)/10;
                $(ele).css("opacity",opacity);
            });
        });
    </script>
    <ul id="uu">
        <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li>
        <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li>
        <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li>
        <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li>
        <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li>
        <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li>
        <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li>
        <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li>
        <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li>
        <li style="width: 100px;height: 100px;background: red;float: left;margin-right: 5px;list-style: none;"></li>
    </ul>

技术分享图片

三、案例:评分

        *{
            margin: 0;
            padding: 0;
        }
        .comment li{
            list-style: none;
            float: left;
            font-size: 50px;
        }
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $(".comment>li").mouseenter(function(){//进入事件
                //当前的li是实心的,前面的li也是实心的,鼠标后面的里li是空心的
                $(this).text("").prevAll("li").text("").end().nextAll("li").text("");
            }).click(function(){//点击事件
                //做一个记录:为当前点击的五角星添加一个自定义属性和值,并且移除兄弟li的这个属性
                $(this).attr("index","1").siblings("li").removeAttr("index");
            }).mouseleave(function(){//离开事件
                //鼠标离开先把所有的五角星变成空心的
                $(".comment>li").text("");
                //如果有其中一个li是有index这个属性,则改变这个li和他前面的li变成实心五角星
                $(".comment>li[index=1]").text("").prevAll("li").text("");
            });
        });
    </script>
    <ul class="comment">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

技术分享图片

四、多库共存

  • 当多个库同时以$符或者jQuery为命名空间时,那么此时,就会和jQuery的$符号产生冲突。
  • 其实,多库共存就是“$ ”符号的冲突。
  • 利用jQuery的实用函数$.noConflict();这个函数归还$的名称控制权给另一个库,因此可以在页面上使用其他库。
  • 这时,我们可以用"jQuery "这个名称调用jQuery的功能。
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
       var n=$.noConflict();//把$的权利让给了n,$可以在其他变量或者库使用,而n就是jQuery的新的符号了
        var $=10;
        console.log($);//10
        //页面加载事件
        n(function(){
            n("#btn").click(function(){
                console.log("n是新的jQuery符号!!!!");
            });
        });
    </script>
    <input type="button" value="点击" id="btn">

五、包装集

  • 包装集:把很多的DOM对象进行包装,或者是封装----->jQuery对象
  • jQuery对象装换成DOM对象:jQuery对象[0]或者是jQuery对象.get(0)
  • 如果是一个对象集,则[0]换成1,2,3....
  • jQuery中判断这个元素是否存在,就是通过包装集的length属性
  • 例:点击按钮(无论点击多少次),只创建一个p标签
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        $(function(){
            $("#btn").click(function(){
                if($("#p1").length==0){
                    $("<p id=p1>这个一个p</p>").appendTo($("#dv"));
                    console.log($("#p1")[0]);//<p id=p1>这个一个p</p>
                    console.log($("#p1")[1]);//undefined
                    console.log($("#p1").get(0));//<p id=p1>这个一个p</p>
                    console.log($("#p1").get(1));//undefined
                }
            });
        });
    </script>
    <input type="button" value="点击" id="btn">
    <div id="dv" style="width: 200px;height: 200px;background: #ccc;"></div>

技术分享图片

六、获取元素的宽高的不同方法和区别

        *{
            margin: 0;
            padding: 0;
        }
        #dv{
            width: 200px;
            height: 200px;
            border: 10px solid #000;
            margin: 30px;
            padding: 20px;
            background: #ccc;
        }
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            //innerWidth和innerHeight返回元素的宽高,包括内边距
            console.log($("#dv").innerWidth()+"========"+$("#dv").innerHeight());//240========240
            //outerWidth和outerHeight返回元素的宽高,包括内边距和边框
            console.log($("#dv").outerWidth()+"========"+$("#dv").outerHeight());//260========260
            //outerHeight(true)和outerHeight(true)返回元素的宽高,包括内外边距和边框
            console.log($("#dv").outerHeight(true)+"========"+$("#dv").outerHeight(true));//320========320
        });
    </script>
    <div id="dv">这个div宽高200,边框10,内边距20,外边距30</div>

七、jQuery添加方法

  • 如果希望jQuery的对象能够调用某个方法,把方法加入到$.fn中(相当于添加原型)

八、mouseover事件和mouseenter事件的区别

  • mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。
  • mouseenter事件:只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

九、jQuery插件(步骤)

  • 下载
  •  压缩包(js文件,css文件,插件的js文件,index.hmml文件)
  • 创建一个新的文件夹
  •  引入(下载的js文件,css文件,插件的js文件)
  • 把index.html让复制的HTML代码复制到自己的body或者div中
  • 把index.html让复制的jQuery代码复制到自己的script标签中

十、jQuery UI(使用)

  • 引入jQuery UI的css文件
  • 引入jQuery的js文件
  • 引入jQueryUI的js文件
  • 查找和复制jQueryUI中的某个功能的所有代码,包括html,css,js
  • 测试和使用

jQuery相关方法10

标签:remove   ===   包装   pen   rem   mouseover   none   构造函数   opacity   

原文地址:https://www.cnblogs.com/EricZLin/p/9134717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!