博客

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( $（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);