JQuery

Jquery

1、主要内容

2、Jquery对象

jQuery是一套兼容多浏览器的javascript脚本库.核心理念是写得更少，做得更多，使用jQuery将极大的提高编写javascript 代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，“如虎添翼"。同时网络上丰富的jQuery 插件也让我们的工作变成了"有了jQuery，一切so easy。"
jQuery在2006年1月由美国人John Resig在纽约的barcamp 发布，吸引了来自世界各地的众多JavaScript 高手加入，由Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的javascript 框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

2.1.Jquery的下载与安装

2.1.1.下载

http:/ljquery.com/下载

2.1.2.版本

jQuery 2.x has the same APl as jQuery 1.x, but does not support InternetExplorer 6, 7,or 8.(不支持ie678,如果需要下载1.X)T

完整版: jquery-2.1.4.js -->学习版本(学习源码想高手学习是最好学习方法)
压缩版:jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)
目前使用版本: jquery-3.5.1.js

2.1.3.优点

提供了强大的功能函数
解决浏览器兼容性问题
实现丰富的UI和插件
纠正错误的脚本知识

2.1.4安装

2.2.Jquery核心

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

$	<===> Jquery

2.3.Dom对象与Jquery包装集对象

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

2.3.1.Dom对象

JavaScript中获取DOM对象，DOM对象只有有限的属性和方法：

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

2.3.2 Jquery包装集对象

? 可以说DOM对象的扩充，在Jquery的世界中将所用的对象，无论是一个还是一组，都封装成一个Jquery包装集，比如获取包含一个元素的Jquery包装集：

var JqueryObject = $('#testDiv');

2.3.3 DOM对象转Jquery对象

? DOM对象转Jquery对象，只需要利用$()方法进行包裹即可

2.3.4 Jquery对象转DOM对象

3、Jquery选择器

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

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

3.1 基础选择器



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

3.2 层次选择器

选择器	名称	举例
后代选择器	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元素

后代选择器：选择父元素的所有指定元素（包含第一代，第二代）

子代选择器>：选择父元素所有的第一代子元素

相邻选择器+：选择元素的下一个指定元素，（只会查找下一个元素，如果元素不存在，则获取不到）

同辈选择器~：所有同辈元素



	
		
		
	
	
	
		层次选择器
			父选择器
				子选择器
				
				
			
			我就是来破坏div相邻状况的！
			选择器2
				选择器2中的选择器

3.3 表单选择器

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

3.4 基本过滤器

开发中若需要对获取到的元素进行筛选，如仅获取指定选择器中的第一个或最后一个元素，偶数行或奇数行中的元素，可以使用jquery提供的基本过滤选择器完成。


  
    姓名 语文 数学
    Tom 76 89 
    Lucy 98 90
    Jimmy 100 99
    John 45 12

姓名	语文	数学
Tom	76	89
Lucy	98	90
Jimmy	100	99
John	45	12

3.5 内容选择器

根据元素内容完成指定元素的获取

选择器	功能描述	示例
:contains(text)	获取内容包含text文本的元素	$("li:contains'js"获取内容中含“js”的元素
:empty	获取内容为空的元素	$("li:empty")获取内容为空的元素
:has(selector)	获取内容包含指定选择器的元素	$("Ii:has('a')")获取内容中含元素的所有元素
:parent	获取内容不为空的元素（特殊）	$("li:parent")获取内容不为空的元素


  
    PHP JavaScript jQuery
    JavaScript
    jQuery

3.6 可见性选择器

选择器	功能描述	示例
:hidden	获取所有隐藏元素	$("li:hidden")获取所有隐藏的元素 :visible 获取所有可见元素 $
:visable	获取所有可见元素	("li:visible")获取所有可见的元素

当指定元素的display设置为none时，可以通过“:hidden”获取隐藏的元素;
当指定元素的display设置为 block时，可以通过“:visible”获取可见的元素。

3.7 属性选择器

jQuery中还提供了根据元素的属性获取指定元素的方式

3.8 子元素选择器

开发中若需要通过子元素的方式获取元素，则可以利用jQuery 提供的子元素选择器完成

更好理解of-type 获取所有含有元素的第1个子元素


  
    Corey, Yehuda, Adam, Todd
  
  
    Nobody, John, Scott, Timo

4、Jquery DOM操作

jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。
常用的从几个方面来操作，查找元素（选择器已经实现)；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；节点;删除、添加、修改、设定节点的CSS样式等。注意:以下的操作方式只适用于jQuery对象。

4.1.操作元素的属性

4.1.1.获取属性

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

属性的分类：

固有属性：元素本身就有的属性（id,name，class,style)
返回值是Boolean的属性，checked，selected,disabled
自定义属性，用户自己定义的属性

区别：

如果是固有属性，attr()和prop()方法均可操作
如果是自定义属性，attr()可以获取，prop()不可获取
如果是返回值Boolean类型的属性
- 若设置了属性，attr()返回具体的值，prop()返回true
- 若未设置属性，attr()返回undefined，prop()返回false

4.1.2.设置属性

attr("属性名","属性值")；

prop("属性名","属性值");

4.1.3.移除属性

选择器.removeAttr("属性名")

总结：如果属性类型是Boolean（checked,selected,disabled)使用prop()方法，否则使用attr()方法



	
		
		操作元素的属性
		
	
	
		
		aa
		 bb

4.2.操作元素的样式

方法	说明
attr("class")	获取class属性的值，即样式名称
attr("class","样式名")	修改class属性的值，修改样式（原本的样式会被覆盖
addClass("样式名")	添加样式名称，如果出现相同的样式，以后出现的为准
css()	添加具体的样式（相当于添加行内样式，样式级别高） css({"样式名":"样式值","样式名":"样式值"}); css("样式名","样式值");
removeClass(class)	移除样式名称



	
		
		操作样式
		
		
	
	
		css方法设置样式
		天蓝色
		红色
		布吉岛色

4.3.操作元素的内容

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

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



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

4.4. 创建元素

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

? $('元素内容')例如：

? $('

this is a paragraph!!

')

4.5. 添加元素

方法	说明
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（）方法后追加内容
		牛
		虎
		
			XXX

4.6.删除元素

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

4.7.遍历元素 each()

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

参数 function 为遍历时的回调函数，每个匹配元素都会去执行这个函数
index 为遍历元素的序列号，从0开始
element是当前的元素，此时是dom元素
在回调函数内部还可以直接使用$(this)来表示当前元素



	
		
		
		
	
	
		each()遍历
		Jquery
		javaee
		http协议
		Servlet

4.8 元素筛选

5、Jquery事件

5.1.ready加载事件

预加载事件，当页面的dom结构加载完毕后执行
ready()类似于onLoad()事件
ready()可以写多个，按顺序执行
$(document).ready(function(){}) 等价于 简写$(function(){})



	
		
		ready加载事件
		
		
	
	
		read加载事件

5.2.绑定事件

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

$(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("事件类型",function(){})`
直接绑定
`$("元素").事件名(function(){})`

绑定多个事件：

1.同时为一个元素的多个事件绑定同一个函数
  指定元素.bind("事件类型1 事件类型2"...,function(){...});
2.为元素绑定多个事件，并设置对应的函数
指定元素.bind("事件类型",function(){}).bind("事件类型",function(){});
3.为元素绑定多个事件，并设置对应的函数
指定元素.bind({"事件类型":function(){},
			 "事件类型":function(){},
			  ...
	})
4.直接绑定
指定元素.事件类型(function(){}).事件类型(function(){})

绑定事件三部曲：

为哪些元素绑定事件？
绑定什么样的事件？
事件触发什么样的操作？



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

6、Jquery Ajax

6.1. $ajax

Asynchronous Javascript And XML，异步JavaScript和XML，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
ajax：异步，无刷新

jquery调用ajax方法：格式：$.ajax({});

参数：

? type:请求方式GET/POST
? url:请求地址
? async:是否异步，默认true表示异步
? data:发送到服务器的数据，请求附带的参数
? contentType:设置请求头
? success: 请求成功调用此函数function(data){}
? error: 请求失败调用此函数

6.2. $get

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

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

//1.请求json文件，忽略返回值
$.get('Js/xxx.json')
//2.请求json文件，传递参数，忽略返回值
$.get('JS/xxx.json',{name:"kangkagn",age:100})
//3.请求json文件，拿到返回值，请求成功后可拿到返回值
$.get('JS/xxx.json',function(data){
    console.log(data);
})
//4.请求json文件，传递参数，拿到返回值
$.get('JS/xxx.json',{name:"kagnkang",password:"1234567"},function(){
    console.log(data);
})

6.3. $Post

几乎同$.get

$.getJSON()

注意：getJSON()只识别json格式的文件

jQuery js