Web基础（5）jQuery：简介、选择器、筛选器、jQuery的效果、属性操作、文档操作、位置属性、事件、jQuery Ajax

完整的jquery中文文档请参见：jquery.cuishifeng.cn

 

1. JQuery的简介

1）为何使用jQuery，jQuery解决了以下问题：

• JavaScript代码书写繁琐、代码量大、代码复杂
• 动画、开启定时器、定时器的清除、各种操作和处理事件等不好实现
• 浏览器的兼容性

 

2）JavaScript和jQuery的区别

• JavaScript是一门编程语言，用来编写客户端浏览器脚本
• jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
• jQuery能做的javascript都能做到，而javascript能做的事情，jQuery不一定能做到

 

3）执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。可以简写为$(function(){ alert(1) })

 

 

 

2.选择器

1）基本选择器

 

2）层级选择器

 

3）基本筛选器

:first 选择众多相同元素当中的第一个，例$("li :first").css("color", "green")

:last 选择出最后一个

:not(selector) 非

:even 选择出索引为偶数的结果

:odd 选择出索引为奇数的结果

:eq(index) 选择出固定索引值的结果

:gt(index) 选择出大于某索引值的结果

:lt(index) 选择出小于某索引值的结果

:header 选出标题类型，例如

 

4）内容筛选器

:contains(text) 通过内容进行筛选，例$("div :contains('Steve')")

:empty 内容为空的标签

:has(selector) 选出包含某个标签的，例$("div:has(p)").addClass("test")，找出div标签中有p标签的

 

5）可见性筛选器

:hidden 隐藏的

:visible 可见的

 

6）属性筛选器

多个属性进行筛选用中括号进行分割，例$("input[id][name='man'")

 

7） 表单选择器

选取表单元素的简写形式，例，$(":checkbox")

:input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

 

8）表单对象属性

:enabled 查找所有表单对象中启用的元素

:disabled 查找所有表单对象中禁用的元素

:checked 查找所有选中的选项元素（复选框、单选框等，select中的option），对于select元素来说，获取选中推荐使用

:selected 查找所有选中的选项元素

 

 

 

3. 筛选器

1）过滤

 

2）查找

children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素，例$("div").children()。注意：parents()将查找所有祖辈元素，而children()之查找子元素，而不查找所有后代元素。

next([expr]) 获取满足条件的下一个元素

nextAll([expr]) 获取满足条件的以下所有元素

nextUtil([ele][.f]) 获取满足条件的所有元素，直到某个条件（不包含某条件），例$(".div1").nextUntil(".div4") ,不包含id为div4的标签元素

parent([expr]) 获取满足条件的父级元素

parents([expr]) 获取满足条件的所有父级元素，例$("p").parents()

parentsUntil([ele][.f]) 获取满足条件的父级元素，直到某个条件

prev([expr]) 获取满足条件的上一个元素

prevAll([expr]) 获取满足条件的所有之前的元素

prevUntil([ele][.f]) 获取满足条件的之前元素，直到某元素

siblings 获取满足条件的所有兄弟元素

find 搜索于指定表达式匹配的元素

 

 

 

4. jQuery的效果

1）show，显示隐藏的匹配元素，

语法：show(speed, callback)参数：

speed：三种预定速度之一的字符串("slow", "normal", "fast")或表示动画动画时长的毫秒值

callback：在动画完成时执行的函数，每个元素执行一次

 

2）hide，隐藏显示的元素

语法：hide(speed, callback)

可以通过show()和hide()方法，来动态控制元素的显示隐藏

 

3）toggle

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

    
    
    


    


    
    显示/隐藏


    
    

 

4）slideDown

通过高度变化来动态地显示所有匹配的元素，在显示完成后触发一个回调函数，用法和参数跟上面类似

 

5）slideUp

通过高度变化来动态地隐藏所有匹配的元素，在隐藏完成后触发一个回调函数

 

6）slideToggle

通过高度变化来切换所有元素的可见性，并在切换完成后可选地触发一个回调函数，跟toggle用法类似

    
    
    


    


    
    显示/隐藏


    
    

 

7）fadeIn

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化

 

8）fadeOut

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化

    
    
    


    


    
    显示/隐藏


    
    

 

9）fadeTo

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

 

10）fadeToggle

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

 

11）animate

用于创建自定义动画的函数

语法：animate(params, [speed], [fn])

params：一组包含作为动画属性和终值的样式属性及其值的集合

speed：三中预定速度之一的字符串("slow", "normal", "fast")或表示动画时长的毫秒数值

fn：在动画完成时执行的函数，每个元素执行一次。

 

12）stop

停止所有在指定元素上正在进行的动画

stop([clearQueue], [goToEnd])

clearQueue：如果设置成true，则清空队列。可以立即结束动画。

gotoEnd：让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等

 

13）delay

用来做延迟的操作

语法：delay(1000)，一秒之后做后面的操作

 

右下角弹出广告

 

tab菜单代码案例

    
    
    


    

        

            
菜单一
            
菜单二
            
菜单三
        
        

            
内容一
            
内容二
            
内容三
        
    

    
    

 

 

 

5. 属性操作（属性CSS和文档处理）

1）属性操作

• $("p").text() 获取文本，在括号中输入值可设置标签的文本内容
• $("p").html() 获取到包含标签的文本内容
• $(":radio").val() 获取value值

// 1. 获取单选框中的value值
$("input[type=radio]:checked").val();

// 2. 复选框中value值，仅仅获取第一个值
$("input[type=checkbox]:checked").val();

// 3. 下拉列表被选中的值
$("#timespan option:selected");

// 4. 设置单选的值
$("input[type=radio]").val(["111"]);
$("input[type=checkbox]").val(["b", "c"]);

// 5. 设置下拉列表选中的值，这里必须要用select
$("select").val(['3', '2']);

 

• $(".test").attr("tab-index") 获取test样式下属性为tab-index的属性值，在attr输入第二个参数可设置对应的属性值，如要设置多个值，则需要放入字典中，如下例所示：$("img").attr({src : "logo.jpg", alt: "Test Image"});
• $(".test").removeAttr("checked") 删除某标签下的属性
• $("input[type='checkbox']").prop("checked", true) 获取在匹配的元素集中的第一个元素的属性值，如设定了第二个属性则赋值。尽量使用prop方式来操作属性值

 

checkbox的全选、取消、反选的代码案例：

    
    
    


    

        

            
            
            
        
        

            

                

                
篮球
            
            

                

                
足球
            
            

                

                
网球
            
        

    

    
    

 

2）CSS类

addClass(class) 添加CSS样式

removeClass(class) 移除CSS样式

$("#c1").css("backgroundColor", "gray") 设置css样式

 

 

 

6. 文档操作

1）插入操作

（1）父元素.append(子元素)，追加某元素，父元素中添加新的元素

 $("#c1").append("

hello

") 在某标签后添加相应内容

如果插入的内容是当前页面中的某些元素，那么会将元素移动到插入的地方：

$("ul").append($("#app"));

（2） 子元素.appendTo(父元素) 住家到某元素，子元素添加到父元素

$("p").appendTo("div") 将某内容添加到某标签后

（3）在某标签前添加相应内容

$("ul").prepend("

我是第一个li元素

") 在某标签前添加相应内容

$("

我是第一个li元素

").prependTo($("ul")) 将某标签添加到某标签前

（4）after、before 

$("ul").after("

我是一个三级标题

");

$("ul").before("

我是一个二级标题

");

（5）insertAfter、insertBefore

$("

111

").insertAfter("ul");

$("

111

").insertBefore("ul");

 

2）复制操作

clone()克隆匹配的DOM元素并且选中这些克隆的副本，如果clone(true)，则副本与真身一样具有事件处理能力

$('button').click(function(){
    $(this).clone(true).insertAfter(this);
})

 

3）替换

replaceWith() ：将所有匹配的元素替换成指定的HTML或DOM元素

// 将所有的h5标题替换为a标签
$('h5').replaceWith('hello world');

// 将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));

replaceAll()：用匹配的元素替换到所有selector匹配到的元素

$("

---

按钮").replaceAll('h4');

 

4）删除操作

remove()：删除节点后，事件也会删除（简而言之，删除了整个标签）

$("ul").remove();

detach()：删除节点后，事件会保留

$('button').detach();

empty() 只是清空了被选元素的内容

$('ul').remove();

 

 

 

7. 位置属性

1）position，获取匹配元素相对父元素的偏移位置

 

2）offset，获取匹配元素在当前窗口的相对偏移，返回的对象包含两个整形属性：top和left

$(“p”).offset();
$("div").offset().left;
$("p").offset().top;

 

3）scrollTop，获取匹配元素相对滚动条顶部的偏移，文档被卷起的像素值

 

4）scrollLeft，获取匹配元素相对滚动条左侧的偏移，文档被卷起的像素值

$(document).scrollTop();
$(document).scrollLeft();

// 监听文档滚动的jquery方法
$(document).scroll(function(){
    console.log($(document).scrollTop());
    console.log($(document).scrollLeft());
});

 

5）innerHeight，匹配第一个匹配元素内部区域高度（包括补白、不包括边框）

$("#box").innerHeight()

 

6）innerWidth，匹配第一个匹配元素内部区域宽度（包括补白、不包括边框）

$("#box").innerWidth();

 

7）outerHeight，获取第一个匹配元素外部高度（默认包括补白和边框）

$("#box").outerHeight();

 

8）outerWeight，获取第一个匹配元素外部宽度（默认包括补白和边框）

$("#box").outerWidth();

 

9）width()，height()设置宽高

$("#box").width();

 

模仿淘宝导航栏

 

返回顶部的代码案例：

    
    
    


    
Hello World
    
Hello World
    
Hello World

    
返回顶部

    
    

 

3）尺寸

height([val]) 获取高度值

width([val]) 获取宽度值

 

菜单滑动代码案例：

    
    
    


    

        

    

    

        

            

                

                    
第一部分
                    
第二部分
                    
第三部分
                
            
            

                
法兰西
                
英吉利
                
美利坚
            
        
    

    
    

 

关于each的return补充

// jquery的遍历方法 .each()
$("li").each(function(index, ele){
    var isDanger = $(this).hasClass("danger");
    
    if(isDanger){
        $(this).css("color", "red");
    }else{
        $(this).css("color", "green");
    }
}

 // 1. $.each return，跟外层函数无关
        // 2. $.each return false，表示each退出
        function f1(){
            var li = [1, 2, 3];
            $.each(li, function(k, v){
                console.log(k, v);
                if(k == 1){
                    return false;
                }
            });
            // end能够给在日志中输出
            console.log('end');
        }

 

选项卡案例：

    
    
    


    

        

            
a
            
b
            
c
            
d
        
        

            

                
a1
                

                    
a1
                    
a2
                    
a3
                    
a4
                
            
            

                
b1
                

                    
b1
                    
b2
                    
b3
                    
b4
                
            
            

                
c1
                

                    
c1
                    
c2
                    
c3
                    
c4
                
            
            

                
d1
                

                    
d1
                    
d2
                    
d3
                    
d4
                
            
        
    

    
    

 

小米官网效果1案例：

    
    
    


    

        

            
百度一下，你就知道
            
百度一下，你就知道

            
百度一下，你就知道
            
百度一下，你就知道
            
百度一下，你就知道
            
百度一下，你就知道
            
百度一下，你就知道
            
百度一下，你就知道
        
    

    
    

 

动态实现轮播图案例：

    
    
    


    

        


        
        

    
    播放
    停止

    
    

 

 

 

8. 事件

加载DOM：.ready()，将函数绑定到文档的就绪事件（当文档完成加载时）

$(document).ready(function(){}) --------> $(function(){}) 先等待文档流加载完，再执行jQuery代码

1）事件流：描述的是从页面中接收事件的顺序

“DOM2级事件”规定的事件流包括三个阶段：

• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段

 

2）jQuery的事件对象和事件冒泡

事件对象的常见属性

e.type，获取事件的类型

e.target，获取事件发生的DOM对象

e.pageX和e.pageY，获取到光标相对于页面的x的坐标和y的坐标

e.which，该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键

 

3）事件绑定

 

4）自定义事件和事件代理

$("ul").delegate("li", "click", function(){}) 什么时候使用再绑定

 

5）鼠标事件

 

6）表单事件

    
    
    


    

        
            巧克力
            糖果
            焦糖
            曲奇饼
            烧饼
            麦香饼
        

        
        
        
    

    

    



    
    

 

 

事件代码案例：

    
    
    


    

        
1
        
2
        
3
        
4
        
5
    
    添加

    
    

 

 

 

9. jQuery Ajax

Ajax = 异步的javascript和XML(Asynchronous Javascript and XML)

简言之，在不重载整个网页的情况下，Ajax通过后台加载数据，并在网页上进行显示。

通过jQuery Ajax方法，能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON - 同时能够把这些外部数据直接载入网页的被选元素中。

 

1）jQuery的load()方法

jQuery load()方法是简单但强大的Ajax方法。

load()方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：$("selector").load(url, data, callback);

url为必要参数，规定记载的url地址

data为可选参数，规定与请求一同发送的查询字符串键值对的集合

callback为可选参数，规定load()方法完成后执行的函数名称

$("btn").click(function(){
    // 只传了一个url，表示在id为#new-projects的元素里加载index.html
    $("#new-projects").load("./index.html");
})

$("btn").click(function(){
    // 只传一个url，导入的index.html文件含有多个传递函数，类似于：index/html?name='张三'
    $("#new-projects").load("./index.html", {"name": "adam", "age": 22});
})

$("btn").click(function(){
    // 加载文件之后，会有个回调函数，表示加载成功的函数
    $("#new-projects").load("./index.html", {"name": "bruce", "age": 20}, function(){
        alert("回调函数");
    });
})

 

2）jquery的getJSON方法

jQuery的Ajax中使用getJSON()方法异步加载JSON格式数据。

语法：$.getJSON(url, [data], [callback])

url参数为请求加载json格式文件的服务器地址

data可选参数为请求时发送的数据

callback为数据请求后调用的回调函数

$getJSON("./data/getJSON.json", function(data){
    var str = "";
    $.each(data, function(index, ele){
        $("ul").append("
" + ele.name + "
");
    });
})

 

3）jquery的$.get()方法

$.get()方法通过HTTP GET请求从服务器上请求数据

语法：$.get(URL, callback);

url是必需参数，规定请求的路径

callback参数为数据请求成功后执行的函数

$.get("./data/getJSON.json", function(data, status){
    console.log(status);
})

 

4）jqeury的$.post()方法

于get()方法相比，post()方法多用于以POST方式向服务器发送数据，并将处理结果返回页面

语法：$.post(URL, data, callback);

url为必需函数，规定请求的路径

data参数是连同请求发送的数据

callback参数为数据请求成功后执行的函数

$.post("/index", {"name": "adam"}, function(data, status){
    console.log(status);
})

 

5）jquery的$.ajax()方法

jquery的$.ajax()方法是做ajax技术经常使用的一个方法。

参数如下：

1. url：要求为String类型的参数，（默认当前页面地址）

2. type：要求为String类型的参数，请求方式（post或get）默认为get

3. timeout：要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4. async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5. cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6. data：要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{"name": "adam"}转换为&name=adam。如果是数组，jQuery将自动为不同值对应同一个名称。例如{foo:["bar1", "bar2"]}转换为&foo=bar1&foo=bar2

7. dataType：要求为String类型的参数，预期服务器返回的数据类型。如果不指定，jQuery将自动根据http包mime信息返回repsonseXML或responseText，并作为回调函数参数传递。可用的类型如下：xml：返回XML文档，可用jQuery处理。html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都转为get请求。json：返回JSON数据。jsonp：JSONP格式。使用JSONP形式调用函数时，例如myurl?callback=?，jQuery将自动替换后一个“？”为正确的函数名，以执行回调函数。text：返回纯文本字符串

$(document).ready(function(){
    // get请求
    $.ajax({
        url: "./index.html",
        type: "get",
        dataType: "json",
        success: function(data){
            console.log(data);
        },
        error: function(){
            
        }    
    })


    // post请求
    $.ajax({
        url: "./index.html",
        type: "post",
        data: {
            username: "adam",
            password: "123",
        },
        success: function(data){
            if(data.state == 'ok' && data.status == "200"){
                console.log("登陆成功");
            }
        },
        error: function(err){
            console.log(err);
        }
    })
})

 

 

 

11. jQuery扩展

jQuery.extend(object) 在jQuery命名空间上增加两个函数

jQuery.extend({
            min:function(a,b){return a < b ? a : b},
            max:function(a,b){return a > b ? a : b}
        });
        
        jQuery.min(10, 20) // 结果为10
        jQuery.max(10, 20) // 结果为20

jQuery.fn.extend(object) 扩展jQuery元素集来提供新的方法（通常用来制作插件）

 

增加两个插件方法的代码案例：

 

jQuery.fn.extend({
            check:function(){
                return this.each(function(){this.checked = true; });
            },
            uncheck:function(){
                return this.each(function(){this.checked = false; });
            }
        });
        
        $("input[type='checkbox']").check();
        $("input[type='checkbox']").uncheck();

 

 

 

12. 动画效果

1）隐藏与显示代码案例：

    
    
    


    
Hello World!
    隐藏
    显示
    隐藏/显示

    
    

2）淡入与淡出代码案例

    
    
    


    

    

    


    fadein
    fadeout
    fadetoggle
    fadeto

    
    

 

3）下滑/隐藏代码案例

    
    
    


    
出现
    
隐藏
    
Toggle
    
Hello World


    
    

4）轮播图代码案例：

    
    
    


    

        

            

            

            

        


        

            
1
            
2
            
3
        

        
<
        
>
    


    
    

5）拖动面板代码案例：

    
    
    


    

        

            标题
        
        

            内容
        
    

    
    

 

6）模态对话框代码案例：

    
    
    


    添加
    

        

            

                
主机名
                
IP
                
端口
                
操作
            
        
        

            

                
t1.com
                
1.1.1.1
                
80
                
Edit
            
            

                
t2.com
                
1.1.1.1
                
8888
                
Edit
            
            

                
t3.com
                
1.1.1.1
                
9999
                
Edit
            
        
    

    

    

        

            

            

            

            
            
        
    

    
    

 

7）clone方法应用的代码案例：

    
    
    


    

        

            

                
+
                

                

            
        
    

    
    

 

8）编辑框代码示例：

    
    
    


    

        全选
        反选
        取消
        进入编辑模式
    

    

        

            

                
选择
                
主机名
                
端口
                
状态
            
        
        

            

                

                
t1
                
t11
                
在线
            
            

                

                
t2
                
t22
                
在线
            
            

                

                
t3
                
t33
                
下线
            

        
    

    
    

 

9）jQuery放大镜代码示例：