jQuery 对象与操作

分手后的思念是犯贱 2024-04-18 23:55 60阅读 0赞

js缺点：

1、 查找元素麻烦。  
2、元素要一个一个操作，遍历通常要嵌套很多for循环

3、有兼容性问题。

4、想要实现简单的动画效果，也很麻烦

5.代码冗余。

6、事件会覆盖

优点：  
1、查找元素的方法多种多样，非常灵活  
2、拥有隐式迭代特性，因此不再需要手写for循环

3、完全没有兼容性问题。  
4.实现动画非常简单，而且功能更加的强大。

5.代码简单、粗暴

6、事件不会覆盖

区别联系：jq执行顺序比js执行顺序早，因为jq入口函数执行比window.onload早

jq等待页面加载完成后执行，但不会等待函数

js等待页面与图片都加载完成后才会执行。

**jQuery学什么**  
学习如何使用jQuery，其实就是学习jQuery封装好的一些功能方法，这些方法叫做API（Application Programming Interface应用程序编程接口）。jQuery就是一个js库，把常用的方法封装到一个单独的js文件，如common.js

这些API的共同特点是：几乎全都是方法。

所以，在使用时，都是方法调用，要加小括号()，小括号里面是相应的参数，参数不同，功能不同。

**版本：**

jQuery2.0 3.0 不支持IE678浏览器 ，要支持使用1.0版本。

使用步骤： 引入jq文件   入口函数  实现功能函数

**入口函数：**

一、$(document).ready(function ()\{           \}) ;

二、$(function ()\{   \});

jQuery入口函数与JS入口函数的区别：  
区别1：书写个数不同                 JS入口函数只能出现一次，出现多次会存在事件覆盖的问题。

jQuery的入口函数，可以出现任意多次，不会覆盖。  
区别2：执行时机不同

JS入口函数是在所有资源加载完成后，才执行。（包括：页面、外部js文件、外部css文件、图片）

jQuery入口函数，是在文档加载完成后就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

**js对象（即DOM对象）与jq对象的区别联系：**

**DOM对象**：使用JavaScript的方法获取的对象就是DOM对象。

**jQuery对象**：使用jQuery的方法获取的对象就是jQuery对象。

区别：两个对象的方法不能互相调用，因为获取的不是同一个对象。

联系：jq对象就是js对象的一个集合（**伪数组**），里面存放了一堆js对象。

js对象（即DOM对象）与jq对象转换：

DOM对象转JQuery对象：    DOM对象 加上   $(   )  
  
JQuery对象转Dom对象：     $li\[0\] 通过下标方式  或  对象.get( 0)      //获取第一个的dom对象

注意：jq变量名前加 $ 只是为了区分是jq对象，可以不用加

$ 实质： 一个函数

$( 参数)。参数不同 用法不同：

一、参数是函数时，表示入口函数

$( function () \{   \})

二、参数是dom对象时，表示将dom对象转为jq对象                $( domObj )

三、参数是字符串时，表示用来寻找对象

$( " div ")  标签选择器   $( " \#btn1 ")  id选择器      $( " .classname" ) 类选择器

jQuery这个JS库，为了避免冲突，给这个最重要的$函数还起了另外一个名字：jQuery

jQuery函数跟$函数的关系：**jQuery === $**;

**选择器（操作元素）：**

基本选择器（五个）：类   id  标签  交集逗号隔（div，p）    并集不隔（li.red）类名为red的li标签

层级选择器（两个）：子代选择器（div>p）    //只是当前div下的p标签（第一代子元素）

后代选择器（div  p）     //div下所有的p标签，包括任意子标签下的p

表单选择器：     :button

:checked

过滤选择器：

<table> 
 <tbody> 
 <tr> 
 <td style="width:164.2pt;"> &nbsp; </td> 
 <td style="width:164.2pt;"> 用法 </td> 
 <td style="width:164.25pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:164.2pt;"> :eq（index） </td> 
 <td style="vertical-align:top;width:164.2pt;"> $(“li:eq(2)”).css(“color”, ”red”); </td> 
 <td style="vertical-align:top;width:164.25pt;"> 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:164.2pt;"> :odd </td> 
 <td style="vertical-align:top;width:164.2pt;"> $(“li:odd”).css(“color”, ”red”); </td> 
 <td style="vertical-align:top;width:164.25pt;"> 获取到的li元素中，选择索引号为奇数的元素 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:164.2pt;"> :even </td> 
 <td style="vertical-align:top;width:164.2pt;"> $(“li:even”).css(“color”, ”red”); </td> 
 <td style="vertical-align:top;width:164.25pt;"> 获取到的li元素中，选择索引号为偶数的元素 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:150pt;">:gt(index)</td> 
 <td style="vertical-align:top;width:193.15pt;"> $(“li:gt(2)”).css(“color”, ”red”); </td> 
 <td style="vertical-align:top;width:149.5pt;"> 获取索引大于2的li </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:150pt;">:lt(index)</td> 
 <td style="vertical-align:top;width:193.15pt;"> $(“li:lt(5)”).css(“color”, ”red”); </td> 
 <td style="vertical-align:top;width:149.5pt;"> 获取前5个li </td> 
 </tr> 
 </tbody> 
</table>

过滤选择器（方法）：

<table> 
 <tbody> 
 <tr> 
 <td style="width:150pt;"> &nbsp; </td> 
 <td style="width:193.15pt;"> 用法 </td> 
 <td style="width:149.5pt;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:150pt;"> .children(selector) </td> 
 <td style="vertical-align:top;width:193.15pt;"> $(“ul”).children(“li”) </td> 
 <td style="vertical-align:top;width:149.5pt;"> 相当于$(“ul&gt;li”)，子代选择器 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:150pt;"> .find(selector) </td> 
 <td style="vertical-align:top;width:193.15pt;"> $(“ul”).find(“li”); </td> 
 <td style="vertical-align:top;width:149.5pt;"> 相当于$(“ul li”),后代选择器 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:150pt;"> .siblings(selector) &nbsp; </td> 
 <td style="vertical-align:top;width:193.15pt;"> $(“#first”).siblings(“li”); </td> 
 <td style="vertical-align:top;width:149.5pt;"> 查找兄弟节点，不包括自己本身。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:150pt;"> .parent() </td> 
 <td style="vertical-align:top;width:193.15pt;"> $(“#first”).parent(); </td> 
 <td style="vertical-align:top;width:149.5pt;"> 查找父亲 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:150pt;"> .eq(index) </td> 
 <td style="vertical-align:top;width:193.15pt;"> $(“li”).eq(2); </td> 
 <td style="vertical-align:top;width:149.5pt;"> 相当于$(“li:eq(2)”),index从0开始 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:150pt;"> .next() </td> 
 <td style="vertical-align:top;width:193.15pt;"> $(“li”).next() </td> 
 <td style="vertical-align:top;width:149.5pt;"> 找下一个兄弟 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:150pt;"> .prev() </td> 
 <td style="vertical-align:top;width:193.15pt;"> $(“li”).prev() </td> 
 <td style="vertical-align:top;width:149.5pt;"> 找上一次兄弟 </td> 
 </tr> 
 </tbody> 
</table>

.eq( $（this）.index());

.index()     返回当前元素在兄弟元素中的位置；

扩展选择器：  :last   :first   :visible   :hidden     :selected

**操作样式（style里）：**                  js通过style或通过修改className

一、设置单个样式属性        .css( name ,value ) ;

二、 设置多个样式属性      .css (  obj )

三、 获取样式属性：     .css(name);      如果是对象形式，返回第一个元素属性的值

操作类：

.addClass( )            //在原来类基础上添加类

.removeClass( )     // 删除类

.hasClass( )    //判断类存不存在

.toggle()        //切换类

**操作属性（html标签内）：**

设置单个： .attr( name , value)            设置多个属性：  .attr( obj ）

获取       .attr(name)

对于布尔类型的属性（selected、checked等）：使用 prop（）设置与获取值     没有设置默认为false

动画：

显示隐藏    show（speed，callback）  hide（）                  //不传参数就没有动画 ，    speed 时间     callback 回调函数

滑入滑出    slideUp（）  slideDown（）   slidetoggle（）     //不传参数有默认动画·，切换

淡入淡出    fadedIn（）  fadeOut（）     fadetoggle（）        //不传参数有默认动画·，切换

自定义动画：

animate（obj，speed ，执行效果，callback）     执行效果：linear   swing

$("div").animate(\{ left：200\}).animate（\{top:200\}）  //多个动画，当某个动画执行完成后，才开始后面的动画，即动画队列，先进先出

//动画循环
    $(function () {
        $("#div").animate({left:200},2000).animate({left:0},2000,callback);
        function  callback() {
              $("#div").animate({left:200},2000).animate({left:0},2000,callback);
        }
        
    })

动画队列：

未执行的动画会进队列等待，直到所有动画执行完毕，造成动画不立即停止的现象

解决：  在动画前面加入 .stop()方法。   //  stop（）  停止当前执行的动画

参数一： clearQueue  ，值：ture  /false ，是否清除动画队列，默认false

参数二：jumpToEnd ， 值 ：ture /false  ，是否跳转到当前动画的最终效果，默认false

音乐播放play（）方法属于的dom对象，设置获取对应索引使用get（）方法，不能用eq（）；每次都加载（在play方法前加load（））

添加节点：

创建标签        $（"div "） ；

插入标签     **  .**append ( 标签 )       //添加元素到当前父元素的最后一个子元素后面（父子）

**                     **.appendTo  (   )                      （子夫）

.perpend( )       //添加元素到当前父元素的第一个子元素前面

.perpendTo( )         （子夫）