史上最全JQuery

JQuery

主要内容

Jquery对象

​ jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，使用 jQuery 将极大的提高编写 javascript 代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，"如虎添翼"。同时网络上丰富的 jQuery 插件也让我们的工作变成了"有了 jQuery，一切 so easy。" --因为我们已经站在巨人的肩膀上了。

​ jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

Jquery的下载与安装

下载

​ http://jquery.com/ 下载

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6SV9mMGr-1607306634049)(/图片1ythy.png)]

版本

​ jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)

​ （1）完整版 : jquery-2.1.4.js -->学习版本(学习源码 想高手学习是最好学习方法)

​ （2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)

​ 目前使用版本：jquery-3.4.1.js

优点

​ （1）提供了强大的功能函数

​ （2）解决浏览器兼容性问题

​ （3）实现丰富的 UI 和插件

​ （4）纠正错误的脚本知识

​ ......

安装

​ 在页面引入即可

Jquery核心

​ $ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

$ <==> jQuery

Dom对象 与 Jquery包装集对象

​ 明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的Dom对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是dom对象；而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供的方法。

Dom对象

​ javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法：

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

Jquery包装集对象

​ 可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集：

var jQueryObject = $("#testDiv");

Dom对象 转 Jquery对象

​ Dom对象转为jQuery对象，只需要利用$()方法进行包装即可

var domDiv = document.getElementById('mydiv');  // 获取Dom对象
mydiv = $(domDiv);

Jquery对象 转 Dom对象

​ jQuery对象转Dom对象，只需要取数组中的元素即可

// 第一种方式 获取jQuery对象
var jqueryDiv = jQuery('#mydiv');
// 第二种方式 获取jQuery对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom

​ 通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象

$('#mydiv').each(function() {//遍历
       var jquery = $(this);    
});

案例：

write less, do more

Jquery选择器

​ 和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。

​ jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使用的，具体分类如下。基础选择器掌握即可 ,其他用到再查阅。

基础选择器

选择器	名称	举例
id选择器	#id	$("#testDiv")选择id为testDiv的元素
元素名称选择器	element	$("div")选择所有div元素
类选择器	.class	$(".blue")选择所有class=blue的元素
选择所有元素	*	$("*")选择页面所有元素
组合选择器	selector1,selector2,selectorN	$("#testDiv,span,.blue")同时选中多个选择器匹配的元素

    
id选择器1span中的内容
    
元素选择器
    样式选择器

层次选择器

选择器	名称	举例
后代选择器	ancestor descendant	$("#parent div")选择id为parent的元素的所有div元素
子代选择器	parent > child	$("#parent>div")选择id为parent的直接div子元素
相邻选择器	prev + next	$(".blue + img")选择css类为blue的下一个img元素
同辈选择器	prev ~ sibling	$(".blue ~ img")选择css类为blue的之后的img元素

    
        
        
        
        
    
    
        
层次择器
            
父选择器
                
子选择器
                
                
            
    
            

                选择器2
选择器2中的div
            
        
    
    

表单选择器

Forms	名称	举例
表单选择器	:input	查找所有的input元素：$(":input")； 注意：会匹配所有的input、textarea、select和button元素。
文本框选择器	:text	查找所有文本框：$(":text")
密码框选择器	:password	查找所有密码框：$(":password")
单选按钮选择器	:radio	查找所有单选按钮：$(":radio")
复选框选择器	:checkbox	查找所有复选框：$(":checkbox")
提交按钮选择器	:submit	查找所有提交按钮：$(":submit")
图像域选择器	:image	查找所有图像域：$(":image")
重置按钮选择器	:reset	查找所有重置按钮：$(":reset")
按钮选择器	:button	查找所有按钮：$(":button")
文件域选择器	:file	查找所有文件域：$(":file")

    
        
        
        
    
    
        
        
            
            姓名:

            密码:

            年龄:小屁孩
                 你懂得  
 
            爱好:篮球
                 爬床
                 代码

            来自:
                    请选择
                    北京
                    上海
                

            简介:

            头像:

            
            提交
            重置        
            
        
    

Jquery Dom操作

​ jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。

​ 常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。注意：以下的操作方式只适用于jQuery对象。

操作元素的属性

获取属性

方法	说明	举例
attr(属性名称)	获取指定的属性值，操作 checkbox 时， 选中返回 checked，没有选中返回 undefined。	attr('checked') attr('name')
prop(属性名称)	获取具有true和false两个属性的属性值	prop('checked')

        aa
        bb

        

设置属性

方法	说明	举例
attr(属性名称，属性值)	设置指定的属性值， 操作 checkbox 时， 选中返回 checked， 没有选中返回 undefined。	attr('checked',’checked’) attr('name',’zs’)
prop(属性名称，属性值)	设置具有true和false的属性值	prop('checked',’true’)

移除属性

方法	说明	举例
removeAttr(属性名)	移除指定的属性	removeAttr('checked')

    
        
        
        
    
    
        
            
1.attr()
            设置或者返回元素的属性 ;
            
2.prop()
            设置 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled。
        
        

        百度
        新浪
          全选 
    
    

操作元素的样式

​ 对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。

方法	说明
attr(“class”)	获取class属性的值，即样式名称
attr(“class”,”样式名”)	修改class属性的值，修改样式
addClass(“样式名”)	添加样式名称
css()	添加具体的样式
removeClass(class)	移除样式名称

增加元素的具体样式，格式：

1）css({‘样式名’:’样式值’,’样式名2’:’样式值2’})

例：css({"background-color":"red","color":"#fff"});

2）css(“样式名”,”样式值”)

例：css('color','white')

    
        
        
        
        
    
    
        
css()方法设置元素样式
        
天蓝色
         
大红色
         
天蓝色
    
    

操作元素的内容

​ 对于元素还可以操作其中的内容，例如文本，值，甚至是html。

方法	说明
html()	获取元素的html内容
html("html,内容")	设定元素的html内容
text()	获取元素的文本内容，不包含html
text("text 内容")	设置元素的文本内容，不包含html
val()	获取元素value值
val(‘值’)	设定元素的value值

    
        
        
        
    
    
        
html()和text()方法设置元素内容
        

         

        
    
    

创建元素

​ 在jQuery中创建元素很简单，直接使用核心函数即可

$(‘元素内容’);

$('
this is a paragraph!!!
');

添加元素

方法	说明
prepend(content)	在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).prependTo(selector)	把 content 元素或内容加入 selector 元素开头
append(content)	在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).appendTo(selector)	把 content元素或内容插入selector 元素内，默认是在尾部
before()	在元素前插入指定的元素或内容:$(selector).before(content)
after()	在元素后插入指定的元素或内容:$(selector).after(content)

    
        
        
        
        
    
    
        
prepend()方法前追加内容
        
prependTo()方法前追加内容
        
append()方法后追加内容
        
appendTo()方法后追加内容
        男神
        偶像
        

            小鲜肉
        
 
    

    
        
        
        
        
    
    
        
before() 和 after()方法在元素之前后插入内容
        财大气粗
    

删除元素

方法	说明
remove()	删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty()	清空所选元素的内容

    
        
        
        
        
    
    
        
删除元素
        jquery删除
        javase
        http协议
        servlet
    

遍历元素

​ each()

​ $(selector).each(function(index,element)) :遍历元素

​ 参数 function 为遍历时的回调函数，

​ index 为遍历元素的序列号，从 0 开始。

​ element是当前的元素，此时是dom元素。

    
        
        
        
        
    
    
        
遍历元素 each()
        jquery
        javase
        http协议
        servlet
    
    

Jquery事件

ready加载事件

​ ready()类似于 onLoad()事件

​ ready()可以写多个，按顺序执行

​ $(document).ready(function(){})等价于$(function(){})

    
        
        
        
        
    
    
        
页面载入时触发ready()事件
        

        
        
aaa
        
bbbb
        
ccc
        
dddd
    

bind()绑定事件

​ 为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind( eventType [, eventData], handler(eventObject));

​ eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。

​ 这类类型可以包括如下：

​ blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick

​ mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter

​ mouseleave,change, select, submit, keydown, keypress, keyup, error

​ [, eventData]：传递的参数，格式：{名:值,名2:值2}

​ handler(eventObject)：该事件触发执行的函数

简单的bind()事件

    
bind()方简单的绑定事件
    
点击查看名言
    

绑定多个事件

    
bind()方法绑多个事件
    
点击查看名言
    

        人之所以能，是相信能
    

Jquery Ajax

$.ajax

​ jquery调用ajax方法：

​ 格式：$.ajax({});

​ 参数：

​ type：请求方式GET/POST

​ url：请求地址url

​ async：是否异步，默认是true表示异步

​ data：发送到服务器的数据

​ dataType：预期服务器返回的数据类型

​ contentType：设置请求头

​ success：请求成功时调用此函数

​ error：请求失败时调用此函数

get请求

$.ajax({
    type:"get",
    url:"js/cuisine_area.json",
    async:true,
    success : function (msg) {
        var str = msg;
        console.log(str);
        $('div').append("
");
        for(var i=0; i");
                $('li').eq(i).text(msg.prices[i]);
        }
    },
    error : function (errMsg) {
        console.log(errMsg);
        $('div').html(errMsg.responseText);
    }
});

post请求

$.ajax({
    type:"post",
    data:"name=tom",
    url:"js/cuisine_area.json",
    contentType: "application/x-www-form-urlencoded",
    async:true,
    success : function (msg) {
        var str = msg;
        console.log(str);
        $('div').append("
");
        for(var i=0; i");
            $('li').eq(i).text(msg.prices[i]);
        }
    },
    error : function (errMsg) {
        console.log(errMsg);
        $('div').html(errMsg.responseText)
    }
});

$.get

​ 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。

​ 请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

// 1.请求json文件，忽略返回值
$.get('js/cuisine_area.json');                    

// 2.请求json文件，传递参数，忽略返回值
$.get('js/cuisine_area.json',{name:"tom",age:100});    

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.get('js/cuisine_area.json',function(data){
    console.log(data);
});    

// 4.请求json文件,传递参数,拿到返回值    
$.get('js/cuisine_area.json',{name:"tom",age:100},function(data){
    console.log(data);
});

$.post

​ 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。

​ 请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

// 1.请求json文件，忽略返回值
$.post('../js/cuisine_area.json');                    

// 2.请求json文件，传递参数，忽略返回值
$.post('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.post('js/cuisine_area.json',function(data){
    console.log(data);
});                    

// 4.请求json文件,传递参数,拿到返回值    
$.post('js/cuisine_area.json',{name:"tom",age:100},function(data){
    console.log(data);
});

$.getJSON

​ 表示请求返回的数据类型是JSON格式的ajax请求

$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
    console.log(data); // 要求返回的数据格式是JSON格式
});

$.get('js/cuisine_area.json');

// 2.请求json文件，传递参数，忽略返回值
$.get('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.get('js/cuisine_area.json',function(data){

console.log(data);

});

// 4.请求json文件,传递参数,拿到返回值
$.get('js/cuisine_area.json',{name:"tom",age:100},function(data){

console.log(data);

});

### $.post

​    这是一个简单的 POST 请求功能以取代复杂 $.ajax 。

​    请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

// 1.请求json文件，忽略返回值
$.post('../js/cuisine_area.json');

// 2.请求json文件，传递参数，忽略返回值
$.post('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.post('js/cuisine_area.json',function(data){

console.log(data);

});

// 4.请求json文件,传递参数,拿到返回值
$.post('js/cuisine_area.json',{name:"tom",age:100},function(data){

console.log(data);

});

### $.getJSON

​    表示请求返回的数据类型是JSON格式的ajax请求

$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){

console.log(data); // 要求返回的数据格式是JSON格式

});