jQuery

jquery是一个快速、小且功能丰富的JavaScript库。使HTML文档的遍历和操作、事件处理、动画和Ajax等操作变得更加简单；使用了一个易于使用的API，可以跨多种浏览器工作。

影响性能，每个请求都需要下载jQuery文件，大量请求也会浪费带宽。

选择器

#id：根据id匹配一个元素；

element：根据给定的元素标签名匹配所有元素；

.class：根据给定的css类名匹配元素；

*：匹配所有元素；

selector1,selector2,selectorN：指定任意多个选择器，并将匹配到的元素合并到一个结果内；

$("#myDiv")
$("div")
$(".myClass")
$("*")
$("div, span, p.myClass")

ancestor descendant：在给定的祖先元素下匹配所有的后代元素

parent > child：在给定的父元素下匹配所有的子元素；

prev + next：匹配所有紧接在 prev 元素后的next元素；

$("form input")
$("form > input")
$("label + input")

:first：获取第一个元素；

:last：获取最后一个元素；

:even：匹配所有索引值为偶数的元素，从 0 开始计数；

:odd：匹配所有索引值为奇数的元素，从 0 开始计数。

$('li:first')
$('li:last')
$("tr:even")
$("tr:odd")

[attribute]：匹配包含给定属性的元素。

[attribute=value]：匹配给定的属性是某个特定值的元素

$("div[id]")  //有id属性的div元素
$("input[name='user']")

:input：查找所有的input元素；

:text：匹配所有的单行文本框；

:password：匹配所有密码框；

:submit：查找所有提交按钮；

...

$(":input")
$(":text")
$(":password")
$(":submit")
...

属性

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法；

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

attr(name|properties|key,value|fn)：设置或返回被选元素的属性值。

removeAttr(name)：删除匹配元素中的一个属性；

// 获取src属性值
$("img").attr("src")
// 通过字典对象设置属性
$("img").attr({ src: "test.jpg", alt: "Test Image" })
// 通过键值对设置属性
$("img").attr("src","test.jpg");
// 回调函数
$("img").attr("title", function() { return this.src });
// 删除属性
$("img").removeAttr("src");

prop(name|properties|key,value|fn)：获取在匹配的元素集中的第一个元素的属性值；

removeProp(name)：用来删除由.prop()方法设置的属性集。

// 查看checkbox是否被选中
$("input[type='checkbox']").prop("checked");
// 禁用所有checkbox
$("input[type='checkbox']").prop({disabled: true});
// 选中所有的checkbox
$("input[type='checkbox']").prop("checked", true);
// 通过函数设置checkbox全部选中
$("input[type='checkbox']").prop("checked", function() {return true;});
// 删除p标签的luggageCode属性
$("p").removeProp("luggageCode")

HTML代码

html([val|fn])：获取第一个匹配元素的html内容；设置所有的匹配元素的html内容。

text([val|fn])：获取第一个匹配元素的文本内容；设置所有的匹配元素的文本内容。

val([val|fn|arr])：设置或获得匹配元素的当前的value属性值。

// html内容
$('p').html();
$("p").html("Hello <b>world</b>!");
// 内容文本
$('p').text();
$("p").text("Hello world!");
// value属性值
$("input").val();
$("input").val("hello world!");

CSS类

addClass(class|fn)：为所有匹配的元素添加指定的类名；

removeClass([class|fn])：从所有匹配的元素中删除全部或者指定的类；

toggleClass(class|fn[,sw])：如果存在（不存在）就删除（添加）一个类。

// 为匹配的元素添加类
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
// 从匹配的所有元素中删除类
$("p").removeClass("selected");
//删除匹配元素的所有类
$("p").removeClass();
// 为匹配的元素切换 'selected' 类
$("p").toggleClass("selected");

DOM

内部插入

append(content|fn)：向每个匹配的元素内部追加内容；

appendTo(content)：把所有匹配的元素追加到另一个指定的元素元素集合中；

prepend(content|fn)：向每个匹配的元素内部前置内容；

prependTo(content)：把所有匹配的元素前置到另一个指定的元素元素集合中。

// 向所有p标签元素的内容中追加html内容
$("p").append("<b>Hello</b>");
// 向所有的div标签元素中追加id为main的标签
$("#main").appendTo("div");

$("p").prepend("<b>Hello</b>");
$("p").prependTo("#foo");

外部插入

after(content|fn)：在每个匹配的元素之后插入内容；

before(content|fn)：在每个匹配的元素之前插入内容；

insertAfter(content)：把所有匹配的元素插入到另一个指定的元素元素集合的后面；

insertBefore(content)：把所有匹配的元素插入到另一个指定的元素元素集合的前面。

// 在所有段落之后插入一些HTML标记代码
$("p").after("<b>Hello</b>");
// 在所有段落之后插入一个DOM元素
$("p").after( $("#foo")[0] );
$("p").before("<b>Hello</b>");
$("p").before( $("#foo")[0] );
// 把所有段落插入到一个元素之后
$("p").insertAfter("#foo");
$("p").insertBefore("#foo");

筛选

eq(index|-index)：获取当前链式操作中第N个jQuery对象，返回jQuery对象；

first()：获取第一个元素；

last()：获取最后一个元素。

filter(expr|obj|ele|fn)：筛选出与指定表达式匹配的元素集合；

map(callback)：将一组元素转换成其他数组。

// 获取匹配的第二个元素
$("p").eq(1)
// 获取匹配的第一个元素
$('li').first()
// 获取最后一个元素
$('li').last()
// 保留带有select类的元素
$("p").filter(".selected")
// 把form中的每个input元素的值建立一个列表
$("p").append( $("input").map(function(){return $(this).val();}).get().join(", ") );

children([expr])：所有子元素的集合。

siblings([expr])：所有兄弟元素的集合

next([expr])：下一个兄弟元素

nextAll([expr])：之后的所有兄弟元素

nextUntil([e|e][,f])：查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止

prev([expr])：下一个兄弟元素

prevAll([expr])：之前的所有兄弟元素

prevUntil([e|e][,f])：查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止

parent([expr])：父级元素

parents([expr])：祖先元素的集合

parentsUntil([e|e][,f])：查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

$("div").children()
$("div").children('p')  //所有为p标签的子元素
$("div").siblings()
$("p").next()
$("p").nextAll()
$('#table').nextUntil('tr')
$("p").parent()
$("span").parents()
$('li').parentsUntil('.main')

事件

事件委托

后续添加进来的元素也会监听事件

on(events,[selector],[data],fn)：在选择元素上绑定一个或多个事件的事件处理函数。

one(events,[data],fn)：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

// 点击段落时，显示其文本内容
$("p").on("click", function(){
alert( $(this).text() );
});
// 阻止div标签下a标签跳转页面
$("div").on("a", function(event) {
  event.preventDefault();
});

// 当所有段落被第一次点击的时候，显示所有其文本
$("p").one("click", function(){
  alert( $(this).text() );
});

事件

 后续添加的元素不会监听事件。

$("p").click();    　　//单击事件
$("p").dblclick();    //双击事件
$("input[type=text]").focus()  //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur()   //元素失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup()  //元素上放松鼠标按钮时触发事件
$("p").mousemove()     //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover()     //当鼠标指针位于元素上方时触发事件
$("p").mouseout()    　//当鼠标指针从元素上移开时触发事件
$(window).keydown()    //当键盘或按钮被按下时触发事件
$(window).keypress()   //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup()     //当按钮被松开时触发事件
$(window).scroll()     //当用户滚动时触发事件
$(window).resize()     //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change()    //当元素的值发生改变时触发事件
$("input").select()    //当input 元素中的文本被选择时触发事件
$("form").submit()     //当提交表单时触发事件
$(window).unload()     //用户离开页面时

ajax

$.ajax(url,[settings])

url：一个用来包含发送请求的URL字符串

settings：AJAX 请求设置。所有选项都是可选的。

accepts：通过请求头发送给服务器，告诉服务器当前客户端可以接受的数据类型；

async：默认为true，所有请求均为异步请求；

contentType：发送信息至服务器时内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")；

data：发送到服务器的数据，将自动转换为请求字符串格式；

dataType：预期服务器返回的数据类型，如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断；

type：请求方式，默认GET；

headers：一个额外的"{键:值}"对映射到请求一起发送；

timeout：设置请求超时时间（毫秒）

beforeSend：发送请求前执行的函数(全局)；

complete：请求完成后回调函数(全局)

success：请求成功后的回调函数(全局)

error：请求失败时调用的函数(全局)

statusCode：可以针对返回不同响应码来设置不同的函数；

jsonp：一个jsonp请求中重写回调函数的名字，比如{jsonp:'callback'}会导致将"callback=?"传给服务器

jsonpCallback： 为jsonp请求指定一个回调函数名。

<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
    $("#submit").on('click',function(){
        $.ajax({
            url: "/ajax2.html",
            type: 'POST',
            headers: {foo: "hi"},
            data: {username: "jerry", password: "123"},
            dataType: "json",
            beforeSend: function(){
                alert('before');
            },
            success: function(data, status){
                //data = JSON.parse(data);  如果dataType不指定json，需要对data转换
                console.log(data);
                console.log(status);
            },
            statusCode: {
                "400": function(){
                    alert(400);
                },
                "404": function(){
                    alert(404);
                }
            }
        })
    })
</script>

JSONP

基于django的后端代码

def ajax2(request):
    func = request.GET.get('callback', None)
    data = {'user': 'admin', 'city': 'beijing', 'job': 'teacher'}
    return HttpResponse('%s(%s)' % (func,data))

自定义回调函数名

<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
    $("#submit").on("click", function(){
        $.ajax({
            url: "172.30.100.111:/jsonp.html",
            dataType: "jsonp",
            jsonp: "callback",
            jsonpCallback: "fetch",
        })
    });
    function fetch(data){
        console.log(data)
    }
</script>

不自定义回调函数名，直接通过success调用。

<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
    $("#submit").on("click", function(){
        $.ajax({
            url: "172.30.100.111:/jsonp.html",
            dataType: "jsonp",
            jsonp: "callback",
            success: function(data){
                console.log(data)
            },
        })
    });
</script>