JQuey学习笔记

---

title: JQuey学习笔记

jQuery

1. jQuery核心函数

核心:把页面中的标签转换成jQuery对象,然后调用jQuery中的相关函数和属性操作该标签

jQuery(calllback):页面加载完成就执行括号中的函数

可简写为$(function{})

jQuery(html,[ownerDoc]):把html代码表示的元素标签转换成jQuery对象

主要用来向页面中插入html代码

$(html代码的字符串格式)

jQuery([selector,[context]]):把选择器表示的元素标签转换成jQuery对象

$(“选择器”)

2. jQuery选择器

2.1 基本选择器

#id

element

.class

selector1,selector2,selector3

2.2 层级选择器

空格 所有子元素;>大于号 直接子元素;

+加号 下一个兄弟元素;`波浪线 所有兄弟元素;

3. JQuery过滤器

3.1 基本过滤选择器

:first

:last

:not()

:odd奇数

:even偶数

:eq()

:gt()

:lt()

:header

3.2 内容过滤选择器

:contains(text)

:empty没有子元素或文本的元素

:has(selector)

:parent含有子元素或文本的元素

3.3 可见性过滤选择器

:hidden

:visible

3.3 属性过滤选择器

[attribute]

[attribute=value]

!=;^=;匹配开始

$=;匹配结尾

*=;匹配包含

3.4 子元素过滤选择器

:nth-child序号从1开始

:first-child

:last-child

:only-child只有一个子元素的信息

4.jQuery文档操作

内部插入

.prepend($(“插入内容”))

$(“插入内容”).prependto()

.append($(“插入内容”))

$(“插入内容”).appendto()

外部插入

before($(“插入内容”));

$(“插入内容”).insertbefore();

after($(“插入内容”))

$(“插入内容”).insertafter();

删除

empty()

remove()连注册的事件都删除

detach()注册的事件不会删除

克隆’

clone(boolean,boolean)事件的克隆取决于boolean

.replaceWith()用什么替换

.replaceAll()替换什么

5. jQuery方法属性

html()获得html所有信息;传参数可设置html信息

text()只能获得文本信息,传参数可设置文本信息

each(function(n){})遍历 n代表元素序号

index()搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

size();length 个数

.css({name:value,name::value})设置样式

.addClass(“class名”)添加class样式

.val()获取文本框的值

.show()显示

.hide()隐藏

.attr(name,value)设置被选元素的参数

6.jQuery事件

bind’()只能给存在的元素绑定事件

unbind()

live()可以为后续添加的元素添加事件

die()

one()

trigger()

hover()

toggle()

Ajax

1.创建xmlHttpRequest对象

var xmlHttp;
		try {
			// Firefox, Opera 8.0+, Safari
			xmlHttp = new XMLHttpRequest();
		} catch (e) {
			// Internet Explorer
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
					alert("您的浏览器不支持AJAX！");
					return false;
				}
			}
		}

2.调用回调函数

xmlHttp.onreadystatechange = callback;

3.设置请求方式

xmlHttp.open("GET", "http://localhost:8080/jquery/ajaxServlet", true);

如果请求方式为POST,要设置请求头setRequetstHeader(“content-type”,

4.发送请求

xmlHttp.send(null);

5.接收响应数据

function callback() {
			if (xmlHttp.readyState == 4) {
				var value = xmlHttp.responseText;
				alert(value);
			}
		};

$.post(url,{name:value},function(data){},“接收数据类型”)

data为接收的响应数据

$.get(url,{name:value},function(data){},“接收数据类型”)