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对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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.调用回调函数

1
xmlHttp.onreadystatechange = callback;

3.设置请求方式

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

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

4.发送请求

1
xmlHttp.send(null);

5.接收响应数据

1
2
3
4
5
6
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){},”接收数据类型”)

1560430648450

jquery对象.load(url,{name:value},function(data){}]

  1. load方法是将服务器响应的数据直接插入到指定的dom元素中。
  2. jquery中的load方法它的请求方式是什么?
    a) 如果有参数请求方式是post
    b) 如果没有参数请求方式是get

Json

  • 将java对象转换成json对象

String json=JSONObject.toJsonString(java对象);

  • json设置别名

1560430740378

  • 将jjava对象中存在日期类型属性java.util.Date用指定的格式来转换成json。

    1560430833938

  • 过滤器来设置转换成json的信息

    1560430889030

  • 取消循环引用

    1560430916048

xml

  • 将java对象转换成xml对象

1560430947123

  • 设置别名

1560431014154

1560431027029

  • 忽略属性

    1560431079180

  • 将类的属性设置成xml中字段的属性

    1560431119237

  • 注解使用

    要想使用XStream的注解,必须开启注解扫描.

    1560431153170

    1560431160993

#