jQuery 对象与操作

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

 

过滤选择器：   

	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素
:gt(index)	$(“li:gt(2)”).css(“color”, ”red”);	获取索引大于2的li
:lt(index)	$(“li:lt(5)”).css(“color”, ”red”);	获取前5个li

过滤选择器（方法）： 

	用法	说明
.children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子代选择器
.find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
.siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
.parent()	$(“#first”).parent();	查找父亲
.eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
.next()	$(“li”).next()	找下一个兄弟
.prev()	$(“li”).prev()	找上一次兄弟

.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( )         （子夫）

                      before（）    after（）

清空与删除标签：

 .html（"  "）     //当元素添加了事件时，使用这个方法时，会把内容清空，绑定事件以及数据还在，造成·内存泄漏

 .emtry（）       //清空子字节点，并清除绑定的事件和数据，阻止内存泄漏

 .remove（）    //删除这个节点本身 包括它的子节点，以及清除绑定的事件和数据

.detach（）    //当需要删除这个节点本身 包括它的子节点，但是不清除绑定的事件和数据 , 想要将来使用时。

深复制：

. clone（true /false）     //无论参数是true / false  都是深复制，区别在于true 会复制事件  ，false不会

 

特殊属性操作（不设置参数，表示获取值   设置参数代表设置值）：

.val( )  获取元素的value      //大多用于input标签

.html()                                 //相当于innerHtml 

.text()                                 //相当于innerText  

.width（） .heigth（）        //  获取元素内容的宽高   

                                           //获取当前可视区的宽高  （事件 $(window).resize())
 
.scrollTop（）   .scrollLeft（）       //卷曲出去的距离

.offset()         //获取相对于document页面的位置,  获取距离页面左边的距离  .offset().left   

.position()           //获取元素相对有定位的父级元素的位置  .position().left 

 

 

方法：

.delay( duration,[queueName] )     推迟动画队列的执行，也可以用于自定义队列。\

         duration:延时时间，单位：毫秒

        queueName:队列名词，默认是Fx，动画队列。

 

$("#div").fadeIn(1000).delay(2000).fadeOut(1000);