jQuery

jQuery

1.jQuery 概述

jQuery 是一个快速、简洁的 JavaScript 库。

jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

2.jQuery 的入口函数

(1)

$(document).ready(function(){
	  ...  //  此处是页面DOM加载完成的入口
		});

(2)简写：

$(function () {   
	  ...  // 此处是页面 DOM 加载完成的入口
		}) ;

3.jQuery 选择器

3.1 jQuery 基础选择器

$(“选择器”)   

// 里面选择器直接写 CSS 选择器即可，但是要加引号

3.2 jQuery 层级选择器

子代 $(“ul>li”);

后代 $(“ul li”);

3.3 jQuery 设置css样式

$('div').css('属性', '值')     

3.4 jQuery 筛选方法

parent()  		查找父级

children()      最近一级

find()  	    后代选择器

siblings()  	查找兄弟节点，不包括自己

eq(index) 		相当于$("li:eq(2)"),index从0开始

4.jQuery 内容文本值

4.1.普通元素内容 html()（ 相当于原生inner HTML)

html()             // 获取元素的内容

html(''内容'')   // 设置元素的内容

4.2普通元素文本内容 text() (相当与原生 innerText)

text()                     // 获取元素的文本内容

text(''文本内容'')   // 设置元素的文本内容

4.3表单的值 val()（ 相当于原生value)

val()              // 获取表单的值

val(''内容'')   // 设置表单的值

5.jQuery 样式操作

5.1 操作 css 方法

1.参数只写属性名，则是返回属性值

$(this).css(''color'')

2.参数是属性名，属性值，逗号分隔

 $(this).css(''color'', ''red'');

3.参数可以是对象形式，方便设置多组样式。

6.jQuery 事件

6.1.jQuery 事件注册

单个事件注册

element.事件( function( ){ } )

6.2.事件名称

dblclick 鼠标双击某个对象

click 鼠标点击某个对象

mousedown 鼠标按键被按下

mouseup 鼠标按键被松开

mousemove 鼠标被移动

mouseout 鼠标从某元素移开

mouseover 鼠标被移到某元素之上

keydown 键盘的键被按下

keypress 键盘的键被按下（可打印的键，排除功能键）

keyup 键盘的键被松开

blur 元素失去焦点

focus 元素获得焦点

7.jQuery 动画效果

7.1.显示隐藏

show() hide() toggle()

​ show([时间,[贝塞尔曲线],[回调函数]])

7.2.滑动

slideDown() slideUp() slideToggle()

7.3.淡入淡出

fadeIn() fadeOut() fadeToggle() fadeTo()

fadeTo([[speed],opacity,[easing],[fn]])

7.4.自定义动画

animate()

​ animate(params,[speed],[easing],[fn])

8.jQuery - AJAX

8.1.HTTP 超文本传输协议

​ 是互联网上应用最为广泛的一种网络协议

​ HTTPS 加密的，安全的；HTTP 不加密的

​ TCP 三次握手(确保连接的安全)

8.2.同步-异步

​ 同步刷新 整张页面都会被刷新

​ 异步刷新 局部内容刷新

8.3.AJAX

8.3.1.AJAX 可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

8.3.2.回调函数：请求发向服务器，服务器响应后执行的函数；

8.3.3.语法：

$.ajax({

	url:' ',                             //url

	data:{a:100},                 //给服务器的数据

	type:'GET' ,                    //请求类型

	dataType:'json',             //响应体结果

	success:function( ){ }，  //成功的回调函数

	timeout:2000，               //超时时间

	error:funtion( ) { }，          //失败回调
})

3.4. getJSON()

getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

$.getJSON( url , 发送到服务器的数据 , 回调函数 )

4.JSON

JSON就是一个特殊格式的字符串，可以转化为任意语言中的对象，在开发中主要用来数据的交互。

注：JSON字符串中的属性名必须加双引号