JQUERY
1. JQuery 简介
jquery是javascript的类库,具有轻量级,完善的文档,丰富的插件支持,完善的Ajax功能,强大的选择器功能,出色的DOM操作封装,出色的浏览器兼容性,可靠的事件处理机制,隐式迭代和链式编程操作,免费开源的库。
2. 初始化jquery
jQuery方式监听页面的加载:
1.函数内部的代码页面加载(HTML)完毕之后执行
2.调用N次,会执行N次
3.jQ监听的代码可以简写
$(function(){
})
3. jquery的属性操作的样式 和css操作的样式
3.1 css方法
语法:第一种:
(
"
元
素
名
称
"
)
.
c
s
s
(
′
n
a
m
e
′
)
获
取
第
一
个
匹
配
元
素
的
样
式
属
性
。
第
二
种
:
("元素名称").css(' name') 获取第一个匹配元素的样式属性。 第二种:
("元素名称").css(′name′)获取第一个匹配元素的样式属性。第二种:(“元素名称”).css(’ name’,‘value’) 设置样式属性
第三种:是以对象的形式写多种样式
3.2 获取内容和修改内容的方法 text()和html()
- ( " 元 素 名 称 " ) . t e x t ( ) 如 果 没 有 内 容 则 获 取 到 元 素 的 内 容 。 ("元素名称").text() 如果没有内容则获取到元素的内容。 ("元素名称").text()如果没有内容则获取到元素的内容。(“元素名称”).text(‘value’) 有内容则修改该元素的内容为value
- ( " 元 素 名 称 " ) . h t m l ( ) 如 果 没 有 内 容 则 获 取 到 该 元 素 的 内 容 , ("元素名称").html() 如果没有内容则获取到该元素的内容, ("元素名称").html()如果没有内容则获取到该元素的内容,(“元素名称”).html(‘value’) 有内容则修改该元素的内容为value
区别:
一:html()操作的是innerHtml属性节点的内容。text() 操作的是innerText属性节点的内容
二:html如果传递了参数表示设置标签的内容覆盖之前的内容,传递的是标签加内容会覆盖之前的标签和内容。text传递参数是标签,则以文本形式展示
三:html方法没有传参,获取第一个标签的节点内容。text方法没有传参,获取所有标签的文本内容拼接在一起返回
4. jquery的选择器
4.1 基本选择器
ID选择器:$("#myDiv") 匹配唯一的具有此id值的元素
类选择器:$(".myClass") 匹配具有此类样式值的所有元素
标签选择器:$("div") 匹配指定标签名称的所有元素
通配符选择器:$("*") 匹配所有元素
并集选择器:$("div,span,p.myClass") 联合所有匹配的选择器
交集选择器:$("p.myClass") 匹配到p标签里面的类名 不常用
4.2 层级选择器
后代选择器:$("form input") 后代选择器,选择ancestor的所有子孙节点
子代选择器:$("#main > span")main下一级的的所有span子节点
兄弟选择器:$("label + input") 兄弟相邻选择器,选择所有label相邻的第一个input节点
兄弟选择器:$("#prev ~ div") 相邻后边的所有,选择prev的所有后面的div同胞节点
4.3 筛选选择器,也是过滤选择器
$("li:first") 匹配第一个选择的li元素
$("li:last") 匹配最后一个选择的li元素
$("li:not(:first)")选择除了第一个标签之外的所有li标签
$("li").eq(4)选择第5个li标签 索引0开始
$("td:eq(2)") 匹配集合中指定位置的元素(从0开始)
$("li:odd") 选择索引为奇数 索引0开始
$("li:even") 选择索引为偶数的li标签 索引0开始
$("li:lt(3)") $("li:gt(3)")选择索引大于或者小于3的所有li标签
$(":animated") 获取正在执行动画效果的元素
4.4 属性过滤选择器
$("div[属性]") 匹配所有具有指定属性的元素
$("input[name ='newsletter']") 匹配所有具有指定属性值的元素
$("input[name !='newsletter']") 匹配所有不具有指定属性值的元素
$("input[name ^='news']") 匹配所有指定属性值以news开头的元素
$("input[name $='letter']") 匹配所有指定属性值以letter结尾的元素
$("input[name *='man']") 匹配所有指定属性值含有man字符的元素
$("input[属性1 =“值”][name2 $= 'man']") 匹配同时符合多个选择器的所有元素
4.5 父子元素过滤器
$("ul li:nth-child(2)"), 匹配所有li标签的索引为2的li元素,索引0开始
$("ul li:nth-child(odd)"), 匹配所有li标签的奇数元素
$("ul li:nth-child(3n + 1)") 匹配所有li标签的第4,7,11元素
$("div span:first-child") 匹配所有span标签的第1个span元素
$("div span:last-child") 匹配所有span标签的最后一个span元素
parent() 获取指定标签的父节点
parents() 获取指定标签的祖先节点 父节点以上都是 传参如果指定祖先哪个就是哪个
parentsUntil() 获取指定标签的祖先节点直到...为止(不包含自己)
children() 获取指定标签的所有子节点
siblings() 获取指定标签的兄弟节点 除了自己以外的所有兄弟
$(当前元素).find(所有的后代元素)查找获得当前元素集合中每个元素的后代,必须参数
5. jquery的核心函数方法
5.1 $(this).index()方法 :
作用:获取索引,角标
5.2 get()方法:和 eq()方法差不多 ,不过get方法返回的是DOM标签
作用:获取指定索引对应的标签返回
如果没有传递参数:获取页面中所有指定的标签存储在数组中返回
001 参数是正数
002 参数是负数 如果是-1,表示获取倒数第一个
5.3 eq()方法
作用:获取指定索引对应的标签并且包装成jQuery对象返回
没有参数:返回一个空的jQ对象(不是this)
001 参数是正数
002 参数是负数 如果是-1,表示获取倒数第一个
5.4 data()方法 和 removeData()方法 :
作用:在元素上存取数据和删除数据
5.4.1.在一个div上存取数据
$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
$("div").data("blah", 86); // 设置为86
$("div").data("blah"); // 86
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined
5.4.2.在一个div上存取名/值对数据
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("div").data("test").last //pizza!;
5.4.3.在HTML5规范中div中读取预存的data-[key]值
<div data-test="this is test" ></div>
$("div").data("test"); //this is test
6. 常用事件类型
blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
change( ) 用户改变域的内容 input, textarea, select
click( ) 鼠标点击某个对象 几乎所有元素
dblclick( ) 鼠标双击某个对象 几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window
7. DOM属性节点的操作
7.1.dom操作增删改查
添加|修改:setAttribute()
查询获取:getAttribute()
删除:removeAttribute()
7.2. 属性和属性节点对比
属性:所有的对象(包括DOM)都有属性,保存在对象身上.
属性节点:只有DOM标签有属性节点,保存在对象身上的attributes对象上面.比如heaf=“”
7.3.$.trim()方法
作用:清除字符串前面和后面的空格
8. jquery中的ajax使用方法
8.1.Ajax-load方法
语法:$(selector).load(URL,data,callback);
URL 为路径。路径后面可以加指定的id或者类名标签等
data 为添加的参数(JSON对象|查询字符串)返回给服务器端。不要有空格
callback 为回调函数 一般不写
注意点:
1) 对返回的结果支持使用选择器来进行筛选
2)默认情况下,发送的是GET请求
3) load方法在使用的时候,支持提交参数到服务器端
参数的格式支持两种情况:
[1] JSON对象 发送的网络请求是POST请求
[2] 查询字符串 发送的网络请求是GET请求
8.2.Ajax-get方法
语法:$.get(url,data,function(respoonse,status,xhr){},dataType)
url:请求路径
data:参数(JSON对象|查询字符串)
第三个参数:请求完成的回调函数
response:服务器返回的响应体
status: 网络请求状态(success | error)
xhr: 请求对象
dataType:期望服务器返回的数据类型:json | xml | script |jsonP | text 一般不写
8.3.Ajax-post方法
语法:$.post(url,data,function(respoonse,status,xhr){},dataType)
url:请求路径
data:参数(JSON对象|查询字符串)
第三个参数:请求完成的回调函数
response:服务器返回的响应体
status: 网络请求状态(success | error)
xhr: 请求对象
dataType:期望服务器返回的数据类型:json | xml | script |jsonP | text 一般不写
8.4.Ajax-ajax方法
语法:
(1) $.ajax(url,{})
(2) $.ajax({})
url: 请求路径(不带参数)
type: 请求方法 GET|POST
data: 设置参数(JSON对象|查询字符串)
success:请求成功的回调函数
回调函数参数response:响应体
status:响应的状态
xhr:请求对象
async:设置是否发送异步请求 默认是异步
cache:是否要进行缓存处理
timeout:请求超时的时间
beforeSend:请求发送前要执行的回调函数
complete:请求完成执行的回调函数
context:设置所有回调函数中this(上下文)指向特定的jQ实例对象
dataType:预期服务器返回的数据类型
error:请求失败时调用此函数
回调函数参数XMLHttpRequest, textStatus, errorThrown