JQuery学习记录

JQuery概述

什么是JQuery？

jQuery， 顾名思义， 也就是 JavaScript 和查询（Query） ， 它就是辅助 JavaScript 开发的 js 类库。

JQuery核心思想

它的核心思想是 write less,do more(写得更少,做得更多)， 所以它实现了很多浏览器的兼容问题。

JQuery流行程度

jQuery 现在已经成为最流行的 JavaScript 库， 在世界前 10000 个访问最多的网站中， 有超过 55%在使用jQuery。

jQuery 好处

jQuery 是免费、 开源的， jQuery 的语法设计可以使开发更加便捷， 例如操作文档对象、 选择 DOM 元素、制作动画效果、 事件处理、 使用 Ajax 以及其他功能。

JQuery初体验

需求： 使用 jQuery 给一个按钮绑定单击事件?

    
    
    
    
    


    你真还好吗？

JQuery核心函数

$ 是 jQuery 的核心函数， 能完成 jQuery 的很多功能。 $()就是调用$这个函数

1. 传入参数为 [ 函数 ] 时：

   表示页面加载完成之后。 相当于 window.onload = function(){}

2. 传入参数为 [ HTML 字符串 ] 时：

   会对我们创建这个 html 标签对象

3. 传入参数为 [ 选择器字符串 ] 时：

   $(“#id 属性值”); id 选择器， 根据 id 查询标签对象

   $(“标签名”); 标签名选择器， 根据指定的标签名查询标签对象

   $(“.class 属性值”); 类型选择器， 可以根据 class 属性查询标签对象

4. 传入参数为 [ DOM 对象 ] 时：

   会把这个 dom 对象转换为 jQuery 对象

jQuery 对象和 dom 对象区分

什么是 jQuery 对象？ 什么是 dom 对象？

DOM对象

1. 通过 getElementById()查询出来的标签对象是 Dom 对象
2. 通过 getElementsByName()查询出来的标签对象是 Dom 对象
3. 通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
4. 通过 createElement() 方法创建的对象， 是 Dom 对象

DOM 对象 Alert 出来的效果是： [object HTML 标签名 Element]

JQuery对象

1. 通过 JQuery 提供的 API 创建的对象， 是 JQuery 对象
2. 通过 JQuery 包装的 Dom 对象， 也是 JQuery 对象
3. 通过 JQuery 提供的 API 查询到的对象， 是 JQuery 对象

jQuery 对象 Alert 出来的效果是： [object Object]

jQuery 对象的本质是什么？

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。

jQuery 对象和 Dom 对象使用区别

jQuery 对象不能使用 DOM 对象的属性和方法
DOM 对象也不能使用 jQuery 对象的属性和方法

Dom 对象和 jQuery 对象互转

dom 对象转化为 jQuery 对象

将DOM对象传入$()中即可

jQuery 对象转为 dom 对象

jQuery 对象[下标]取出相应的 DOM 对象

jQuery 选择器

基本选择器

• #id属性值：id选择器，根据 id 查找标签对象
• .class属性值：类选择器，根据 class 查找标签对象
• element标签名：标签选择器，根据标签名查找标签对象
• *：星选择器，表示任意的， 所有的元素
• selector1, selector2：组合选择器，合并选择器 1， 选择器 2 的结果并返回

演示

// 选择id="lastname" 的元素
$("#lastname")

// 选择class="intro" 的所有元素
$(".intro");

//选择所有 
 元素
$("p");

// 选择所有 
、
 和 
 元素
$("h1, div, p");

层级选择器

• ancestor descendant：后代选择器，在给定的祖先元素下匹配所有的后代元素
• parent > child：子元素选择器，在给定的父元素下匹配所有的子元素
• prev + next：邻居元素选择器，匹配所有紧接在 prev 元素后的 next 元素
• prev ~ siblings：兄弟元素选择器，匹配 prev 元素之后的所有 siblings 元素

演示

// 选择
中的所有后代元素
$("form input");

//选择中的仅子代元素
$("form > input");

//选择
之后的一个同级元素
$("div + span");

//选择之后所有的同级元素
$("a ~ button");

基本过滤选择器

• :first：获取第一个元素
• :last：获取最后一个元素
• :not(selector)：去除所有与给定选择器匹配的元素
• :even：匹配所有索引值为偶数的元素， 从 0 开始计数
• :odd：匹配所有索引值为奇数的元素， 从 0 开始计数
• :eq(index)：匹配一个给定索引值的元素
• :gt(index)：匹配所有大于给定索引值的元素
• :lt(index)：匹配所有小于给定索引值的元素
• :header：匹配如 h1, h2, h3 之类的标题元素
• :animated：匹配所有正在执行动画效果的元素

演示

//选择第一个元素
$("input:first");

//选择最后一个元素
$("a:last");

//所有不为空的输入元素
$("input:not(:empty)");

//所有偶数  元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
$("tr:even");

//所有奇数  元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
$("tr:odd");

//列表中的第四个元素（index 值从 0 开始）
$("ul li:eq(3)");

//列举 index 大于 3 的元素
$("ul li:gt(3)");

//所有标题元素 
, 
 ...
$(":header");

//所有动画元素
$(":animated");

内容过滤器

• :contains("text")：匹配包含给定文本的元素
• :empty：匹配所有不包含子元素或者文本的空元素
• :parent：匹配含有子元素或者文本的元素
• :has(selector)：匹配含有选择器所匹配的元素的元素
• :hidden：匹配所有不可见元素 display:none 或 input type=hidden

演示

//所有包含文本 "Hello" 的元素
$(":contains('Hello')");

//所有不为空的输入元素
$("input:not(:empty)");

//匹配所有含有子元素或者文本的父元素。
$(":parent");

//所有包含有 
 元素在其内的 
 元素
$("div:has(p)");

//所有隐藏的 
 元素
$("p:hidden");

属性过滤器

• [attribute]：匹配包含给定属性的元素
• [attribute=value]：匹配给定的属性是某个特定值的元素
• [attribute!=value]：匹配所有不含有指定的属性， 或者属性不等于特定值的元素
• [attribute^=value]：匹配给定的属性是以某些值开始的元素
• [attribute$=value]：匹配给定的属性是以某些值结尾的元素
• [attribute|=value]：选取每个带有指定属性的元素，该元素的值等于指定字符串（比如 "en"）或以该字符串后跟连接符作为开头的字符串（比如 "en-us"）
• [attribute*=value]：匹配给定的属性是以包含某些值的元素
• [attrSel1][attrSel2][attrSelN]：复合属性选择器， 需要同时满足多个条件时使用

演示

//所有带有 href 属性的元素
$("[href]");

//所有带有 href 属性且值等于 "default.htm" 的元素
$("[href='default.htm']");

//所有带有 href 属性且值不等于 "default.htm" 的元素
$("[href!='default.htm']");

//所有带有 title 属性且值以 "Tom" 开头的元素
$("[title^='Tom']");

//所有带有 href 属性且值以 ".jpg" 结尾的元素
$("[href$='.jpg']");

//所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串
$("[title|='Tomorrow']");

//所有带有 title 属性且值包含字符串 "hello" 的元素
$("[title*='hello']");

//带有 id 属性，并且 name 属性以 man 结尾的输入框
$( "input[id][name$='man']" );

表单过滤器

• :input：匹配所有 input, textarea, select 和 button 元素
• :text：匹配所有的文本输入框
• :password：匹配所有的密码输入框
• :radio：匹配所有的单选框
• :checkbox：匹配所有的复选框
• :submit：匹配所有提交按钮
• :image：匹配所有 img 标签
• :reset：匹配所有重置按钮
• :button：匹配所有 input type=button 按钮
• :file：匹配所有 input type=file 文件上传框

演示

//所有 input 元素
$(":input");

//所有带有 type="text" 的 input 元素
$(":text");

//所有带有 type="password" 的 input 元素
$(":password");

//所有带有 type="radio" 的 input 元素
$(":radio");

//所有带有 type="checkbox" 的 input 元素
$(":checkbox");

//所有带有 type="submit" 的 input 元素
$(":submit");

//所有带有 type="image" 的 input 元素
$(":image");

//所有带有 type="reset" 的 input 元素
$(":reset");

//所有带有 type="button" 的 input 元素
$(":button");

//所有带有 type="file" 的 inpu
$(":file");

表单对象属性过滤器

• :enabled：匹配所有可用元素
• :disabled：匹配所有不可用元素
• :checked：匹配所有选中的单选， 复选， 和下拉列表中选中的 option 标签对象
• :selected：匹配所有选中的 option

演示

//所有启用的元素
$(":enabled");

//所有禁用的元素
$(":disabled");

//所有选中的复选框选项
$(":checked");

//所有选定的下拉列表元素
$(":selected");

JQuery元素筛选

• eq(index)：获取给定索引的元素（功能与:eq(index)一致）
• first()：获取第一个元素（功能与:first一致）
• last()：获取最后一个元素（功能与:last一致）
• filter(exp)：留下匹配的元素
• is(exp)：判断是否匹配给定的选择器， 只要有一个匹配就返回， true
• has(exp)：返回包含有匹配选择器的元素的元素（功能与:has(selector)一致
• not(exp)：删除匹配选择器的元素（功能与:not(selector)一致）
• children(exp)：返回匹配给定选择器的子元素（功能与:parent > child一致）
• find(exp)：返回匹配给定选择器的后代元素（功能与ancestor descendant一致）
• next()：返回当前元素的下一个兄弟元素（功能与prev + next一致）
• nextAll()：返回当前元素后面所有的兄弟元素（功能与prev ~ siblings一致）
• nextUntil()：返回当前元素到指定匹配的元素为止的后面元素
• parent()：返回父元素
• prev(exp)：返回当前元素的上一个兄弟元素
• prevAll()：返回当前元素前面所有的兄弟元素
• prevUnit(exp)：返回当前元素到指定匹配的元素为止的前面元素
• siblings(exp)：返回所有兄弟元素
• add()：把 add 匹配的选择器的元素添加到当前 jquery 对象中

JQuery的属性操作

• html()：它可以设置和获取起始标签和结束标签中的内容
• text()：它可以设置和获取起始标签和结束标签中的文本
• val()：它可以设置和获取表单项的 value 属性值，还可以操作单选、复选、下拉列表的勾选
• attr()：可以设置和获取属性的值，还可以添加自定义的属性、属性值（但不推荐操作 checked、 readOnly、 selected、 disabled 等等）
• prop()：可以设置和获取属性的值（只推荐操作 checked、 readOnly、 selected、 disabled 等等）

//获取id='one'的
元素中的html内容
$("div[id='one']").html();

//设置id='one'的
元素中的html内容
$("div[id='one']").html("我是王多鱼");//页面效果为：我是王多鱼

//获取id='two'的
元素中的text内容
$("div[id='two']").text();

//设置id='two'的
元素中的text内容
$("div[id='two']").text("我是王多鱼");//页面效果为：我是王多鱼

//获取id='three'且type='text'的的value值
$(":text[id='three']").val();

//设置id='three'且type='text'的的value值
$(":text[id='three']").val("HelloWorld");

//操作单选、复选、下拉列表的勾选
$(".radio,.checkbox,#single,#multiple").val(["man","game","Japanese","male","female"]);

//获取第一个复选框的name属性值
$(":checkbox:first").attr("name");

//设置最后一个复选框的name属性值
$(":checkbox:last").attr("name","hobbies");

//为第一个复选框添加自定义的love='never'属性值
$(":checkbox:first").attr("love","never");

//获取索引为0的单选框的选中状态
$(":radio:eq(0)").prop("checked");

//设置索引为1的单选框的选中状态
$(":radio:eq(1)").prop("checkbox","true");

案例-JQuery全选/全不选

案例要求

要求实现全选/全不选、全选、全不选、反选、提交按钮的功能。

案例实现

    
    
    
    



    What's your favorite sport?
    全选/全不选
    

    football
    basketball
    badminton
    tableTennis
    

    
    
    
    

DOM对象的增删改

内部插入

• appendTo()：例如a.prependTo(b)，把 a 插入到 b 子元素末尾， 成为最后一个子元素
• prependTo()：例如a.prependTo(b)，把 a 插到 b 所有子元素前面， 成为第一个子元素

外部插入

• insertAfter()：例如a.insertAfter(b)，把 a 插到 b 后面， 成为同级一元素
• insertBefore()：例如a.insertBefore(b)，把 a 插到 b 前面， 成为同级一元素

替换

• replaceWith()：例如a.replaceWith(b)，用b替换掉所有a
• replaceAll()：例如a.replaceAll(b)，用a替换掉所有b

删除

• remove()：例如a.remove()，删除a标签
• empty()：例如a.empty()，清空a标签里的内容

演示

    
    
    
    


    

        严老板都已经拉了夸，你是真小丑！
    
    

        不是，我都不知道，你在装什么？
    
    

        你就是一个因溜狗！
    
    

        都太经典了，你知道不？
    
    

        龙哥的S6第一个王者，韩晶亮你懂不懂啊！
    
    

        上路被三人越塔！打野都不在，我为什么要去啊！
        不是，不是抬杠！你来告诉我，打野都不在，我为什么要去！
    
    

        来，这个叫尊尼获加的臭JB钢筋！我给你房管来，来你给我说话！
        你说不明白，明天你妈出门被车撞死！
    

案例-从左到右，从右到左

案例要求

做出两个下拉列表，再做出四个按钮。按钮的功能分别为：添加选中项到右边、添加全部项到右边、添加选中项到左边、添加全部项到左边。

案例实现

    
    
    
    
    



    
        one
        two
        three
        four
        five
        six
        seven
        eight
    

    添加选中项到右边
    添加全部项到右边


    

    添加选中项到左边
    添加全部项到左边

案例-表格的动态添加、删除

    
    
    
    
    



    

        
Name
        
Email
        
Salary
        
Delete
    
    

        
Jason
        
[email protected]
        
5000
        
Delete
    
    

        
Bob
        
[email protected]
        
6000
        
Delete
    
    

        
Bernardo
        
[email protected]
        
7000
        
Delete
    


    
添加新员工
    

        

            
name
            

                
            
        
        

            
email
            

                
            
        
        

            
salary
            

                
            
        
        

            

                
                    Submit
                
            
        
    

JQuery操作CSS样式

• addClass()：添加样式
• removeClass()：删除样式
• toggleClass()：样式存在即删除，不存在即添加

• offset()：获取和设置元素的坐标位置

  • 属性：top 和 left，分别为到dom顶的距离、和到dom左的距离。

  在设置offset()时，必须传入键值对数据。如offset({left:100,top:100})

演示

JQuery操作动画

基本动画

• show()：将隐藏的元素显示
• hide()：将可见的元素隐藏
• toggle()：可见则隐藏，不可见则显示=

淡入淡出动画

• fadeIn()：淡入（慢慢可见）
• fadeOut()：淡出（慢慢消失）
• fadeTo()：在指定时长内慢慢的将透明度修改到指定的值。 0 透明， 1 完成可见， 0.5 半透明（此方法较为特殊，第二个参数为透明度，第三个方法才为回调函数）
• fadeToggle()：淡入则切换为淡出，淡出则切换为淡入

上述所有方法都可以添加两个参数：

1. 参数一，动画执行的时长
2. 参数二，动画的回调函数

演示

    
    
    
    
    



    

        

            隐藏hide()
        
    
    

        

            显示show()
        
    
    

        

            显示/隐藏切换toggle()
        
    
    

        

            淡出fadeOut()
        
    
    

        

            淡入fadeIn()
        
    
    

        

            淡化切换fadeToggle()
        
    
    

        

            淡化到fadeTo()
        
    

案例-CSS动画之品牌展示

案例要求

1. 点击按钮的时候， 隐藏和显示卡西欧之后的品牌。
2. 当显示全部内容的时候， 按钮文本为“显示精简品牌”。然后小三角形向上， 所有品牌产品为默认颜色。
3. 当只显示精简品牌的时候， 要隐藏卡西欧之后的品牌， 按钮文本为“显示全部品牌”。然后小三形向下，并且把 佳能，尼康的品牌颜色改为红色（给 li 标签添加 promoted 样式即可）

案例实现

    
    
    
    
    



    

        

            佳能
            (30440)
        
        

            索尼
            (20001)
        
        

            三星
            (19028)
        
        

            尼康
            (17821)
        
        

            松下
            (12289)
        
        

            卡西欧
            (8242)
        
        

            富士
            (14894)
        
        

            柯达
            (9520)
        
        

            宾得
            (2195)
        
        

            理光
            (4114)
        
        

            奥林巴斯
            (12205)
        
        

            明基
            (1466)
        
        

            爱国者
            (3091)
        
        

            小米
            (1010)
        
        

            其他品牌
            (7275)
        
    
    

        
            显示全部品牌
        
    

JQuery操作事件

JQuery页面加载后事件

什么是'JQuery页面加载后事件'?

$(document).ready()

JQuery页面加载后事件与原生JS页面加载后事件的触发顺序？

• JQuery的$(document).ready()先执行
• 原生JS的window.onload后执行

JQuery页面加载后事件与原生JS页面加载后事件的触发时机？

• JQuery的$(document).ready()是浏览器的内核解析完页面的标签，创建好 DOM 对象之后就会马上执行
• 原生JS的window.onload除了要等浏览器内核解析完标签创建好 DOM 对象， 还要等标签显示时需要的内容加载
  完成才能执行

JQuery页面加载后事件与原生JS页面加载后事件的可执行次数？

• JQuery的$(document).ready()，有多少执行多少（依次）
• 原生JS的window.onload再多，也只能执行最后依次的赋值函数

JQuery其他常见事件

• click()：鼠标单击事件（被调用时传入函数为绑定，不传入函数为触发）
• mouseover()：鼠标移入事件（被调用时传入函数为绑定，不传入函数为触发）
• mouseout()：鼠标移出事件（被调用时传入函数为绑定，不传入函数为触发）
• bind()：给元素绑定一个或多个事件
• one()：给元素绑定一个或多个事件，但其绑定的事件只能被触发一次（使用格式与bind()一致）
• unbind()：解除元素绑定的一个或多个事件（功能与bind()相反，调用时只需传入字符串形式的事件名即可）
• $(document).on(events,[selector],[data],fn) ：动态绑定事件，即使元素是后创建的

演示

//click()绑定单击事件
$("h5").click(function(){
    alert("h5的单击事件");
});
//click()触发单击事件
$("h5").click();

//mouseover()绑定鼠标移入事件
$("h5").mouseover(function () {
    alert("h5的鼠标移入事件");;
});
//mouseover()触发鼠标移入事件
$("h5").mouseover();

//mouseout()绑定鼠标移出事件
$("h5").mouseout(function () {
    alert("鼠标移出事件");
});
//mouseout()触发鼠标移出事件
$("h5").mouseout();

//bind()元素绑定三个事件
$("h5").bind("click mouseover mouseout", function () {
    console.log("别JB叫！");
});
//bind()分别触发三个事件
$("h5").click();
$("h5").mouseover();
$("h5").mouseout();

//one()元素绑定三个事件
$("h5").one("click mouseover mouseout", function () {
    console.log("我说的，眼老板是垃圾！");
});
//one()分别触发三个事件（一个事件只能被触发一次）
$("h5").click();
$("h5").mouseover();
$("h5").mouseout();

//unbind()解除两个事件的绑定
$("h5").unbind("mouseover mouseout");
//unbind()解除所有事件的绑定（不传参，表示解除全部事件绑定）
$("h5").unbind();

//$(document).on(events,[selector],[data],fn)动态绑定事件
$(document).on("click mouseover mouseout", $("h5"), function(){
    console.log("我是回调函数");
});

事件冒泡

什么是事件冒泡？

事件的冒泡是指：父子元素同时监听同一个事件，当触发子元素的事件的时候， 同一个事件也被传递到了父元素的事件里去响应。

演示

    
    
    
    
    


one
    
two

怎么解决事件冒泡？

在子元素事件函数体内， return false; 可以阻止事件的冒泡传递。

演示

    
    
    
    
    


one
    
two

事件对象

什么是事件对象？

事件对象， 是封装有触发的事件信息的一个 javascript 对象。

如何获取事件对象？

在给元素绑定事件的时候， 在事件的 function( event ) 参数列表中添加一个参数， 这个参数名， 我们习惯取名为 event。这个 event 就是 javascript 传递参事件处理函数的事件对象。

演示

//原生Js获取事件对象event
window.onload = function () {
    document.getElementsByTagName("div")[0].onclick = function (event) {
        console.log(event);
    };
};

//JQuery获取事件对象event
$(document).ready(function () {
    $("div:first").click(function (event) {
        console.log(event);
    });
});

事件对象的作用

在我们使用bind()给一个元素一次性绑定多个事件时，我们该如何分别给这些事件设置单独的函数呢？这个时候，我们就需要用到事件对象event了。

//使用bind()给一个元素一次性绑定多个事件
$("div:first").bind("mouseover mouseout click", function (event) {
    //若是mouseover事件，控制台打印mouseover
    if (event.type == "mouseover") {
        console.log("mouseover");
    } else if (event.type == "mouseout") {
        //若是mouseout事件，控制台打印mouseout
        console.log("mouseout");
    } else if (event.type == "click") {
        //若是click事件，控制台打印click
        console.log("click");
    }
});

案例-图片放大跟随