jQUery学习

最新推荐文章于 2023-09-22 19:24:25 发布

csdndeidl

最新推荐文章于 2023-09-22 19:24:25 发布

阅读量539

点赞数

文章标签： jquery 学习 javascript

本文链接：https://blog.csdn.net/csdndeidl/article/details/128088108

版权

jQuery基本概念

1、JavaScript库

仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。
**JavaScript库：即 library，是一个封装好的特定的集合(**方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)。

常见的JavaScript库：

jQuery、Prototype、YUI

这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的。

2、jQuery的概念

jQuery是一个快速、简洁的JavaScript 库，其设计的宗旨是“write Less , Do More”，即倡导写更少的代码，做更多的事情。

j就是JavaScript； Query查询;意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。

jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。

学习jQuery本质：就是学习调用这些函数(方法).

jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

3、jQuery的优点

轻量级。核心文件才几十kb，不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
免费、开源

jQuery的基本使用

1、入口函数

<body>
<script>
  //隐藏div
  // $('div').hide()
/* 入口函数：
  等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
  相当于原生js 中的 DOMContentLoaded（等dom主要的元素加载完毕再去执行）。
  不同于原生js 中的 load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。*/
//  1、等着页面dom加载完毕再去执行js代码
  $(document).ready(function (){
    $('div').hide()
  })
//  2、等着页面dom加载完毕再去执行js代码 与上一种功能等价
  $(function (){
    $('div').hide()
  })
</script>
<div></div>
</body>

2、jQuery的顶级对象$

$是 j Q u e r y 的别称，在代码中可以使用 j Q u e r y 代替$ ，但一般为了方便，通常都直接使用$.

$是 j Q u e r y 的顶级对象，相当于原生 J a v a S c r i p t 中的 w i n d o w 。把元素利用$ 包装成jQuery对象，就可以调用jQuery的方法。

<script>
  //1、$是jquery的别称
  /*$(function (){
    alert(11)
  })*/
  jQuery(function (){
    // alert(11)
    //把元素利用$包装成jQuery对象，就可以调用jQuery的方法。
    $('div').hide()
    // jQuery('div').hide()
  })
</script>

3、jQuery对象和DOM对象

<div></div>
<span></span>
<script>
    // 1. DOM 对象：  用原生js获取过来的对象就是DOM对象
    var myDiv = document.querySelector('div') //myDiv是DOM对象
    var mySpan = document.querySelector('span') //mySpan是DOM对象
    console.dir(myDiv)
    // 2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。
    // 本质：通过$把DOM元素进行包装后产生的对象（伪数组形式存储）
    // $('div') //$('div')是一个jQuery对象
    // $('span') //$('span')是一个jQuery对象
    console.dir($('div'))

    // 3. jQuery 对象只能使用 jQuery方法，DOM对象则使用原生的 JavaScirpt 属性和方法
    myDiv.style.display = 'none'
    // myDiv.hide() //myDiv是一个dom对象不能使用 jquery里面的hide方法
    // $('div').style.display = 'none' //这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
</script>

4、jQuery对象和DOM对象相互转换

因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

<video src="mov.mp4" muted></video>
<script>
  //1、DOM对象转换为jQuery对象
  //（1）直接获取视频，得到的就是jQuery对象
  // $('video')
  //(2)已经使用原生js获取过来，dom对象
  var myVideo = document.querySelector('video')
  $(myVideo).play() //转换，用$符号进行封装 jQuery里没有play这个方法
  //2、jQuery对象转换为DOM对象
  // myVideo.play()
  //(1)转换1  数组加索引号
  $('video')[0].play()
  //(2)转换2
  // $('video').get(0).play()
</script>

jQuery常用API

1、jQuery选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。

（1）jQuery基本及层级选择器

$(“选择器”) //里面选择器直接写CSS选择器即可，但是要加引号

名称	用法	描述
ID选择器	$(“#id”)	获取指定id的元素
全选选择器	$(“*”)	匹配所有元素
类选择器	$(“.class”)	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素

jQuery层级选择器

名称	用法	描述
子代选择器	$(“ul>li”)	使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ol>
  <li>我是ol的</li>
  <li>我是ol的</li>
  <li>我是ol的</li>
  <li>我是ol的</li>
</ol>
<ul>
  <li>我是ul的</li>
  <li>我是ul的</li>
  <li>我是ul的</li>
  <li>我是ul的</li>
</ul>
<script>
  //入口函数
  $(function (){
    //括号里双引号，单引号都可以
    console.log($(".nav"))
    console.log($("ul li"))
  })
</script>

（2）jQuery隐式迭代

遍历内部 DOM元素（伪数组形式存储）的过程就叫做隐式迭代。

简单理解∶给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul>
  <li>相同的操作</li>
  <li>相同的操作</li>
  <li>相同的操作</li>
</ul>
<script>
  //1、获取四个div元素
  console.log($("div"))
//  2、给四个div设置背景颜色为粉色  jquery不能使用display设置样式
//  jQuery设置样式： $("div").css("属性",值)
  $("div").css("background","pink")
  // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
  $("ul li").css("color","red")

</script>

（3）jQuery筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素中，选择索引号为偶数的元素

<ul>
  <li>多个里面筛选几个</li>
  <li>多个里面筛选几个</li>
  <li>多个里面筛选几个</li>
  <li>多个里面筛选几个</li>
  <li>多个里面筛选几个</li>
  <li>多个里面筛选几个</li>
</ul>
<ol>
  <li>多个里面筛选几个</li>
  <li>多个里面筛选几个</li>
  <li>多个里面筛选几个</li>
  <li>多个里面筛选几个</li>
  <li>多个里面筛选几个</li>
  <li>多个里面筛选几个</li>
</ol>
<script>
  $(function (){
    $("ul li:first").css("color","red")   //第一个li
    $("ul li:eq(2)").css("color","green")  //第三个li
    $("ol li:odd").css("color","skyblue") //奇数行
    $("ol li:even").css("color","blue") //偶数行
  })
</script>

（4）jQuery筛选方法

语法	用法	说明
parent()	$(“li”).parent	查找父级
children(selector)	$(“ul”).children(“li”)	相当于$(““ul>1i””)，最近—级（亲儿子)
find(selector)	$(“ul”).find(“li”)	相当于$("“ul li”),后代选择器
siblings(selector)	$(“.first”).siblings(“li”)	查找兄弟节点，不包括自己本身
nextAll([expr])	$(“.first”).nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$(“.last”).prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(“div”).hasClass(“protected”)	检查当前的元素是否含有某个特定的类,如果有，则返回true
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”) , index 从0开始

<ol>
  <li>我是ol 的li</li>
  <li>我是ol 的li</li>
  <li class="item">我是ol 的li</li>
  <li>我是ol 的li</li>
  <li>我是ol 的li</li>
  <li>我是ol 的li</li>
</ol>
<ul>
  <li>我是ol 的li</li>
  <li>我是ol 的li</li>
  <li>我是ol 的li</li>
  <li>我是ol 的li</li>
  <li>我是ol 的li</li>
  <li>我是ol 的li</li>
</ul>
<div class="current">俺有current</div>
<div>俺木有current</div>

  <div class="yeye">
    <div class="father">
      <div class="son">儿子</div>
    </div>
  </div>
  <div class="nav">
    <p>我是p</p>
    <div>
      <p>我是div p</p>
    </div>
  </div>
  <script>
    //注意：都是方法，带括号（）
    $(function (){
    //  1、父  parent（） 返回最近一级的父级元素
      console.log($(".son").parent())
    //  2、子
    //  (1)亲儿子：children  类似子代选择器
    //   $(".nav").children("p").css("color","red")
    //  (2)后代：find  可以选择所有的后代，包括儿子孙子  类似后代选择器
      $(".nav").find("p").css("color","orange")
    //  3、兄
    //  （1）兄弟元素siblings 除了自身元素之外的所有亲兄弟
      $("ol .item").siblings("li").css("color","red")
    //  （2）第n个元素
      var index = 2
      $("ul li:eq(2)").css("color","blue") //（1）选择器的方式选择
      $("ul li").eq(index).css("color","green") //（2）选择方法的方式 更推荐
    //  (3)判断类名
      console.log($("div:first").hasClass("current")) //true
      console.log($("div:last").hasClass("current")) //false
    })
  </script>

（5）jQuery的排他思想

<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
  $(function (){
    //1、隐式迭代 给所有的按钮都绑定了点击事件
    $("button").click(function (){
    //  2、当前的元素变化背景颜色
      $(this).css("background","pink")
    //  3、其他的兄弟去除背景颜色  隐式迭代
      $(this).siblings("button").css("background","")
    })

  })
</script>

案例

jQuery得到当前元素索引号$(this).index()

<script>
    $(function (){
        //1、鼠标经过li
        $("#left li").mouseover(function (){
            //2、jQuery得到当前元素索引号$(this).index()
            var index = $(this).index()
            console.log(index)
        //    3、让右边相应的图片显示
            $("#content div").eq(index).show()
        //    4、其他的隐藏
            $("#content div").eq(index).siblings().hide()
        })
    })

</script>

（6）链式编程

为了节省代码量

使用链式编程一定注意是哪个对象执行样式

 <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            //1、隐式迭代 给所有按钮都绑定事件
            $("button").click(function (){
            /*//    2、让当前元素颜色变为红色
                $(this).css("color","red")
            //    3、让其余的兄弟不变色
                $(this).siblings().css("color","")*/
                //链式编程
                $(this).css("color","red").siblings().css("color","")

            /*//    使用链式编程一定注意是哪个对象执行样式
            //    我的兄弟变颜色，我不变
                $(this).siblings().css("color","red")
                //兄弟的父级也就是body变颜色
                $(this).siblings().parent().css("color","red")*/
            })
        })
    </script>

2、jQuery样式操作

（1）操作css方法

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

<div></div>
<script>
  //操作样式之css方法
  $(function (){
   /* //1、参数只写属性名，则返回属性值
    console.log($("div").css("width")) //返回属性值
  //  2、参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
  //   $("div").css("width","300px")
  //   $("div").css("width",300)  //如果是数字可以不用跟单位和引号
    // $("div").css(height,"300px") //报错，属性名必须加引号，不然会报错*/

  //  3、参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，
    $("div").css({
      width:400,
      height:400,
      backgroundColor:"green"
    //  如果是复合属性，则必须采取驼峰命名法，如果值不是数字，则需要加引号
    })
  })
</script>

（2）设置类样式方法

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

<div></div>
<div></div>
<div class="current"></div>
<script>
    $(function() {
    //   1、添加类  addClass（）
        $("div:first").click(function (){
            $(this).addClass("current")
        })
    //    2、删除类 removeClass（）
        $("div:last").click(function (){
            $(this).removeClass("current")
        })
    //    3、切换类  toggleClass（）
    //    通过判断元素有没有这个类，没有的话能添加这个类，元素有的话可以移除类
        $("div:eq(1)").click(function (){
            $(this).toggleClass("current")
        })
    })
</script>

（3）类操作与className区别

原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

<div class="one three"></div>
<script>
    /*var one = document.querySelector(".one");
    one.className = "two";*/
    $(".one").addClass("two");   //这个addClass相当于追加类名 不影响以前的类名
    $(".one").removeClass("three");
</script>

3、jQuery效果

jQuery给我们封装了很多动画效果，最为常见的如下:

**显示隐藏：**show（）、hide（）、toggle（）

**滑动：**slideDown（）、slideUp（）、slideToggle（）

**淡入淡出：**fadeIn（）、fadeOut（）、fadeToggle（）、fadeTo（）

**自定义动画：**animate（）

（1）显示隐藏切换参数

show ( [speed,[easing] , [fn]]）、hide( [speed,[easing] , [fn]]）、toggle( [speed,[easing] , [fn]]）

（1）参数都可以省略，无动画直接显示。
( 2 ) speed :三种预定速度之一的字符串(“slow”, "nomal”, or “fast”)或表示动画时长的亳秒数值(如:1000)。

( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。

( 4 ) fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
    $(function() {
        $("button").eq(0).click(function() {
            $("div").show(1000, function() {
                alert(1);
            });
        })
        $("button").eq(1).click(function() {
            $("div").hide(1000, function() {
                alert(1);
            });
        })
        $("button").eq(2).click(function() {
                $("div").toggle(1000);
            })
            // 一般情况下，我们都不加参数直接显示隐藏就可以了
    });
</script>

（2）滑动效果参数

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

参数内容跟上面一样

<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
    $(function() {
        $("button").eq(0).click(function() {
            // 下滑动 slideDown()
            $("div").slideDown()
        })
        $("button").eq(1).click(function() {
            // 上滑动 slideUp()
            $("div").slideUp(500);
        })
        $("button").eq(2).click(function() {
            // 滑动切换 slideToggle()
            $("div").slideToggle(500);
        });

    });
</script>

（3）事件切换

hover([over,]out)

( 1 ) over：鼠标移到元素上要触发的函数(相当于mouseenter )

( 2 ) out：鼠标移出元素要触发的函数（相当于mouseleave )

<script>
    $(function (){
    /*//    1、事件切换hover 就是鼠标经过和离开的复合写法
        $(".nav li").hover(function (){
            $(this).children("ul").slideDown(200)
        },function (){
            $(this).children("ul").slideUp(200)
        })*/
        //    2、事件切换hover 如果只写一个函数，那么鼠标经过和离开都会触发这个函数
        $(".nav li").hover(function (){
            $(this).children("ul").stop().slideToggle(200)
        })
    })
</script>

（4）动画队列及其停止排队方法

1、动画或效果队列

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

2、停止排队stop

(1 ) stop（）方法用于停止动画或效果。
(2）注意：stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。

<script>
    $(function() {
        // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
        $(".nav>li").hover(function() {
            // stop 方法必须写到动画的前面
            $(this).children("ul").stop().slideToggle()
        });
    })
</script>

（5）淡入淡出效果

**渐进方式调整到指定的不透明度：**fadeTo( [ [speed ] , opacity,[easing] , [ fn]])

( 1 ) opacity透明度必须写，取值0~1之间。

（2）speed必须写，slow、normal、fast

<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div></div>
<script>
    $(function() {
        $("button").eq(0).click(function() {
            // 淡入 fadeIn()
            $("div").fadeIn(1000)
        })
        $("button").eq(1).click(function() {
            // 淡出 fadeOut()
            $("div").fadeOut(1000)
        })
        $("button").eq(2).click(function() {
            // 淡入淡出切换 fadeToggle()
            $("div").fadeToggle(1000)
        });
        $("button").eq(3).click(function() {
            //  修改透明度 fadeTo() 这个速度和透明度要必须写
            $("div").fadeTo(1000,0.5)
        });
    });
</script>

案例

<script>
    $(function (){
    //    鼠标进入时，其他的li标签透明度：0.5
        $(".wrap li").hover(function (){
            $(this).siblings().stop().fadeTo(100,0.5)
        },function (){
            $(this).siblings().stop().fadeTo(100,1)
        })
    //    鼠标离开，其他li透明度改为1
    })
</script>

（6）自定义动画animate

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

( 1 ) **params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。**其余参数都可以省略。

( 2 ) speed :三种预定速度之一的字符串(“slow”, "normal”,or “fast”)或表示动画时长的毫秒数值(如:1000).

( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear"

( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

<button>动起来</button>
<div></div>
<script>
    $(function (){
        $("button").click(function (){
            $("div").animate({
                //需要css有定位
                left:500,
                top:300,
                opacity:0.4,
                width:500
            },500)
        })
    })
</script>

案例

<script type="text/javascript">
    $(function (){
        $(".king li").mouseenter(function (){
            //    1、当前li宽度变为224px，同时里面的小图片淡出，大图片淡入
              //利用链式编程，因为small和big是li的孙子，不是亲儿子，所以用find
           //动画前面加stop防止排队
            $(this).stop().animate({
                width:224
            },100).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn()

            //    2、其余li宽度变为69px，小图片淡入，大图片淡出
            $(this).siblings("li").stop().animate({
                width:69
            },100).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut()
        })
    })
</script>

4、jQuery属性操作

（1）设置或获取元素固有属性值prop（）

所谓元素固有属性就是元素本身自带的属性，比如元素里面的 href，比如元素里面的type.

（2）设置或获取元素自定义属性值attr（）

用户自己给元素添加的属性，我们称为自定义属性。比如给div添加 index = “1”。

（3）数据缓存data（）

data（）方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

<a href="http://www.itcast.cn" title="度挺好">挺好的</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
  $(function (){
  //  1、prop（）
  // （1） 获取属性值  element.prop(”属性名“)
    console.log($("a").prop("href")) //http://www.itcast.cn/
  //  （2）设置属性值  element.prop(”属性“，“属性值”)
    $("a").prop("title","我们都很不好")
    $("input").change(function (){
      console.log($(this).prop("checked"))
    })
    // console.log($("div").prop("index")) //undefined

    // 2. 元素的自定义属性 我们通过 attr()获取或设置
   //（1） 获取自定义属性值  element.attr(”属性名“) 类似于原生getAttribute（）
    console.log($("div").attr("index")) //1
  //（2）设置自定义属性值  element.attr(”属性“，“属性值”) 类似于setAttribute（）
    $("div").attr("index",4)
    //可以得到H5自定义属性data—index
    console.log($("div").attr("data-index")) //2

  //  3、数据缓存 data() 这个里面的数据是存放在元素的内存里面
  // （1） 向span元素附加数据，存在内存里 data（“属性”，“属性值”）
    $("span").data("uname","andy")
    //获取 data（“属性”）
    console.log($("span").data("uname")) //andy
  //  （2）获取H5属性 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
    console.log($("div").data("index")) //2
  })
</script>

5、jQuery内容文本值

主要针对元素的内容还有表单的值操作。

<div>
    <span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
    // 1. 获取设置元素内容 html()   （相当于原生innerHTML）
    console.log($("div").html())
    // $("div").html("123")
    // 2. 获取设置元素文本内容 text()  (相当于原生innerText）
    console.log($("div").text())
    $("div").text("123")
    // 3. 获取设置表单值 val()   (相当于原生value）
    console.log($("input").val())
    $("input").val("123")
</script>

（1）返回指定祖先级元素

<div class="one">
    <div class="two">
        <div class="three">
            <div class="four">我不容易</div>
        </div>
    </div>
</div>
<script>
    console.log($(".four").parent().parent().parent());
    console.log($(".four").parents()); //返回所有父级元素
    console.log($(".four").parents(".one")); //返回指定类名的父级元素
</script>

（2）查找被选中的表单元素

$(“.j-checkbox:checked”).length //小复选框被选中的个数

<script>
//2、当我们每次点击小的复选框按钮，就来判断:
//:checked选择器   :checked查找被选中的表单元素。
$(".j-checkbox").change(function (){
    // 如果小复选框被选中的个数等于3就应该把全选按钮选上，否则全选按钮不选。
    // console.log($(".j-checkbox:checked").length)  //小复选框被选中的个数
    //$(".j-checkbox").length这个是所有小复选框的个数
    if ($(".j-checkbox:checked").length === $(".j-checkbox").length){
        $(".checkall").prop("checked",true)
    }else{
        $(".checkall").prop("checked",false)
    }
})
</script>

（3）保留两位小数方法toFixed（）

    $(".increment").click(function (){
        var n = $(this).siblings(".itxt").val() //得到当前兄弟的文本框的值
        // console.log(n)
        n++
        $(this).siblings(".itxt").val(n)

//    4、修改商品小计
//     核心思路:每次点击+号或者-号，根据文本框的值乘以当前商品的价格就是商品的小计
//     注意1︰只能增加本商品的小计，就是当前商品的小计模块( p-sum )
//    注意2∶当前商品的价格，要把￥符号去掉再相乘截取字符串substr(1)
//        最后计算的结果如果想要保留2位小数通过toFixed(2)方法
//        parents(".p-num")返回指定的祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").html()
        p = p.substr(1)  //当前商品价格p
        var price = (p * n).toFixed(2)
    //    小计模块
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price)
    })

6、jQuery元素操作

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

（1）遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

1）$ ( “div” ) .each (function (index,domEle){ xxx; })

1、each（）方法遍历匹配的每一个元素。主要用DOM处理。each每一个

2、里面的回调函数有2个参数：index是每个元素的索引号; demEle是每个DOM元素对象，不是jquery对象

3、所以要想使用jquery方法，需要给这个dom元素转换为jquery对象、$(domEle)

2）$.each (object , function (index, element){ xxx; })

1、$.each（)方法可用于遍历任何对象。主要用于数据处理，比如数组，对象

2、里面的函数有2个参数: index是每个元素的索引号;element 遍历内容

<div>1</div>
<div>2</div>
<div>3</div>
<script>
    $(function() {
        // $("div").css("color", "red"); //隐式迭代
        // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
        var sum = 0
        // 1. each() 方法遍历元素
        var arr = ["red","green","blue"]
        $("div").each(function (i,domEle){
        //    回调函数第一个参数一定是索引号  可以自定义索引号名称
            console.log(i)
            // 回调函数第二个参数一定是dom元素对象  可自定义名字
            console.log(domEle)
            // domEle.css("color") //dom对象没有css方法
            $(domEle).css("color",arr[i])
            sum += parseInt($(domEle).text())
        })
        console.log(sum)

    //    2、$.each() 方法遍历元素，主要用于遍历数据，处理数据（对象，数组）
        $.each($("div"),function (i,ele){
            console.log(i)
            console.log(ele)
        })
        //遍历数组
        $.each(arr,function (i,ele){
            console.log(i)
            console.log(ele)
        })
        //遍历对象
        $.each({
            name:"andy",
            age:18
        },function (i,ele){
            console.log(i)  //输出的是name age属性名
            console.log(ele)  //输出的是andy、18属性值
        })
    })
</script>

（2）创建添加删除元素

$(“

”); // 动态的创建了一个

<ul>
    <li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
    $(function() {
        // 1. 创建元素
        var li = $("<li>我是后来创建的li</li>");

        // 2. 添加元素
        // (1) 内部添加  内部添加元素,生成之后，它们是父子关系。
        // $("ul").append(li);  内部添加并且放到内容的最后面 类似原生appendChild。
        $("ul").prepend(li); // 内部添加并且放到内容的最前面

        // (2) 外部添加  外部添加元素，生成之后，他们是兄弟关系。
        var div = $("<div>我是后妈生的</div>"); //创建
        $(".test").after(div); //放到目标元素后面
        // $(".test").before(div); //放到目标元素前面

        // 3. 删除元素
        // $("ul").remove(); //可以删除匹配的元素（本身） 自杀
        // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
        $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子 跟empty非常像
    })
</script>

7、jQuery尺寸、位置操作

（1）jQuery尺寸

语法	用法
width() / height()	取得匹配元素宽度和高度值只算 width / height
innerWidth() / innerHeight()	取得匹配元素宽度和高度值包含padding
outerWidth() / outerHeight()	取得匹配元素宽度和高度值包含 padding 、 border
outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值包含padding . borde、margin

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

<div></div>
<script>
    $(function() {
        // 1. width() / height() 获取设置元素 width和height大小 
        console.log($("div").width()); //200
        // $("div").width(300); //修改

        // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
        console.log($("div").innerWidth()); //220

        // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
        console.log($("div").outerWidth(),$("div").outerHeight()); //250

        // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
        console.log($("div").outerWidth(true)); //290
    })
</script>

（2）jQuery位置

位置主要有三个:offset（）. position（）.scrollTop（）/scrollLeft（）

<div class="father">
    <div class="son"></div>
</div>
<script>
    $(function() {
        // 1. offset()  设置或返回被选元素相对于文档的位置（偏移坐标），跟父级没有关系
        console.log($(".son").offset())
        console.log($(".son").offset().top) //获取距离文档顶部的距离
        //设置元素的偏移
        /*$(".son").offset({
            top:200,
            left:200
        })*/
        // 2. position()  获取距离带有定位父级位置（偏移） 如果没有带有定位的父级，则以文档为准
        console.log($(".son").position())
        /*// 这个方法只能获取不能设置偏移  没效果的
        $(".son").position({
            top:200,
            left:200
        })*/

    })
</script>

jQuery被卷曲的头部案例

<div class="back">返回顶部</div>
<div class="container">
</div>
<script>
    $(function() {
        $(document).scrollTop(100) //设置
        // 3、scrollTop()/scrollLeft() 设置或获取元素被被卷去的左侧和头部
        var boxTop = $(".container").offset().top
        // 页面滚动事件
        $(window).scroll(function (){
            // console.log($(document).scrollTop())
            if ($(document).scrollTop() >= boxTop){
                $(".back").fadeIn() //淡入
            }else{
                $(".back").fadeOut() //淡出
            }
        })

        // 带有动画地返回顶部
        //核心原理∶使用animate动画返回]页部。
        // animate动画函数里面有个scrollTop属性，可以设置位置
//但是是元素做动画，所以不写document，写html，body，因此$("body,html").animate({scrollTop: o})
        $(".back").click(function (){
            // $(document).scrollTop(0)
            $("body,html").stop().animate({
                scrollTop:0
            })
        })
    })
</script>

jQuery事件

1、jQuery事件注册

单个事件注册

element .事件(function () {}
$ ("div") . click(function(){事件处理程序})

其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

<script>
  $(function (){
    //1、单个事件注册
   
    $("div").click(function (){
      $(this).css("background","purple")
    })
    $("div").mouseenter(function (){
      $(this).css("background","blue")
    })
  })
</script>

2、jQuery事件处理

（1）事件处理on（）绑定事件

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

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

1、events:一个或多个用空格分隔的事件类型，如"click"或"keydown".

2、 selector:元素的子元素选择器。

3、.fn：回调函数即绑定在元素身上的侦听函数。

优势：

可以绑定多个事件,多个处理事件处理程序。
可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

<div></div>
<ul>
  <li>好孩子</li>
  <li>好孩子</li>
  <li>好孩子</li>
  <li>好孩子</li>
  <li>好孩子</li>
</ul>
<ol>

</ol>
<script>
  $(function (){
    //1、单个事件注册
    /*$("div").click(function (){
      $(this).css("background","purple")
    })
    $("div").mouseenter(function (){
      $(this).css("background","blue")
    })*/
  //  2、事件处理on  on()方法在匹配元素上绑定一个或多个事件的事件处理函数
  //  (1) on可以绑定1个或者多个事件处理程序
    $("div").on({
      mouseenter:function (){
        $(this).css("background","blue")
      },
      click:function (){
        $(this).css("background","purple")
      },
      mouseleave:function (){
        $(this).css("background","skyblue")
      }
    })
    //多个事件执行同样的操作  多个事件中间用空格隔开
    $("div").on("mouseenter mouseleave",function (){
      $(this).toggleClass("current")
    })
  //  （2）on可以实现事件委托（委派）
  //   $("ul li").click()
  //  click是绑定在ul上的，但触发的对象是li
    $("ul").on("click","li",function (){
      alert(11)
    })
  //  （3）on可以给未来动态创建的元素绑定事件
    /*$("ol li").click(function (){
      alert(11)
    })*/
    $("ol").on("click","li",function (){
      alert(11)
    })
    var li = $("<li>我是ol的li</li>")
    $("ol").append(li)
  })
</script>

微博发布案例

<div class="box" id="weibo">
  <span>微博发布</span>
  <textarea name="" class="txt" cols="30" rows="10"></textarea>
  <button class="btn">发布</button>
  <ul>
  </ul>
</div>
<script>
  $(function (){
    //  1、点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中。
    $(".btn").on("click",function(){
      // console.log($(".txt").val())//文本框的值
      var li = $("<li></li>")
      li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
      $("ul").prepend(li)
      li.slideDown(); //li设置了隐藏，做滑动效果显示
      $(".txt").val(""); //发布之后清空文本框
    })
      //  2、点击删除按钮，可以删除当前的微博留言。
      /*$("ul a").click(function() {  // 此时的click不能给动态创建的a添加事件
          alert(11);
      })*/
      //  on可以给动态创建的元素绑定事件
      $("ul").on("click","a",function (){
          //回调函数，等滑动效果完成后删除li
          $(this).parent().slideUp(function (){
              $(this).remove()
          })
      })

  })

</script>

（2）事件处理off（）解绑事件

off()方法可以移除通过on（）方法添加的事件处理程序。

<script>
    $(function() {
        $("div").on({
            click: function() {
                console.log("我点击了");
            },
            mouseover: function() {
                console.log('我鼠标经过了');
            }
        });
        $("ul").on("click","li",function (){
            alert(11)
        })
        // 1. 事件解绑 off
        // $("div").off() //解除div上的所有事件
        $("div").off("click") //解除div上的点击事件
        $("ul").off("click","li") //解除事件委托
    //    2、one()跟on()基本一致，但只能触发一次
        $("p").one("click",function (){
            alert(11)
        })
    })
</script>

（3）自动触发事件 trigger（）

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

<script>
    $(function() {
        $("div").on("click",function (){
            alert(11)
        })
        $("input").on("focus",function (){
            $(this).val("你好")
        })
        //自动触发事件
    //    1、元素.事件（）触发
    //     $("div").click()
    //    2、元素.trigger（“事件”）
        $("div").trigger("click")
        // $("input").trigger("focus")
    //    3、元素.triggerHandler("事件")  区别：不会触发元素的默认行为
    //     $("div").triggerHandler("click")
        //不会触发光标的默认行为，这里也就是光标不会闪烁
        $("input").triggerHandler("focus")
    });
</script>

3、jQuery事件对象

事件被触发，就会有事件对象的产生。

element.on (events,[selector] , function (event) {})

阻止默认行为：event.preventDefault（）或者return false
阻止冒泡：event.stopPropagation（）

<script>
    $(function() {
        $(document).on("click", function() {
            console.log("点击了document");
        })
        //event就是事件对象
        $("div").on("click", function(event) {
            // console.log(event);
            console.log("点击了div");
            //阻止冒泡
            event.stopPropagation()
        })
    })
</script>

jQuery其他方法

1、jQuery对象拷贝

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用**$.extend ()**方法

$.extend ( [deep], target, object1,[objectN])

1、deep：如果设为true为深拷贝，默认为false 浅拷贝

2、 target：要拷贝的目标对象

3、object1：待拷贝到第一个对象的对象。

4、objectN：待拷贝到第N个对象的对象。

5、浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。

6、深拷贝，前面加true，完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被可拷贝对象。

<script>
    $(function() {
        //1、要拷贝的对象没有内容
        /*var targetObj = {}
        var obj = {
            id:1,
            name:"andy"
        }
        //把obj拷贝给targetObj
        // $.extend(target,obj)
        $.extend(targetObj,obj)
        console.log(targetObj)*/
        //2、要拷贝的对象有内容 会覆盖targetObj里面原来的数据
        /*var targetObj = {
            id:0
        }
        var obj = {
            id:1,
            name:"andy"
        }
        //把obj拷贝给targetObj
        // $.extend(target,obj)
        $.extend(targetObj,obj)
        console.log(targetObj) //会覆盖targetObj里面原来的数据*/
        //3、数据比较复杂--浅拷贝
        var targetObj = {
            id:0, //冲突，会被覆盖
            num:0, //不冲突，保留
            msg: {
                sex:"男" //冲突，被覆盖
            }
        }
        var obj = {
            id:1,
            name:"andy",
            msg:{
                age:18
            }
        }
        //把obj拷贝给targetObj
        // $.extend(target,obj)
        /*$.extend(targetObj,obj)
        console.log(targetObj) //会覆盖targetObj里面原来的数据
        //浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
        targetObj.msg.age = 20
        console.log(targetObj)
        console.log(obj)*/

    //    3、深拷贝 修改目标对象不会影响被拷贝对象。
        $.extend(true,targetObj,obj)
        console.log(targetObj) //会覆盖targetObj里面原来冲突的数据
        targetObj.msg.age = 20
        console.log(targetObj) //msg:{sex: '男', age: 20}
        console.log(obj) //不会被影响 age：18
    })
</script>

2、jQuery多库共存

问题概述：

jQuery使用 $作为标示符，随着 j Q u e r y 的流行, 其他 j s 库也会用这$ 作为标识符，这样一起使用会引起冲突。

客观需求：

需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。

解决方案：

1、把里面的$符号统一改为jQuery。比如 jQuery(“div”")

2、jQuery变量规定新的名称：$.noConflict() var xx = $.noConflict();

<div></div>
<span></span>
<script>
    $(function() {
        function $(ele){
            return document.querySelector(ele)
        }
        console.log($("div"))
        //1、如果$符号冲突，就使用jQuery
        jQuery.each()
        //2、让jQuery释放对$控制权  让用户自定义$命名
        var suibian = jQuery.noConflict()
        console.log(suibian("span"))
        suibian.each()
    })
</script>

3、jQuery插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。

注意:这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。

jQuery插件常用的网站：

1、jQuery插件库： https://www.jq22.com/

2、jQuery之家：http://www.htmleaf.com/

jQuery插件使用步骤:

1、引入相关文件。(jQuery文件和插件文件)

2、复制相关html、css、js (调用插件)。

（1）瀑布流

（2）图片懒加载（插件）

图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载

当页面滑动到可视区域，再显示图片

将所有的<img src= 替换成<img data-lazy-src=

我们使用jquery插件库EasyLazyload。注意，此时的js引入文件和js调用必须写到DOM元素(图片）最后面

（3）全屏滚动（fullpage.js）

中文翻译网站：https://www.dowebok.com/demo/2014/77/

（4）bootstrap JS插件

bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件。

csdndeidl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQUery学习

仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。**JavaScript库：即 library，是一个封装好的特定的集合(**方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)。
复制链接

扫一扫