jQuery 学习笔记（慕课网）

作者: 恰皮 | 来源:发表于2017-01-17 23:32 被阅读84次

1. 环境搭建

引入jQuery库：

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>

可以在 bootstrapCDN 找到各种开源库的网址。

压缩版：项目上线发布使用（体积小，效率快）；
开发版：开发过程中使用（便于修改调试）。

2. jQuery 对象

通过$()获取的是jQuery对象，是一个类数组对象。
.get(索引值) 方法:访问jQuery对象中相关的DOM节点

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

3. jQuery 选择器

id 选择器（比较高效）: $("#id");
类选择器（可以多选，隐式循环处理）: $(".className");
元素选择器（可以多选，隐式循环处理）: $("element");
全选择器: $("*");
层级选择器（兄弟选择器不向前选择）

层级选择器

基本筛选选择器

基本筛选选择器

内容筛选选择器

内容筛选选择器

可见性筛选选择器

可见性筛选选择器

属性选择器

属性选择器

子元素选择器

子元素选择器

表单元素选择器

表单元素选择器

表单对象属性选择器

表单对象属性选择器

特殊选择器 this
this 表示当前的上下文对象是一个 html 对象，可以调用 html 对象所拥有的属性和方法。
$(this) 代表的上下文对象是一个 jquery 的上下文对象，可以调用 jQuery 的方法和属性值。

4. jQuery .attr() 和 .removeAttr()

.attr( 属性名 )
.attr( 属性名，属性值 )
.attr( 属性名，函数值 )
eg:

<input type="text" value="hiahia" />
<script type="text/javascript">
        $("input").attr('value',function(i, val){
            return ' 通过function设置 ' + val    //val 是原来的旧 value，新值为“通过 function设置 hiahia ”
        })
 </script>
.attr({ 属性名一:"属性值一",属性名二:"属性值二",属性名三:"属性值三" });

.removeAttr( 属性名 )

5. jQuery .html()

.html() 获取匹配集合中第一个元素的 HTML 内容
.html( html 内容 ) 设置每一个匹配元素的 HTML 内容；
.html( function ( index,oldhtml )) 用函数返回值设置 HTML 内容
.text() 获取匹配集合中每一个元素的合并文本，包括它们的后代
.text(text 内容) 设置每一个匹配元素内容的文本
.text(function(index,oldtext)) 用函数返回值设置文本内容
eg:

<script type="text/javascript">
        //通过 .text() 的回调，获取原本的内容，修改，在重新赋值
        $(".left a:first").text(function(index,text){
            return ' 增加新的文本内容 ' + text  //text 是旧的 text
        })
    </script>

6. jQuery .val()

.val() 获取匹配的元素集合中第一个元素的当前值
.val(value) 设置匹配的元素集合中每一个元素的值
.val(function) 用函数的返回值设置值

7. jQuery .addClass()

.addClass("newClassName") 添加而不是替换一个新的类
.addClass("newClassName1","newClassName2") 添加多个新类
.addClass(function(index,currentClass))

8.jQuery .removeClass()

.removeClass(className) 删除某个类
.removeClass() 删除所有样式
.removeClass(function(index,class)) //class是该元素的全部类名
eg:

<script type="text/javascript"> 
        $('.right > div:first').removeClass(function(index,className){
            //className = aa bb imoocClass
            //把div的className赋给下一个兄弟元素div上作为它的class
            $(this).next().addClass(className);
            //删除自己本身的imoocClass
            return 'imoocClass';
        })
    </script>

9. jQuery .toggleClass()

.toggleClass(className) 在匹配的元素集合中的每一个元素上添加或者删除样式类名（存在则删除，不存在则添加）；
.toggleClass(className,true/false) 如果true，就添加该className，如果是false，就删除该className。

10. jQuery .css()

.css( "属性名" ) 获取匹配元素集合中的第一个元素的该属性的属性值
.css([ "属性一 ", "属性二" ]) 获取匹配元素的多个属性值，返回一个对象结果
eg：

<script type="text/javascript">
        //获取尺寸，传入CSS属性组成的一个数组
        //{width: "60px", height: "60px"}   
        var value = $('.first').css(['width','height']);
        //因为获取的是一个对象，取到对应的值
        $('p:eq(2)').text( 'widht:' + value.width +  ' height:' +value.height )
    </script>

.css ( "属性名", "属性值" ) 设置 css 属性值
.css ( "属性名" , function)
eg:

<script type="text/javascript">
        //获取到指定元素的宽度，在回调返回宽度值
        //通过处理这个value，重新设置新的宽度
        $('.sixth').css("width",function(index,value){//value是原来的css属性值，即此处是width的值
            value=value.split('px');//将width的值以px为界分割成一个数组，数组内的元素是字符串
            return(Number(value[0])+50)+value[1];//value[0]是原来的width的值，是字符串，所以要转化为number ，value[1]是单位“px”
            })
    </script>

.css ( 对象 ) 同时设置多个样式
eg:

<script type="text/javascript">
        //合并设置,通过对象传设置多个样式
        $('.seventh').css({
         'font-size':"15px",
         "background-color":"#40E",
         "border":"1px solid red"
        })
    </script>

.css() 方法处理的样式是内联的，直接通过元素的 style 属性附加到元素上的；
通过 .css() 方法设置的样式属性优先级高于 .addClass() 方法

11. jQuery 创建、替换、删除节点

$("<div></div>");
$("<div> 我是陈大虹 </div>");
$("<div id='test' class='dahong'> 我是陈大虹 </div>");
$(A).append($(B)); 把B添加为A的最后一个子节点（每一个匹配元素都添加）
$(B).appendTo($(A)); 把B添加为A的最后一个子节点（每一个匹配元素都添加）
$(A).before(B,C) 在A前面按照顺序插入节点B,C
$(A).after(B,C) 在A后面按照顺序插入节点B,C
$(A).prepend(B,C) 把B,C插入为A的第一、第二个子节点（多个参数）
$(B).prependTo(A) 把B插入为A的第一个节点（一个参数）
$(A).insertAfter(B) 等于 $(B).after(A) 等于 $(A).before(B)
$(A).insertBefore(B) 等于 $(B).before(A) 等于 $(A).after(B)
$(A).empty() 移除A的子节点（A本身不被移除）
$(A).remove() 移除A及内部所有元素，包括事件
$(A).remove(B) 删除A中的B（选择性）
a = $(A).detach(); $(B).append(a) 把A移除，让一个变量托管，可以通过 .append() 方法再次添加
$(A).clone() 复制一个A（只克隆结构，不克隆事件）
$(B).append($(A).clone()) 复制一个A，添加为B的最后一个子节点
$(A).clone().css('xx','cc') 复制一个A，并设置它的某个css属性值
$(A).clone(true) 复制一个A，包括结构、事件与数据
$(A).replaceWith(B) 把A替换成B 等于 $(B).replaceAll(A)
$(A).wrap(B) 给A包裹一层B（添加父元素）

$(A).wrap(function() {
     return '<div></div>';  //给A包裹一层div（添加父元素）
})

$(A).unwrap() 删除A的父元素
$(A).wrapAll(B) 给所有的A包裹一层B
eg:

<p>A</p>
<p>B</p>
......
$('p').wrapAll('<div></div>');
......
result:
<div>
    <p>A</p>
    <p>B</p>
</div>

<p>A</p>
<p>B</p>
......
$('p').wrapAll(function() {
    return '<div></div>';
});
......
<div>
    <p>A</p>
</div>
<div>
    <p>B</p>
</div>

$(A).wrapInner(B) 给A的子元素包裹一层B（B是正确的HTML格式）
$(A).children() A的直接子元素，不包括孙级元素
$(A).children(selector) A的直接子元素中满足selector选择器的
$(A).find(B) 遍历A中满足B选择器的所有后代元素（包括子元素）
$(A).parent() 查找A的直接父元素
$(A).parent(selector) 查找A中的满足selector的父元素
$(A).parents() 查找A的所有祖辈元素（包括父元素）
$(A).parents(selector) 查找A中满足selector的所有祖辈元素
$(A).closest(selector) 查找A的上级元素中满足selector的，查找到一个就停止
$(A).next(selector) 查找A的紧邻的下一个满足selector的兄弟节点
$(A).prev(selector) 查找A的紧邻的上一个满足selector的兄弟节点
$(A).siblings(selector) 查找A的所有满足selector的兄弟节点
$(A).add(selector/DOM元素/HTML格式标签) 在A合集中添加元素一起进行操作
$(A).each() for循环迭代器

$(A).each(function(index,element) {
$(this).css('color','red');
//index 是当前循环元素的索引
//element是对应的循环元素
//this指向当前对应的循环元素
})

12. jQuery 事件

12.1 click() 和 dbclick()

ele.click( function () { } ) 元素ele被点击时，调用函数，函数中的 this 指向绑定事件的元素

eg:
$("button").click(function(e) { alert(this); });

this指向绑定事件的元素

ele.click() 手动触发点击事件
ele.click( data, function() { } )

$("#test").click(123, function(e) {
    //e.data=>123;
}

dbclick() 双击事件

12.2 鼠标事件

用法同 click() 事件
mouseup() 是鼠标松开时触发
mousedown() 是鼠标按下时触发
mousemove() 鼠标移动时触发
mouseover() 鼠标移入时触发（当元素和它的父元素都有绑定 mouseover() 事件时，元素触发 mouseover() 事件，会向上冒泡触发父元素的 mouseover() 事件）
mouseout() 鼠标移出时触发（也会冒泡）
mouseenter() 鼠标移入时触发（不会冒泡）
mouseleave() 鼠标移出时触发（不会冒泡）
hover(hoverIn,hoverOut); hoverIn是鼠标移入时执行的事件函数，hoverOut 是鼠标移出时执行的事件函数
focusin() 元素获得鼠标焦点时触发（有冒泡）
focusout() 元素失去鼠标焦点时触发（有冒泡）
focus() 元素获得鼠标焦点时触发（无冒泡）
blur() 元素失去鼠标焦点时触发（无冒泡）
点击鼠标事件， event.which 属性的值：鼠标左键为1，鼠标中键为2，鼠标右键为3；

12.3 表单事件

change(); <input> <textarea> <select> 的元素值改变后失去焦点时触发
select(); <input> <textarea> 元素值被选中时触发
submit() 提交表单时触发

12.4 键盘事件

keydown() 键按下时触发
keyup() 键松开时触发
keypress()

12.5 事件绑定 on

绑定一个事件

$(selector).on('click',function() { });

多个事件绑定同一个函数（用空格分隔多个事件）

$(selector).on('mouseover mouseout',function() { });

多个事件绑定不同函数

$(selector).on({
mouseover:function() { },
mouseout:function() { }
})

传递数据

function greet(event) {
    alert(event.data.name);
}
$(selector).on("click",{
    name:"chendahong"
},greet);

on() 事件委托
$(selector1).on("click","selector2",fn) 向上冒泡到第二参数选择器指定的元素时触发函数 fn

12.6 事件卸载off

$(selector).off("mouseover"); 卸载事件 mouseover
$(selector).off() 卸载全部事件

12.7 事件对象

$(selector).on("click",function(event) {
    //event 是事件对象
    //event.target 是当前触发事件的元素
}

event.type 获取事件的类型
event.pageX 和 event.pageY 获取鼠标当前相对于页面的坐标
event.preventDefault() 阻止默认行为
event.stopPropagation() 方法 阻止事件冒泡
event.which 获取在鼠标单击时，单击的是鼠标的哪个键
event.currentTarget 在事件冒泡过程中的当前DOM元素
this 和 event.target 的区别: js 中事件是会冒泡的，所以 this 是可以变化的，但 event.target 不会变化，它永远是直接接受事件的目标 DOM 元素

13. jQuery 动画

13.1 元素隐藏显示（display:none 和 display:block）

$(selector).hide() 直接隐藏
$(selector).hide("fast/slow/数值") fast:200ms,slow:600ms

$(selector).hide({
duration:3000, //3000ms
complete:function() { } //动画完成时执行的函数
})

- ``$(selector).show(数值)`` 数值：动画执行时间（毫秒）
- ``$(selector).toggle(数值)`` 元素原来隐藏，则显示；元素原来显示，则隐藏
- ```
$(selector).toggle({
    duration:3000, //3000ms
    complete:function() { } //动画完成时执行的函数
})

$(selector).slidedown(duration,fn) （下拉改变高度） duration: 执行时间；fn 动画执行完毕的回调函数
$(selector).slideup(duration,fn) （上卷改变高度动画）
$(selector).slideToggle() 上卷下拉切换显示或隐藏
$(selector).fadeOut(参数) 淡出（透明度在0-1间切换）
$(selector).fadeInt(参数) 淡入（透明度在0-1间切换）
$(selector).fadeToggle(参数) 淡出淡入切换显示或隐藏（透明度在0-1间切换）
$(selector).fadeTo(duration,opacity,fn) duration:动画执行时间；opacity:指定达到的透明度；fn:动画执行完毕的回调函数
$(selector).animate()

$(selector).animate({
properties1://要改变的属性值一
properties2://要改变的属性值二
},[duration],[fn]); //duration:动画执行时间，fn:动画执行完毕的回调函数

$(selector).stop() 停止第一个动画
$(selector).stop(true) 停止所有动画
$(selector).stop(true,true) 停止所有动画，跳到第一个动画的完成状态

14. jQuery的一些方法

$.each(array/object,fn); fn 第一个参数是数组的索引或者对象的属性名，第二个参数是数组索引对应的元素值或者对象属性名对应的属性值
$.inArray(value,array,start); value: 要查找的值，array: 查找的数组，start: 查到的起始位置。如果要查找的值不在查找的数组中，返回“-1”，查找到一个即停止
$.trim(string); 对字符串去除空格
$(selector).get(index); 获取jQuery对象合集中的某个元素，index 是正值时从左往右计，起始值是 0，index 是负值时从右往左计，起始值是 -1
$(selector).index(); index 中无参数，则返回选择器选中的jQuery合集中的第一个相对于他的兄弟元素的位置
$(selector).index(dom元素/jq对象); 返回改DOM元素或jq对象相对于selector选择器选中的jQuery对象合集中的位置