jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

发布时间:2022-07-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

jQurey 的概念

jqurey 是一个快速简洁的JavaScript库 设计的总之能是 写更少的代码 做更多的事情

j 就是JavaScript 、Qurey 查询 意思就是查询js 把js 中的dom操作做了封装 我们可以快速的查询使用里面的功能 jQurey 封装了JavaScript常用的功能代码 优化了dom 的操作事件处理 动画设计和Ajax 交互

jQurey 的入口函数

     1 等着页面 DOM 加载完毕再去执行js代码
     $(document).ready(function(){
        $('div').hide();
     })
   
     2.等着页面 DOM 加载完毕再去执行js代码

    $(function(){
        $('div').hide()
    })

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jquery对象和DOM对象

jQuery对象和DOM对象之间是可以相互转换的 因为js原生比jQuery更大 原生的一些属性和方法jQuery没有给我们封装 要使用这些方法和属性 需要吧jQuery对象转换为DOM对象才能使用

  • DOM 对象转换为jQuery对象
  • $('DOM’对象)
  • jQuery 对象转换为DOM
  • $(‘div’)[index] index是索引号
  • $(‘div’).get(index)index是索引号

jQuery 常用API

jQuery 基础选择器

原生JS 获取元素的方法很多很杂 且兼容情况不一致 因此jQuery给我们做了一些封装 获取元素统一标准

  • $( " 选择器") 里面选择器直接写css选择器即可 但是要加引号

    jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jQuery 层级选择器

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

<body>
    <div class="nav"> nav /div </div>
    <div>   divvvvvv</div>
    <ul>
        <li> ul  li  </li>
        <li>  ul  li </li>
        <li> ul li</li>
    </ul>
    <ol>
        <li>ol /li </li>
        <li>ol /li </li>
        <li>ol /li </li>
    </ol>
    <script>
        $(function(){
            console.log($('.div'));
            console.log($("ul li"));
        })
    </script>
</body>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

隐式迭代

遍历内部DOM元素(伪数组形式储存)的过程叫做 隐式迭代 简单理解 在匹配到所有元素进行循环遍历 执行相应的方法 而不用我们在进行循环 简化我们的操作 方便调用

<body>
    <div> surprise</div>
    <div> surprise</div>
    <div> surprise</div>
    <div> surprise</div>
    <ul>
        <li>surprise 1</li>
        <li>surprise 1</li>
        <li>surprise 1</li>
        <li>surprise 1</li>
    </ul>
    <script>
        $("div").css("background","pink")    
        $("ul li ").css("color",'red')  
    </script>
</body>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

筛选选择器

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

<body>
    <ul>
        <li>ul li 1</li>
        <li>ul li 2</li>
        <li>ul li 3</li>
        <li>ul li 4</li>
        <li>ul li 5</li>
    </ul>
    <ol>
        <li>ol li 1</li>
        <li>ol li 2</li>
        <li>ol li 3</li>
        <li>ol li 4</li>
        <li>ol li 5</li>
    </ol>
    <script>
        $(function(){
            $('ul li:first').css('color','red')
            $('ul li:eq(3)').css('color','red')  
            $('ol li:odd').css('color','red')
            $('ol li:even').css('color','blue')
        })
    </script>
</body>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jQuery 筛选方法

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

<body>
    <div class="yey">
        yeye
      <div class="bab">
          babb
         <div class="erz">
             erz

         </div>
     </div>
    </div>
    <div class="nav">
        <p> P </p>
        <div>
            <p>  sp</p>
        </div>
    </div>
    <script>
        // 以下都是方法 都带括号
        $(function(){
            // 父级 parent() 返回的是最近一级的父级
            console.log( $('.erz').parent());   
            // 子级 children() 亲儿子级  类型子代选择器 ui> li
            // $('.nav').children('p').css('color','red')
            // 可以选择 所以的 子级 find() 类似于后代选择器
            $('.nav').find('p').css('color','blue')
        })
    </script>
</body>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jquery 案例 下拉菜单 HTML+css+jquery

<script src="jQuery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        li {
            list-style-type: none;
        }        
        a {
            text-decoration: none;
            font-size: 14px;
        }        
        .nav {
            margin: 100px;            
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 40px;
            text-align: center;
        }        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 40px;
            color: #333;
        }        
        .nav>li>a:hover {
            background-color: #eee;
        }        
        .nav ul {
            display: none;
            position: absolute;
            top: 40px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#"> 李白</a>
            <ul>
                <li> <a href="#">刺客</a></li>
                <li> <a href="#">打野</a></li>
                <li> <a href="#">突进</a></li>
            </ul>
        </li>
    <script>
        $(function(){
            // 鼠标经过
            $('.nav>li').mousemove(function(){
                // $(this) jQuery 当前元素 this不加引号
                // show()显示元素 hide()隐藏元素
                $(this).children('ul').show();
            })
            // 鼠标离开
            $('.nav>li').mouseout(function(){
                // $(this) jQuery 当前元素 this不加引号
                // show()显示元素 hide()隐藏元素
                $(this).children('ul').hide();
            })        
        })
    </script>
</body>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jQuery 排他思想

想要多选一 的效果 排他思想:当前元素设置样式 兄弟元素清楚样式

    <script src="jQuery.min.js"></script>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
        $(function(){
            $("button").click(function(){
                $(this).css("background","skyblue");
                $(this).siblings("button").css("background","")
            })
        })
    </script>
</body>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

链式编程

链式编程是为了节省代码量 使代码看起来更优雅

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
        $(function(){
            // $("button").click(function(){
            //     $(this).css("background","skyblue");
            //     $(this).siblings("button").css("background","")
            // })
                   // 链式编程
            $(this).css("background","skyblue").sibling("button").css("background","")
        })

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jQuery 样式操作 …操作CSS方法

jQuery 可以使用css方法 修改简单元素样式 也可以操作类 修改多个样式

  • 只写属性名 则返回的是属性值 $(this).css( " 属性名")
  • 参数 是 属性名 属性值 逗号分隔 是设置一组样式 属性必须加引号 如果是数字 可以不用加引号和单位 … $( this).css(“属性名”,“属性值”)
  • 参数可以是对象形式 方便设置多组样式 属性值和属性名 冒号隔开 非数字必须加引号
<style>
        div{
            width: 100px;
            height: 100px;
            margin: 100px auto;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $(function(){
            //只写属性名 则返回的是属性值
           console.log( $("div").css("width")); 

            // 写属性名 和属性值  逗号隔开属性必须加引号
            // $("div").css("width","200px")

            // $("div").css("width",200)  //  属性值可以不用加引号

            // 参数可以是对象形式 方便设置多组样式 属性值和属性名 冒号隔开 非数字必须加引号
            $("div").css({
                width:200,
                height:200,
                backgroundColor:"skyblue"  // backgroundColor 使用驼峰命名法
            })
        })
    </script>
</body>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

设置类样式方法

作用等同于以前的的classList 可以操作类样式 注意里面的参数不要会加点

  • 1 添加类 $("div).addClass("类名”)
  • 2 移除类 $('div).removeClass("类名”)
  • 3 切换类 $('div).toggleClass("类名”)
 <style>
        div{
            width: 150px;
            height: 150px;
            background-color: orange;
            margin: 100px auto;
            transition: all 0.8s;
        }
        .nav{
            
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div ></div>
    <script>
        $(function(){

            // 1 添加类  addClass(“ ”)
            // $("div").click(function(){
            //     $(this).addClass("nav")
            // })

            // 2 删除类 removeClass(" ")
            // $("div").click(function(){
            //     $(this).removeClass("nav")
            // })

            // 3 切换类 toggleClass(" ")
            $("div").click(function(){
                $(this).toggleClass("nav")
            })
  
               
        })
    </script>
</body>

jQuery 效果

jquery给我们封装了了很多动画效果

  • 显示和隐藏 show()显示 hide() 隐藏 toggle()切换
  • 滑动 slideDown() slideUp() slideToggle()
  • 淡入淡出 fadeIn() fadeOut() fadeToggle() fadeTo()
  • 自定义动画 animate()

显示和隐藏效果

显示语法规范

   show([speed,[easing],[fn]]

显示参数

  • 参数可以省略 无动画效果 直接显示
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
  • easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
  • fn:在动画完成时执行的函数,每个元素执行一次。

隐藏语法规范

   hide([speed,[easing],[fn]])

显示参数

  • 参数可以省略 无动画效果 直接显示
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
  • easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
  • fn:在动画完成时执行的函数,每个元素执行一次。
<script src="jQuery.min.js"></script>
    <style>
        div{
            width: 150px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <button> 隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function(){
            // button 索引号为1 的 点击事件
            $("button").eq(1).click(function(){
                $("div").hide(1000,function(){//点击后 div 1000毫秒(1秒)隐藏  在执行回调函数
                    alert(123)
                } )   
            })
            $("button").eq(0).click(function(){
                $("div").show(1000,function(){//点击后 div 1000毫秒(1秒)显示  在执行回调函数
                    alert(456)
                } )   
            })
            $("button").eq(2).click(function(){
                $("div").toggle(1000,function(){//点击后 div 1000毫秒(1秒)切换 在执行回调函数
                    alert(789)
                } )   
            })

        })
    </script>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

滑动效果及事件切换

语法规范

 slideDown([speed],[easing],[fn])

显示参数

  • 参数可以省略 无动画效果 直接显示
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
  • easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
  • fn:在动画完成时执行的函数,每个元素执行一次。
 <style>
        div{
            display: none;
            width: 150px;
            height: 300px;
            background-color: skyblue
        }
    </style>
</head>
<body>
    <button>下拉滑动</button>
    <button> 上拉滑动</button>
    <button>切换滑动 </button>
    <div></div>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").slideDown(1000)  // 下滑动
            })
             $("button").eq(1).click(function(){
                $("div").slideUp(1000)  // 上拉滑动
                
            })
             $("button").eq(2).click(function(){
                $("div").slideToggle(1000) // 切换
            })
        })
    </script>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

事件切换

       hover([over,]out)
  • over:鼠标移到元素上要触发的函数
  • out:鼠标移出元素要触发的函数
 $(".nav > li").hover(function(){  // 鼠标经过和离开
                $(this).children("ul").slideToggle()
            })  
        })

动画或效果队列

动画或效果一旦触发 就会执行 如果多次快速触发 就会造成多个动画或效果排队执行

停止排队

stop() 用于停止动画 一定要加到动画前面 相当于停止上一次动画

$(".nav > li").hover(function(){  // 鼠标经过
                $(this).children("ul").stop().slideToggle() // stop 停止动画 必须加到动画前面
            })  

淡入和淡出

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。 语法:

   fadeTo([[speed],opacity,[easing],[fn]])
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
  • opacity:一个0至1之间表示透明度的数字。
  • easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
 <script src="jQuery.min.js"></script>
    <style>
        div{
            display: none;
            width: 200px;
            height: 400px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>淡入</button>
    <button>淡出 </button>
    <button>切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").fadeIn(1000)    // 淡入
            })
            $("button").eq(1).click(function(){
                $("div").fadeOut(1000)    //淡出
            })
            $("button").eq(2).click(function(){
                $("div").fadeToggle(1000)   // 切换
            })
            $("button").eq(0).click(function(){
            // 时间和透明度必须要写
                $("div").fadeTo(1000,0.5)    // 修改透明度
            })
        })
    </script>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

淡入淡出 练习 高亮显示

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

<body>
    <div class="nav">
        <ul>
            <li><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
            <li><img src="images/03.jpg" alt=""></li>
            <li><img src="images/04.jpg" alt=""></li>
            <li><img src="images/05.jpg" alt=""></li>
            <li><img src="images/06.jpg" alt=""></li>
        </ul>
    </div>
    <script>
        $(function(){
            // 第一个function 是鼠标经过 第二个是鼠标离开
            $(".nav li").hover(function(){
                 //siblings 查找兄弟节点不包括自己本身 除自己外其他兄弟节点透明降的到50%
                $(this).siblings().stop().fadeTo(200,0.5)    //停止动画排队
            },function(){
                $(this).siblings().stop().fadeTo(200,1);  
            }) 
        })
    </script>
</body>

自定义动画

语法

  animate(params,[speed],[easing],[fn])

参数

  • params:一组包含作为动画属性和终值的样式属性和及其值的集合
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
  • easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
  • fn:在动画完成时执行的函数,每个元素执行一次。

params 想要更改的样式呢属性 以对象形式传递 必须写 属性名可以不用带引号 注意:所有指定的属性必须用骆驼形式 其他参数可以省略

案例 自定义+淡入淡出

<script src="jQuery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .nav{
            margin: 100px auto;
            width: 800px;
            height: 69px;
            background: url(images/bg.png)no-repeat;
            padding-left: 10px;
        }
        img{
            display: block;
        }
        .nav ul {
            overflow: hidden;
        }
        .nav ul li{
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        .nav .current{
            width: 224px;
        }
        .small{
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
        }
        .big{
            width: 224px;
            display: none;
        }
        .current .big{
            display: block;
        }
        .current .small {
            display: none;
        } 

    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li class="current"> 
                <a href="#">
                    <img src="images/c.png" alt="" class="big">
                    <img src="images/c1.jpg" alt="" class="small">  
                </a>
            </li>
        </ul>
    </div>
    <script>
       $(function() {
            // 鼠标经过某个小li 有两步操作:
            $(".nav li").mouseenter(function() {
                // 1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })



        });
    </script>
</body>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

设置或获取元素固有属性值(prop)

元素固有属性就是元素本身自带的属性 比如< a > 元素里面的 href < input > 里边的 type 获取语法:

prop(“属性”)

设置属性语法:

prop(“属性”,“属性值”)
<body>
    <a href="http://www.baidu.com"   title="固定属性">固定属性 prop</a>
    <script>
        $(function(){
            // 获取固定属性 prop( )
           console.log($("a").prop("href")); 
           $("a").prop("title","设置固定属性")

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

设置或获取元素自定义属性 attr()

用户自己给元素添加的属性 称为自定义属性 比如 给div 添加index= “1” 获取属性语法:

attr (“属性”) // 类似于原生getAttribute()

设置属性语法:

 attr(“属性”,“属性值”) // 类似原生setAttribute()
<div index = "1">自定义属性 attr</div>
			 //    自定义属性 attr()
           console.log($("div").attr("index"));    //  获取自定义属性
         $("div").attr("index","8");  // 修改自定义属性

        })

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

数据缓存 data()

data() 方法可以在指定的元素上 存取数据 并不会修改DOM元素结构 一旦页面刷新 之前存放的数据将被移除 附加数据语法:

 data(“name”,“value“)  // 被选元素添加数据

获取数据语法:

data(“name”)    // 向被选元素 获取数据

同时还可以读取HTML5 自定义属性 date-index 得到的是数字型

  <span data-index="2"> 123</span>
  
   //    数据缓存 data()
            $("span").data("uname","red")
            console.log($("span").data("uname"));
            console.log($("span").data("index")); // 获取H5自定义属性 得到的是数字型
        })

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

:checked 选择器

:checked 查找被选中的表单元素 全选按钮 案例

<body>      
    <div>
        <input type="checkbox" name="" id="" class="all"> 全选
    </div>
    <div>
        <input type="checkbox" name="" id="" class="add"> 单选
    </div> 
    <div>
        <input type="checkbox" name="" id="" class="add"> 单选
    </div>  
    <div>
        <input type="checkbox" name="" id="" class="add"> 单选
    </div> 
    <div>
        <input type="checkbox" name="" id="" class="add"> 单选
    </div> 
    <div>
        <input type="checkbox" name="" id="" class="all"> 全选
    </div>

        <script>
            $(function(){
                $(".all").change(function(){
                    // console.log($(this).prop("checked"));  打印检查 得到 true false

                    // 核心思路:当全选按钮发生改变时 拿到全选按钮的状态 false 或true 判定是否选中

                    // 然后把拿到的状态赋值给单选按钮 同时让另外一个全选按钮一起发生变化

                    $(".add,.all").prop("checked",$(this).prop("checked") )
                });
                $(".add").change(function(){
                    // 被选中的单选复选框的个数
                    // console.log($(".add:checked").length); 打印查看

                    //  $(".add").length) 是所有单选复选框的个数
                    
                    // :checked返回几个复选框被选中
                    if($(".add:checked").length === $(".add").length){

                        $(".all").prop("checked",true)
                    }else{
                        $(".all").prop("checked",false)

                    }
                })
            })
        </script>
</body>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jQuery 内容文本值

普通元素内容html() 相当于原生inner HTML 语法:

html()                 //  获取元素内容 包含标签
html( "内容")         // 设置元素内容

普通元素内容text() 语法:

text()                 //  获取元素内容 不包含标签
text( "内容")         // 设置元素内容

获取设置表单值 val() 语法:

val()                 //  获取表单值
val( "内容")         // 设置修改表单值
<body>
    <div>
        <span>132</span>
    </div>
    <input type="text" value="请输入">
    <script>
        $(function(){
            // 获取设置元素内容 HTML()
            console.log($("div").html());  // <span>132</span> 带有标签 
            $("div").html("修改内容")

            // 获取设置元素文本内容 text()
            console.log($("div").text());  // 只有内容 没有标签
            $("div").text("text修改内容")

            // 获取设置表单值 val()
            console.log($("input").val());  // 获取表单值
            $("input").val("请输入内容");  // 修改表单值

        })
    </script>
</body>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

jQuery 元素操作

主要遍历、创建、添加、删除元素操作

遍历元素

jQuery 隐式迭代是对同一类元素做来了同样的操作 如果想对同一类元素做不同的操作 就需要遍历 语法1:

 $("div") .each(function( index,domEle ){xxx;}
  • each()方法 遍历匹配每一个元素 主要用DOM 处理 each 每一个
  • 里面的回调函数有两个参数 index是每个元素的索引号 domEle 是每个DOM元素对象 不是jQuery对象
  • 想要使用 jQuery方法 需要给这个dom 元素转换为jQuery 对象$(domEle)
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function(){
            var num = 0
            var arr = ['red','blue','pink' ]
            
            // each() 方法遍历 元素
            $("div").each(function( i,domEle){
                // 回调函数的第一个参数一定索引号 可以是自己指定索引号名称
                console.log(i);
                // 回调函数的第二个参数 一定是dom元素对象
                console.log(domEle);
                $(domEle).css('backgroundColor',arr[i])
               
                num += ($(domEle).text())-0   // -0 隐式转换为数字型 也可以用parseInt
            })
            console.log(num);
            
        })
    </script>
</body>

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

语法2:

$.each(对象,function( index,element){xxx}
  • $.each () 方法可用于遍历任何对象 主要用于数据处理 比如数组 、对象
  • 里面有两个参数 index是索引号、element是遍历内容
 $.each(arr,function( i,exe){    // 遍历数组
                console.log(i);
                console.log(exe);
            })

            $.each({          // 遍历对象
                name:'Angle',
                age:'22'
            },function( i,exe){
                console.log(i);  //输出的是属性名
                console.log(exe); // 输出的是属性值
            })
            

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

创建 添加 删除 元素

  • 创建元素 $("< li > 创建元素< / li>")
  • 添加元素 内部添加 内部添加 element.append(“内容”) 内部添加 并且放到内容最后面 内部添加 element.prepend(“内容”) 内部添加 并且放到内容最前面
  • 外部添加 element.after(“内容”) 把内容放到目标元素后面 element.before(“内容”)把内容放到目标元素前面
  • 删除元素 element.remove() 删除匹配的元素本身 element.empty 删除匹配的元素集合所有的子节点 element(“”) 清空匹配的元素内容

jQuery 尺寸

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

  • 参数为空 则是获取相应的值 返回的是数字型
  • 如果参数为数字 则是修改相应的值 可以不用写单位

jQuery 位置

位置主要有三个:offset()、position()、scrollTop()/scrollLeft()

  • offset ()设置或获取元素偏移 offset()方法 设置或返回被选元素相对于文档的偏移坐标 跟父级没有关系 有两个属性 left 、top ,offset().top 用于获取距离文档顶部的距离,offset().left用于获取距离文档左侧的距离 可以设置元素偏移量offset({top:10;left:10})

  • position()获取带有定位父级位置 (偏移)如果父级没有定位则以文档为准 这个方法只能获取不能设置偏移

  • scrollTop()/scrollLeft() 设置被卷去的头部和左侧

jQuery 事件处理

事件处理 on()绑定事件 on()方法在匹配元素上绑定一个或多个事件处理函数 语法:

element.on(events,[selector],fn )

events一个或多个用空格分割的事件类型 selector 元素的 子元素选择器 fn 回调函数 绑定在元素身上的侦听函数

.nav{
            background-color: purple;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $(function(){
            // 事件处理 on()
            // $("div").on({
            //     mouseover:function(){
            //         $(this).css("background", "red")
            //     },
            //     mouseout:function(){
            //         $(this).css("background", "pink")
            //     },
            //     click:function(){
            //         $(this).css("background", "green")
            //     }
            // })
            $("div").on("mouseover mouseout",function(){   // 添加类名  用空格隔开
                $(this).toggleClass("nav") 
            })
        })
    </script>
</body>

事件解绑 off()

在选择元素上移除一个或多个事件的事件处理函数。

off(events,[selector],[fn])
  • events:一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", “keydown.myPlugin”, 或者 “.myPlugin”.

  • selector:一个最初传递到.on()事件处理程序附加的选择器。

  • fn:事件处理程序函数以前附加事件上,或特殊值false.

  • $(“p”).off() 解绑P元素所有事件处理程序

  • $(“p”).off( “click” ) 解绑P元素上的点击事件

  • $(“ul”).off(“click”,“li”); 解绑事件委托

如果事件 只想触发一次 可以使用one()来绑定事件

one(type,[data],fn)    绑定一个一次性的事件处理函数。
  • type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。

  • data:将要传递给事件处理函数的数据映射

  • fn:每当事件触发时执行的函数。

自动触发事件

element.click() 第一种简写形式 element.trigger(“type” ) 第二种自动触发模式 type:一个事件对象或者要触发的事件类型

jquery 对象拷贝

如果想要把某个对象拷贝(合并)给另外一个对象使用 可以用$.extend()方法 语法: $.extend([deep], target, object1, [objectN])

  • deep 如果设置为true 为深拷贝 默认false 浅拷贝
  • target :要拷贝 的目标对象
  • object1:待拷贝的第一个对象的对象
  • 浅拷贝就是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象 修改目标对象会影响被拷贝对象
  • 深拷贝 把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性 会合并到一起

jQuery 插件

jQuery之家:http://www.htmleaf.com/ jQuery库:https://www.jq22.com/ 使用步骤 : 下载插件 引入相关文件 jQuery文件和插件文件 复制HTML css js 调用插件

jQuery API 查询网站

https://jquery.cuishifeng.cn/index.html

jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

脚本宝典总结

以上是脚本宝典为你收集整理的jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站全部内容,希望文章能够帮你解决jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: