jQuery学习笔记

介绍

JavaScript 的框架有很多，比如 prototype、JQuery、ExtJS 等等。jQuery 的通用性很好。 jQuery 设计思想是将原始的 dom 对象封装成一个 jQuery 对象，通过调用 jQuery 对象的方 法来实现对原始的 dom 对象的操作。这样设计的目的是：是为了更好地兼容不同的浏览器, 简化代码。

所以有了 jQuery 就可以把 DOM 对象封装成 jQuery 对象，通过 jQuery 对象提供的方法和属性来更方便地操作 DOM 对象

编程步骤

step1 使用 jQuery提供的选择器找到节点,一般情况下，jQuery会将找到的节点封装成jQuery对象。 step2 调用 jQuery 对象提供的方法。

DOM 对象和 jQuery 对象的相互转换 dom 对象转换成 jQuery 对象

// 将DOM对象转换成jQuery对象
function f1() {
	var obj = document.getElementById("d1");
	var jobj = $(obj);
	alert(jobj.html());
}

jQuery 对象转换成 dom 对象

 // 将jQuery对象转换成DOM对象
        function f2() {
            var jobj = $("#d1");
            // 调jQuery对象的get方法得到js对象数组，里面只有一个js对象
            var obj = jobj.get()[0];
            alert(obj.innerHTML);
        }

或者

 // 将jQuery对象转换成DOM对象
        function f2() {
            var jobj = $("#d1");
            // 调jQuery对象的get方法得到js对象数组，里面只有一个js对象
            var obj = jobj.get(0);
            alert(obj.innerHTML);
        }

模仿 jQuery

DOCTYPE html>


    
    Title
    
    
        // 模拟jquery的写法
        // 功能：将普通的DOM对象封装成自定义类型的对象
        function $f(id) {
            var obj = document.getElementById(id);
            return new MyClass(obj);
        }

        // 自定义类型 MyClass
        function MyClass(obj) {
            this.obj = obj;
            // 定义属性html，实则定义函数
            this.html = function () {
                return this.obj.innerHTML;
            };
        }

        // 调用
        function f1() {
            var obj = $f("a1");
            alert(obj.html());
        }
    



    hello jQuery

同时使用 jQuery 与 prototype

jQuery 和 prototype 都含有名称为 $ 的函数，所以如果你同时引入了 jQuery 和 prototype，会导致函数$()无法正常使用。

解决办法如下：

    // jQuery的$函数改名 $a
        let $a = jQuery.noConflict();

        function f1() {
            // prototype$函数不变
            var obj = $("d1");
            alert(obj.innerHTML);
        }

        function f2() {
            var obj = $a("#d1");
            alert(obj.html());
        }

jQuery 选择器/筛选器

jQuery 选择器模仿 css 选择器的语法，其作用是，查找符合选择器要求的节点。

基本选择器

#id ID选择器。 将属性ID的值为d1的元素的字大小改为30px：

$("#d1").css("font-size","30px");

.class 类选择器。

将属性class的值为.s1的元素的文字大小改为30px：

$(".s1").css("font-size","30px");

element 元素选择器。

将属性class为.s1的p元素的文字大小改成30px：

$("p.s1").css("font-size", "30px");

将div元素的文字大小改成30px：

$("div").css("font-size","30px");

selector1,selector2..selectorn 组合选择器。 将属性ID的值为d1的元素和属性class的值为s1的p元素的文本大小改为40px：

$("#d1,p.s1").css("font-size", "40px");

* 匹配所有元素的选择器。 将所有元素的文本大小改为40px：

层次选择器

select1 select2

 function f7() {
	// 筛选出ID值为u1的元素的所有子元素li，将其中ID值为l2的元素删除掉
	$("#u1 li").remove("#l2");
}

select1>select2 select1+select2 select1~select2

过滤选择器 基本过滤选择器

:first

:last  :not(selector)  :even  :odd :eq(index)

// 筛选出ID值为u1的元素的所有子元素li，并将其中索引值为1的元素li删除掉
$("#u1 li:eq(1)").remove();

 :gt(index)  :lt(index)

内容过滤选择器

 :contains(text)  :empty  :has(selector)  :parent

可见性过滤选择器

 :hidden  :visible

属性过滤选择器

 [attribute]  [attribute=value]  [attribute!=value]

子元素过滤选择器

 :nth-child(index/even/odd)

表单对象属性过滤选择器

 :enabled  :disabled  :checked  :selected

表单选择器

:input

:text

// 读取文本输入框的值，多个文本输入框的情况下之后获取第一个文本框的值
alert($(":text").val());
// 将所有文本输入框的值设为Hello
$(":text").val("Hello");

 :pasword  :radio  :checkbox  :submit  :image  :reset  :button  :file  :hidden

jQuery API

参见：https://api.jquery.com/

读取或设置节点的内容 text()

读取或设置元素的文本内容，相当于DOM对象的innerText属性。

// 读取属性ID的值为d1的元素的文本内容
var str = $("#d1").text()
// 将ID值为d1的元素的文本内容设置为"wocao"
$("#d1").text("wocao");

html()

读取或设置元素的html内容，相当于DOM对象的innerHTML属性。

// 读取属性ID的值为d1的元素的html内容
var str = $("#d1").html();
// 设置属性ID的值为d1的元素的html内容为"Hello jQuery"
$("#d1").html("Hello jQuery");

attr()

读取或设置元素的属性值

// 读取ID值为d1的元素的属性ID的值
alert($("#d1").attr("id"));
// 将ID值为d1的元素的属性style的值设置为"font-size:30px;color:red;"
$("#d1").attr("style","font-size:30px;color:red;");

val()

读取或设置下拉列表的值

插入节点 append()

向每个匹配的元素内部追加内容。

    function f4() {
            // 先构造一个jQuery对象
            var obj = $("
5
");
            // 向ID值为u1的元素内部追加元素obj
            $("#u1").append(obj);
        }

prepend()

向每个匹配的元素内部前置内容

// 向所有的元素select的内部前置选项"北京0"
$("select").prepend("北京0");

after()

在每个匹配的元素之后插入内容

function f6() {
            // 在每个元素ul之前插入元素节点
我是头部
            $("ul").before("
我是头部
");
            // 在每个元素ul之后插入元素节点
我是尾部
            $("ul").after("
我是尾部
");
        }

before()

在每个匹配的元素之前插入内容

删除节点 remove()

 // 筛选出ID值为u1的元素的所有子元素li，并将其中索引值为1的元素li删除掉
$("#u1 li:eq(1)").remove();

remove(selector)

 function f7() {
	// 筛选出ID值为u1的元素的所有子元素li，将其中ID值为l2的元素删除掉
	$("#u1 li").remove("#l2");
}

empty()

清空元素节点中的内容

function f9() {
	// 筛选出ID值为u1的元素的所有子元素li，并将其中索引值为1的元素的内容清空掉
	$("#u1 li:eq(1)").empty();
}

复制节点

clone()，复制节点，默认不复制源节点的行为 clone(true)，复制节点，并且会复制源节点的行为

// 当整个html文件解析完毕，生成相应的dom树之后
        // 会执行$(function (){...})参数中的函数内部的代码
        $(function () {
            $("#u1 li:eq(2)").click(function () {
                alert("干什么嘛？");
            });

            $("#b1").click(function () {
                var obj = $("#u1 li:eq(2)").clone(true);// true表示源元素的行为也会被复制
                $("#u1").append(obj);
            });
});

操作属性

attr()

读取指定属性的值

设置指定属性的值

设置多个指定属性的值

  $(function () {
            $("#b1").click(function () {
                $("#d1").attr({"style":"font-size:40px;","class":"s1"});
            });
        });

样式操作

attr("class","") 设置属性class的值

// 将筛选出来的元素的属性class的值设为s1
$('#d1').attr('class','s1');

addClass('') 添加或追加属性class

// 给筛选出来的元素添加属性class，并将该属性的值设为s2，如果存在属性class则追加值
$('#d1').addClass('s2');

removeClass('') 移除属性class

// 将值为s1的属性class删除掉
$('#d1').removeClass('s1');
// 将值为s1或s2的属性class删除掉
$('#d1').removeClass('s1 s2') 
// 删除所有的样式
$('#d1').removeClass() 

toggleClass() 切换样式

// 如果存在值为s1的属性class则删除；如果不存在则添加
$('#d1').toggleClass('s1');

hasClass('') 是否有某个样式

//判断是否有指定样式
alert($('#d1').hasClass('s1'));

css('') 读取样式属性的值。

// 读取样式属性font-sytle的值
var str = $('#d1').css("font-style");
alert(str);

css('','') 设置指定样式属性的值

//设置样式
$('#d1').css('font-style','italic');

css({'':'','':''}) 设置多个样式

//设置样式
$('#d1').css({'font-style': 'italic', 'font-size': '60px'});

遍历节点

children() 只考虑子元素，不考虑其它后代元素。

// 获取指定元素的所有子元素，返回一个对象数组
var array = $("#d1").children();
// 将数组中的所有元素对象的样式属性color的值设为red
array.css("color", "red");

next()

// 选取指定元素的下一个元素，将其颜色设为红色
$("#d1").next().css("color", "red");

prev()

// 选取指定元素的上一个元素，将其颜色设为红色
$("#d1").prev().css("color", "red");

siblings() 兄弟节点

// 选取指定元素所有兄弟元素，将它们的背景色改为粉色
$("#d1").siblings().css("background", "#ff88dc");

find(selector)

// 将ID值为d1的元素的后代元素span的颜色改为黄色
// find函数会遍历所有的后代元素去寻找目标元素
$("#d1").find("span").css("color", "yellow");

事件处理 绑定点击事件

// 绑定事件的正式写法
$("#b1").bind("click", function () {
	$("#d1").css("font-size", "60px");
});

简化写法：

// 绑定事件的简化写法
$("#b1").click(function () {
	$("#d1").css("font-size", "60px");
});

绑定悬停事件

 // 给元素注册悬停事件监听器
            $("#b1").hover(function () {
                // this代表当前发生事件的元素
                // 光标移入时执行
                // $(this).css("background", "#ff88ee");
                // $(this).css("background-color", "#ff88ee");
                $(this).css({"background":"#ff88ee","border":"0px"});
            }, function () {
                // 光标移出时执行
                // $(this).css("background", "#fff8dc");
                // $(this).css("background-color", "#fff8dc");
                $(this).css({"background":"#fff8dc","border":"0px"});
            });

事件冒泡

$("#a1").click(function (e) {
                alert("你点击了一个链接");
                // 阻止事件冒泡，即阻止事件的传播、传递、扩散
                e.stopPropagation();
            });
            $("#d1").click(function () {
                alert("你点击了一个div");
            });
            $("a.s1").click(function (e) {
                // 事件对象的属性target返回的是发生该事件的元素对象（事件源），是一个普通的DOM节点对象
                var obj = e.target;
                alert(obj.innerHTML);
            });

动画 显示

show(“slow”/“normal”/“fast”/100) 可以不传参数

隐藏

hide(“slow”/“normal”/“fast”/100) 可以不传参数

改变不透明度

fadeIn() fadeOut()

改变元素的高度

slideUp() slideDown()

切换

$( "#clickme" ).click(function() {
                $( "#book" ).toggle( "slow", function() {
                    // 动画完成后执行     
                });
            });

回调函数

以上函数可以在执行完劢画之后，再执行一个回调函数（其实就是事件监听器）。

show('slow',function(){
//写上动画执行之后要执行的操作。
})

自定义动画

animate(params,speed,[callback])

示例代码：

    
    jQuery动画API演示
    
        #d1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }


    
    
    
        $(function () {
            $("#b1").click(function () {
                $('#d1').animate({'left': '300px', 'top': '100px'}, 3000);
                $('#d1').animate({'top': '400px'}, 2000).hide('slow');
            });
        });

    

注意：移动的元素必须设置样式属性 position 的值为 relative。

jQuery操作数组

$(选择器) 操作返回的如果是一个数组，可以使用如下方法来操作：

each(fn(i))

循环遍历每一个元素，this 代表被迭代的 dom 对象，$(this) 代表被迭代的 jQuery 对象。

示例代码：

// 返回一个jQuery对象数组
var array = $("#u1 li");
// each函数会遍历数组，遍历到一个元素就会调用指定的回调函数，
// 并且会将遍历到元素的下标索引值作为参数传给回调函数
array.each(function (index) {
	if (index == 0) {
		$(this).css("color", "red");
	} else {
		$(this).css("color", "green");
	}
})

eq(index)

返回下标索引值为 index 的 jQuery 对象

示例代码：

// 返回一个jQuery对象数组
var array = $("#u1 li");
// 将数组中下标索引值为1的元素的颜色设为红色
array.eq(1).css("color", "red");

index(obj)

返回下标，其中 obj 可以是 dom 对象或者 jQuery 对象。

 // 返回一个jQuery对象数组
                var array = $("#u1 li");
                // 返回指定下标索引值的jQuery对象
                var obj = array.eq(2);
                // 返回指定对象在数组中的下标索引值
                let index = array.index(obj);
                alert(index);

4. length 数组元素的个数

get()

返回 dom 对象组成的数组

// 返回一个jQuery对象数组
                var $array = $("#u1 li");
                // get函数不传参则返回由DOM对象组成的数组
                var array = $array.get();
                alert(array[1].innerHTML);

get(index)

返回 index+1 处的 dom 对象。

// 返回一个jQuery对象数组
var array = $("#u1 li");
// 返回数组中指定下标索引值的DOM对象，形象表述就是，将jQuery这层外壳剥掉后，将里面的DOM对象返回
let obj = array.get(1);
alert(obj.innerHTML);

jQuery 对 ajax 的支持

通过 jQuery 发送 ajax 请求，服务端返回 JSON 类型的数据：

$.ajax({
                    'url': 'car-info.do',
                    'type': 'post',
                    'data': {'name': $('#s1').val()},
                    'dataType': 'json',
                    'success':
                        function (data, statusText) {
                            // 在ID为s1的元素后面插入

                            $("#s1").after("
");
                            // 浏览器会自动将服务器返回的json数据封装成js对象，并由变量data来接收这个对象
                            $("#d1").html("报价：" + data.price + "" + "描述：" + data.desc);
                            // 将ID为d1的元素慢慢地向下滑动
                            $("#d1").slideDown("slow");
                            // 开启定时任务线程，该任务线程会在2秒后执行指定的任务（就是个函数），
                            // 这个任务会将ID为d1的元素慢慢地向上滑动
                            setTimeout(function () {
                                $("#d1").slideUp("slow");
                            }, 2000);
                        },
                    'error':
                        function (xhr, e1, e2) {
                            alert('系统错误');
                        }
                });

通过 jQuery 发送 ajax 请求，服务端返回 XML 类型的数据：

 $(function () {
            $("#s1").change(function () {
                // 将之前显示的东西清空
                $('#d1').remove();
                // 通过jQuery发送ajax请求
                $.ajax({
                    'url': 'car-info-1.do',
                    'type': 'post',
                    'data': {'name': $('#s1').val()},
                    'dataType': 'xml',
                    'success':
                        function (data, statusText) {
                            // 在ID为s1的元素后面插入

                            $("#s1").after("
");
                            // data指向一个DOM对象，这个对象就是内存中与xml文档对应的一棵DOM树
                            var obj = $(data);
                            $("#d1").html("报价：" + obj.find("price").text() + "" + "描述：" + obj.find("desc").text());
                            // 将ID为d1的元素慢慢地向下滑动
                            $("#d1").slideDown("slow");
                            // 开启定时任务线程，该任务线程会在2秒后执行指定的任务（就是个函数），
                            // 这个任务会将ID为d1的元素慢慢地向上滑动
                            setTimeout(function () {
                                $("#d1").slideUp("slow");
                            }, 2000);
                        },
                    'error':
                        function (xhr, e1, e2) {
                            // xhr就是ajax对象，e1和e2表示具体的错误信息
                            alert('系统错误');
                        }
                });
            });
        });

以 get 方式通过 jQuery 发送 ajax 请求：

$(function () {
            // 给id为s1的元素注册change时间监听器
            $("#s1").change(function () {
                // 通过jQuery以get方式发送ajax请求
                $.get(
                    "car-info.do",
                    {"name": $("#s1").val()},
                    // 请求成功会回调这个函数
                    function (data, desc) {
                        $("#d1").remove();
                        $("#s1").after("
");
                        $("#d1").html(
                            "报价：" + data.price + "" + "描述：" + data.desc
                        );
                        $("#d1").slideDown("slow");
                        // 开启定时器，在预定的时间点会执行指定的函数
                        setTimeout(function () {
                            $("#d1").slideUp("slow");
                        }, 2000);
                    },
                    "json"
                );
            });
        });

函数load()

$() 是 jQuery 的 load 事件处理函数，当 HTML 页面全部加载完后就会执行函数 $()。$(function(){}) 而这个代码语句含义就是将函数对象 function(){} 传入函数 $() 中，那么当执行函数 $() 时，该函数内部就会去执行 function(){} 中的代码。

    
    实现隐藏与显示相互切换的效果
    
        .xs {
            display: none;
        }
    
    
    
    
        $(function () {
            var flag = false;
            $("a").click(function () {
                let flightNo = $(this).text();
                if (flag == false) {
                    // 调用函数load()时，传入两个参数，一个参数是请求地址，另一个参数就是请求时携带的参数列表，
                    // 请求结束后会将响应数据加载到load()方法的拥有者中
                    $(this).next().load("flight-details.do", {"flightNo": flightNo});
                    flag = true;
                } else {
                    $(this).next().empty();
                    flag = false;
                }
            });
        });

    



    
        序号
        航班号
    
    
        1
        ca1008
            
        
    
    
        2
        mu2008
            
        
    

函数 serializeArray() 或者 serialize()

 $(function () {
            // 给id为s1的元素注册change时间监听器
            $("#s1").change(function () {
                // 通过jQuery以get方式发送ajax请求
                $.get(
                    "car-info.do",
                    // 函数serialize()会返回形如name=bmw520的字符串
                    // $("#s1").serialize(),
                    // {"name": $("#s1").val()},
                    // serializeArray()会返回形如{"name":"bmw520}的字符串，即json串
                    $("#s1").serializeArray(),
                    // 请求成功会回调这个函数
                    function (data, desc) {
                        $("#d1").remove();
                        $("#s1").after("
");
                        $("#d1").html(
                            "报价：" + data.price + "" + "描述：" + data.desc
                        );
                        $("#d1").slideDown("slow");
                        // 开启定时器，在预定的时间点会执行指定的函数
                        setTimeout(function () {
                            $("#d1").slideUp("slow");
                        }, 2000);
                    },
                    "json"
                );
            });
        });