6-Jquery

---

6-1 基础

1.引用

    <script src="jquery.min.js"></script>

2.入口函数

//两种写法都可以，等DOM加载完再执行
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
 }) ;         

$(document).ready(function(){//更常用
   ...  //  此处是页面DOM加载完成的入口
});       

1.等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。

2.相当于原生 js 中的 DOMContentLoaded。

3.不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。

4.更推荐使用第一种方式。

3.jQuery的顶级对象$

$是jQuery的别称，代码中可以用jQuery代替$。

$是jQuery的顶级对象，相当于原生js的window。

4.jQuery对象和DOM对象

1. 用原生 JS 获取来的对象就是 DOM 对象

   var v=document.querySelector('div');//原生
   $('div');//jQuery
   

2. jQuery 方法获取的元素就是 jQuery 对象。

3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注意：

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

4.1互换

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

1. DOM 对象转换为 jQuery 对象： $(DOM对象)

$('div')         

2. jQuery 对象转换为 DOM 对象（两种方式）

$('div') [index]       index 是索引号           
$('div') .get(index)    index 是索引号      

6-2 jQuery常用API

1.jQuery 选择器

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

基础选择器

$(this)

层级选择器

注意：在操作时，不用循环就可以操作所有匹配到的元素，如果需要单独设置某一元素，则使用

筛选选择器：

关系筛选方法：

链式编程：

$(this).css(‘color’, ‘red’).sibling().css(‘color’, ‘’);

2.jQuery 样式操作

2.1操作css方法

//1.参数只写属性名，则是返回属性值
$(this).css('color');
//2.参数是(属性名,属性值),是设置样式
$(this).css('color','red');
//3.设置多组样式
$(this).css({'color':'red','width':'200px'});

2.2设置类样式方法

//1.添加类
$(this).addClass('current');
//2.移除类
$(this).removeClass('current');
//3.切换类
$(this).toggleClass('current');

和原生className区别：

原生JS的className会覆盖原先的类名，但jQuery不会

3.jQuery 效果

3.1动画效果

封装的动画效果：

show([speed,[easing],[fn]])//显示
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])//切换到另一状态
slideDown([speed,[easing],[fn]])//下滑
fadeIn([speed,[easing],[fn]])//淡入
fadeOut([speed,[easing],[fn]])//淡出
fadeToggle([speed,[easing],[fn]])//淡入淡出切换

（1）参数都可以省略， 无动画直接显示。

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

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

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

fadeTo([[speed],opacity,[easing],[fn]])//渐进方式到指定不透明度

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

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写

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

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

animate(params,[speed],[easing],[fn])//自定义动画
$(this).animate({
    width:200
})

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

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

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

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

4.jQuery 属性操作

4.1固有属性值

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

//获取固有属性
prop('属性');
//设置固有属性
prop('属性','属性值');

4.2自定义属性

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

//获取自定义属性
attr('属性');    // 类似原生 getAttribute()
//设置自定义属性
attr('属性','属性值'); // 类似原生 setAttribute()

4.3数据缓存

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

//附加数据
data('name','value');
//获取数据
data('name');

同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型

5.jQuery 文本属性值

5.1普通元素内容

//获取
html()
//设置
html('内容')

5.2普通元素文本内容

//获取
text()
//设置
text('文本内容')

5.3表单的值

//获取
val()
//设置
val('内容')

6.jQuery 元素操作

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

6.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; 
	xxx;
}）       

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

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

6.2创建元素

$(''<li></li>'');    //动态的创建了一个 <li>  

6.3添加元素

①内部添加元素，生成之后，它们是父子关系。

②外部添加元素，生成之后，他们是兄弟关系。

//1.内部添加
element.append(''内容'')  //把内容放入匹配元素内部最后面，类似原生 appendChild。
element.prepend(''内容'')  //把内容放入匹配元素内部最前面。
//$('ul').append(li);

//2.外部添加
element.after(''内容'')        //  把内容放入目标元素后面
element.before(''内容'')    //  把内容放入目标元素前面 
//$('li').append(li);

6.4删除元素

element.remove()   //  删除匹配的元素（本身）
element.empty()    //  删除匹配的元素集合中所有的子节点
element.html('''')   //  清空匹配的元素内容

①remove 删除元素本身。

②empt() 和 html(‘’‘’) 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容（替换）。

7.jQuery 尺寸、位置操作

7.1尺寸

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

7.2位置

位置主要有三个： offset()、position()、scrollTop()/scrollLeft()

• offset()

  ①offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。

  ②该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。

  ③可以设置元素的偏移：offset({ top: 10, left: 30 });

• position()

  ①position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

  ②该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。

  ③该方法只能获取。

• scrollTop()/scrollLeft()

  ①scrollTop() 方法设置或返回被选元素被卷去的头部。

  ②不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

6-3 jQuery事件

1.事件注册

//单个事件注册
element.事件(function(){
	xxx;
})
//例
$(“div”).click(function(){  事件处理程序 })       

其他事件和原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

2.事件处理

2.1on()绑定事件

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

1. events:一个或多个用空格分隔的事件类型。

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

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

优势：

//1.绑定多个事件
//事件处理程序不同
$('div').on(mouseover:function(){},click:function(){});
//事件处理程序相同
$('div').on('mouseover click',function(){});

//2.可以事件委派。把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$('ul').on('click', 'li', function() {
    alert('hello world!');
});       

//3.给动态创建的元素绑定事件
 $("div").append($("<p>动态创建的p</p>"));
 $("div").on("click",”p”, function(){
     alert("可以给动态生成的元素绑定事件")
 });       

如果有的事件只想触发一次， 可以使用 one() 来绑定事件。

2.2off()解绑事件

$("p").off() // 解绑p元素所有事件处理程序

$("p").off( "click")  // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名

$("ul").off("click", "li");   // 解绑事件委托

2.3自动触发事件

element.click()  // 第一种简写形式
//例
$("p").on("click", function () {
  alert("hi~");
}); 

element.trigger("type") // 第二种自动触发模式
//例
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击

element.triggerHandler(type)  // 第三种自动触发模式
//例
element.triggerHandler("click");

triggerHandler模式不会触发元素的默认行为（例如，点击text表单获得焦点时有光标闪烁），这是和前面两种的区别。

3.事件对象

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

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡： event.stopPropagation()

6-4 jQuery其他方法

1.jQuery拷贝对象

把某个对象拷贝（合并） 给另外一个对象使用。

会覆盖原来的数据。

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

1. deep: 如果设为true 为深拷贝， 默认为false 浅拷贝

2. target: 要拷贝的目标对象

3. object1:待拷贝到第一个对象的对象。

4. objectN:待拷贝到第N个对象的对象。

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

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

2.多库共存

jQuery使用$作为标示符，随着jQuery的流行,其他js库也会用这$作为标识符， 这样一起使用会引起冲突。

解决：

1. 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(‘‘div’’)

2. jQuery 变量规定新的名称：$.noConflict()

   var xx = $.noConflict();/jQuery.noConflict();

   此时xx可以代替jQuery