jQuery

最新推荐文章于 2024-05-07 11:07:47 发布

一麻袋小猫

最新推荐文章于 2024-05-07 11:07:47 发布

阅读量228

点赞数

分类专栏： jQuery JavaScript 文章标签： jquery javascript

本文链接：https://blog.csdn.net/Zmongo/article/details/104630335

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

jQuery概述
（1）Javascript 库
即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是
在这个库中，封装了很多预先定义好的函数在里面，比如动画animate,hide,show，比如获取元素等。
简单理解：就是一个JS文件，里面对我们原声js代码进行了封装，存放到里面。这样我们可以快速高效的使用，这些封装好的功能了。
当然我们自己封装比较麻烦，就有人专门给我们封装了各种js库。
比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）

这些库都是对原声javascript的封装，内部都是用JavaScript实现的，我们主要学习的是jQuery
jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less, Do More”,即倡导写更少的代码，做更多的事情。
j就是javascript；Query查询：意思是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
jQuery封装了JavaScript常用的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。
下载：https://jquery.com/
jQuery的入口函数：
1. $(document).ready(function() {
  $(‘div’).hide();
  })
2. 更喜欢这种方法
  $(function() {
  $(‘div’).hide();
  })
  等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
  1,2 相当于原声js中的DOMContentLoaded
  不同于原声js中的load事件是等页面文档，外部的js文件，css文件，图片加载完毕才执行内部代码。
jQuery的顶级对象 $
‘ $^{'} 是 j Q u e r y 的别称，在代码中可以使用 j Q u e r y 代替^{'}$ ’,但一般为了方便，通常用$.
$是 j Q u e r y 的顶级对象，相当于原声 j s 中的 w i n d o w 。把元素利用$ 包装成jQuery对象，就可以调用jQuery的方法。
jQuery对象和DOM对象
1. 用原生js获取过来的对象就是DOM对象
2. 用jQuery方法获取的元素就是jQuery对象
3. jQuery对象本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）
4. jQuery对学习只能使用jQuery方法，DOM对象则使用原声的JavaScript属性和方法
DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装。要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
1. DOM对象转换为jQuery对象：$(DOM对象)
2. jQuery对象转换为DOM对象：
  $(‘div’)[index] index是索引号
  $(‘video’)[0].play();
  $(‘div’).get(index) index是索引号
  $(‘video’).get(0).play();

jQuery常用API

jQuery基础选择器
隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作方便我们调用。
$(“div”).css(“background”, “pink”);
//隐士循环就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css方法

隐式迭代，得到当前li 的索引号

$("#left li").mouseover(function(){
                //得到当前li 的索引号
                var index = $(this).index();

            })

筛选选择器
筛选方法（重点）
$(this) jQuery当前元素 this不要加引号
show() 显示元素方法
hide() 隐藏元素方法

$(function() {
            //鼠标经过
            $(".nav>li").mouseover(function() {
                // jQuery里面的当前元素
                $(this).children("ul").show();
            });
            $(".nav>li").mouseout(function() {
                $(this).children("ul").hide();
            })
        })

隐式迭代的优点：给亲儿子进行迭代循环，不需要for

siblings 兄弟元素除了自身元素之外的所有亲兄弟
排他思想
想要多选一的效果，就用排他思想
tab栏切换思路

$(function(){
            $("#left li").mouseover(function(){
                //得到当前li 的索引号
                var index = $(this).index();
                $("#content div").eq(index).show();
                $("#content div").eq(index).siblings.hide();
            })
        })