NingG +

jQuery梳理

几点:

遇到问题,首要查看jQuery 官网 API

基本路线

几点:

jQuery简介

JavaScript几个劣势:

Ajax,Asynchronous JavaScript And XML,异步的JavaScript和XML。

jQuery的特点:

jQuery两个版本:

jQuery对象,什么含义?

疑问:上面的jQuery$之间的关系?到底什么含义?哪个地方对这些表示,进行定义?

简要说一下$(document).ready(),页面所有DOM结构绘制完,执行的JavaScript操作,与window.onload = function(){...}类似,但有差异:

jQuery代码风格

jQuery建议代码规范:

DOM对象与jQuery对象

理清几个问题:

DOM对象

DOM,Document Object Model,文档对象模型,每一份DOM都可以看作一棵树;一个HTML页面中,有很多标签,每个标签都看作一个节点,构成一棵树,称为DOM树,每个节点都是一个DOM对象。可以通过JavaScript来获取DOM对象,示例代码如下:

var domObj = document.getElementById("id");	//获得DOM对象
var ObjHTML = domObj.innerHTML;		//使用JavaScript中的属性innerHTML

jQuery对象

jQuery对象,通过jQuery包装DOM对象之后,产生的对象,几点:

例如:

$("#foo").html();	//获取id=foo的对象的内部html代码,.html()方法是jQuery里的方法
// 上述jQuery对象的操作,等效于下面DOM对象的操作
document.getElementById("foo").innerHTML; 

jQuery对象与DOM对象之间相互转换

示例代码:

var jQueryObj = $("#id");	// jQuery对象
var domObj = jQueryObj[0];	// 获取DOM对象
var domObj2 = jQueryObj.get(0);

var domObj = document.getElementById("id");	// DOM对象
var jQueryObj = $(domObj);	// 获取jQuery对象

备注:$()函数,获取jQuery对象;为什么?哪个地方定义的?

解决jQuery与其他库的冲突

调用jQuery.noConflict();将变量$的控制权放弃,也可以使用var $j = jQuery.noConfilct(); 在放弃$变量同时,自定义jQuery的其他别名$j;补充一点,通过var variable定义的变量variable在下文中直接引用即可,同理,var $j定义的变量$j,在下文中也直接使用$j,不要忘记了$符号,此处,其为变量名的一部分。

选择器

对一个元素进行操作之前,定位到这个元素,是第一步;选择器,负责定位元素。

CSS选择器

常识几点:

CSS选择器,几类:

注:CSS,Cascading Style Sheets,层叠样式表。

jQuery选择器

jQuery选择器,完全继承CSS选择器的风格,几点:

一个网页,包含3类内容:

jQuery选择器的特点

几点:

jQuery选择器分类及用法

几类:

基本过滤器

比较常用,具体如下:

选择器 实例 选取
:first $(“p:first”) 第一个 <p> 元素
:last $(“p:last”) 最后一个 <p> 元素
:even $(“tr:even”) 所有偶数 <tr> 元素
:odd $(“tr:odd”) 所有奇数 <tr> 元素
:eq(index) $(“ul li:eq(3)”) 列表中的第四个元素(index 值从 0 开始)
:gt(no) $(“ul li:gt(3)”) 列举 index 大于 3 的元素
:lt(no) $(“ul li:lt(3)”) 列举 index 小于 3 的元素
:not(selector) $(“input:not(:empty)”) 所有不为空的输入元素
:header $(“:header”) 所有标题元素 <h1>, <h2> ...
:animated $(“:animated”) 所有动画元素
:focus $(“:focus”) 当前具有焦点的元素
内容过滤

过滤规则与其包含的子元素或文本内容相关。

选择器 实例 选取
:contains(text) $(“:contains(‘Hello’)”) 所有包含文本 “Hello” 的元素
:has(selector) $(“div:has(p)”) 所有包含有 <p> 元素在其内的 <div> 元素
:empty $(“:empty”) 所有空元素
:parent $(“:parent”) 所有是另一个元素的父元素的元素
可见性过滤

根据元素是否可见来判断:

选择器 实例 选取
:hidden $(“p:hidden”) 所有隐藏的 <p> 元素
:visible $(“table:visible”) 所有可见的表格

下面集中过滤器,参考:jQuery选择器

DOM操作

DOM,文档对象模型,几点:

jQuery中DOM操作

随便列几个:

DOM操作分类:

更多参考:

jQuery中事件和动画

参考:

Ajax应用

Ajax:

简要说几个:

简要说一下$.get()$.post()之间的差异:

上面提到的load、get、post等方法都可以用$.ajax()来实现,实际上,$.ajax()是jQuery最底层的Ajax实现。

$.ajax()详解

$.ajax()方法常用参数解释

参数 类型 说明
url String 请求地址
type String POST、GET,默认GET
timeOut Number 请求超时时间(ms)
async Boolean (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
data Object,String 发送到服务器的参数
dataType String 预期服务器返回的数据类型(xml、html、json、script)。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递。
success Function 请求成功后回调函数。
error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。

$.ajax()实例

$.ajax()示例代码如下:

$(document).ready(function() {
	jQuery("#clearCac").click(function() {
		jQuery.ajax({
			url: "/Handle/Do",
			type: "post",
			data: { id: '0' },
			dataType: "json",
			success: function(msg) {
				alert(msg);
			},
			error: function(XMLHttpRequest, textStatus, errorThrown) {
				alert(XMLHttpRequest.status);
				alert(XMLHttpRequest.readyState);
				alert(textStatus);
			},
			complete: function(XMLHttpRequest, textStatus) {
				this; // 调用本次AJAX请求时传递的options参数
			}
		});
	});
});

有几点注意的:

参考来源

原文地址:https://ningg.top/jquery-intro/
微信公众号 ningg, 联系我

同类文章:

微信搜索: 公众号 ningg, 联系我, 交个朋友.

Top