jQuery基本API小结(上)--选择器-DOM操作-动画-Ajax
一、JQuery基础选择器
1、基本选择器(CSS选择器)
2、$()中的()不一定是指定元素,也可能是函数。
3、“*”号选择器,它的功能是获取页面中的全部元素:$(“*”)。 由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也需要谨慎使用。
4、sele1,sele2,seleN选择器,同时选中多个元素。
5、层次选择器
①、
$("ance desc")
其中ance desc是使用空格隔开的两个参数。ance参数(ancestor祖先的简写)表示父元素;desc参数(descendant后代的简写)表示后代元素
②、$(“parent > child”) child参数获取的元素都是parent选择器的子元素(子辈),它们之间通过“>”符号来表示一种层次关系。
③、$(“prev + next”) 查找与“prev”元素紧邻的下一个“next”元素
④、获取prev 元素后面全部相邻的元素
二、过滤性选择器
该类型的选择器是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元素。
1:注意:过滤器前后没有空格,其实:前空格可有可无,后面必须不能有空格
① $(“xxxxxx:first”)获取到xxxxxx过滤器过滤出的结果后的第一个元素。
② $(“xxxxxx:eq(index)”)每一个过滤器都会返回一组结果,eq(index)的作用就是通过索引获取其中的某一个元素,索引从0开始
③ :contains(text) 选择包含指定字符串的全部元素,排除html元素
④ :has(selector) 获取选择器中包含指定元素名称的全部元素,其中selector
参数就是包含的元素名称,是被包含元素
⑤ :hidden
过滤选择器的功能是获取全部不可见的元素
⑥ :visible
过滤选择器获取的是全部可见的元素
⑦ :first-child
子元素过滤选择器则可以获取每个父元素中返回的首个子元素,它是一个集合,常用多个集合数据的选择处理。
⑧ :last-child
子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素,它也是一个集合
2:属性选择器:注意中括号前不能有空格
① $(“xxxxxx[attribute=value]”)属性选择器的功能是获取与属性名和属性值完全相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。
② [attribute!=value]
属性选择器的功能是获取不包含属性名,或者与属性名和属性值不相同的全部元素
③ [attribute*=value]
,它可以获取属性值中包含指定内容的全部元素(模糊查询的功能)
三、表单选择器
1、checked选择器与元素之间没有空格
①
:input
返回全部的表单元素,不仅包括所有
<input>
标记的表单元素,而且还包括
<textarea>
、
<select>
和
<button>
标记的表单元素,因此,它选择的表单元素是最广的
②
:checked可以获取处于选中状态的全部元素。.
③:selected
选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素
四、jQuery操作DOM
简单:attr()、html()、text()、addClass()、css()、removeAttr(name)、removeClass(class)
①selector.append(content)
方法的功能是向指定的元素中追加内容,被追加的content参数,可以是字符、HTML元素标记,还可以是一个返回字符串内容的函数。
②$(content).appendTo(selector) 参数content表示需要插入的内容,参数selector表示被选的元素,即把content内容插入selector元素内,默认是在尾部。
③$(selector).before(content)和$(selector).after(content) 可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容
④$(selector).clone()方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性
⑤$(selector).replaceWith(content)和$(content).replaceAll(selector)
⑥$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)前者用于包裹元素本身,后者则用于包裹元素中的内容
⑦$(selector).each(function(index)) 参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始。
⑧remove()
方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()
方法则只删除所选元素的子元素。
五、jQuery 事件与应用
①ready():ready()
事件类似于onLoad()
事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()
可以写多个,按顺序执行。此外,下列写法是相等的:$(document).ready(function(){})等价于$(function(){});
②$(selector).bind(event,[data] function) 参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。
③$(selector).hover(over,out); hover()
方法的功能是当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切实效果
④$(selector).toggle(fun1(),fun2(),funN(),...)toggle()
方法可以在元素的click事件中绑定两个或两个以上的函数,同时,它还可以实现元素的隐藏与显示的切换,每次触发事件时只执行一个函数(依次循环执行)
⑤$(selector).unbind(event,fun) 其中参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称。如是方法中没有任何参数,则表示移除全部已绑定的事件。
⑥$(selector).one(event,[data],fun) one()
方法可以绑定元素任何有效的事件,但这种方法绑定的事件只会触发一次。参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
⑦$(selector).trigger(event) trigger()
方法可以直接手动触发元素指定的事件,这些事件可以是元素自带事件,也可以是自定义的事件
⑧focus和blur focus事件在元素获取焦点时触发,如点击文本框时,触发该事件;而blur事件则在元素丢失焦点时触发,如点击除文本框的任何元素,都会触发该事件。
⑨change 当一个元素的值发生变化时,将会触发change
事件,例如在选择下拉列表框中的选项时,就会触change
事件。
⑩$(selector).live(event,[data],fun) 与bind()
方法相同,live()
方法与可以绑定元素的可执行事件,除此相同功能之外,live()
方法还可以绑定动态元素,即使用代码添加的元素事件
六、动画特效
1、show()
和hide()
方法用于显示或隐藏页面中的元素
$(selector).hide(speed,[callback])和$(selector).show(speed,[callback]) 参数speed设置隐藏或显示时的速度值,可为“slow”、“fast”或毫秒数值,可选项参数callback为隐藏或显示动作执行完成后调用的函数名。
2、$(selector).toggle(speed,[callback]) 其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。
3、使用slideUp()
和slideDown()
方法在页面中滑动元素,前者用于向上滑动元素,后者用于向下滑动元素
$(selector).slideUp(speed,[callback]) $(selector).slideDown(speed,[callback])
其中speed参数为滑动时的速度,单位是毫秒,可选项参数callback为滑动成功后执行的回调函数名。要注意的是:slideDown()
仅适用于被隐藏的元素;slideup()
则相反。
4、使用slideToggle()
方法可以切换slideUp()
和slideDown()
,即调用该方法时,如果元素已向上滑动,则元素自动向下滑动,反之,则元素自动向上滑动
$(selector).slideToggle(speed,[callback])
5
、
fadeIn()
和fadeOut()
方法可以实现元素的淡入淡出效果,前者淡入隐藏的元素,后者可以淡出可见的元素,
$(selector).fadeIn(speed,[callback])
$(selector).fadeOut(speed,[callback])
6、fadeTo()
方法,可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值
$(selector).fadeTo(speed,opacity,[callback])
7、调用animate()
方法可以创建自定义动画效果
$(selector).animate({params},speed,[callback]) 其中,params参数为制作动画效果的CSS属性名与值
8、stop()
方法的功能是在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动、淡入淡出和自定义的动画
$(selector).stop([clearQueue],[goToEnd])
两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画
9、delay()
方法的功能是设置一个延时值来推迟动画效果的执行
$(selector).delay(duration)
其中参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执行。
七、Ajax应用
1、load()
方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中
load(url,[data],[callback])
参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
2、getJSON()
方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
3、getScript()
方法异步请求并执行服务器中的JavaScript格式的文件
jQuery.getScript(url,[callback])
或$.getScript(url,[callback])
4
、
get()
方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据。
$.get(url,[callback])
5、get()
方法相比,post()
方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面
$.post(url,[data],[callback])
6、serialize()
方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求
$(selector).serialize()
7、ajax()
方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值
jQuery.ajax([settings])或$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。
8、ajaxSetup()
方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。
9、ajaxStart()
和ajaxStop()
方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
jQuery基本API小结(上)--选择器-DOM操作-动画-Ajax的更多相关文章
- JQuery选择器,事件,DOM操作,动画
JQuery是一个JavaScript代码库,或者是JavaScript框架: 1.选择器:(和CSS选择器一致) 基本选择器:ID选择器$('#div1');Class选择器('.div1');标签 ...
- jQuery简单介绍及基本用法(选择器&DOM操作)
简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“write Le ...
- jquery学习:选择器&dom操作
分类; 1.基本选择器 1.标签选择器(元素选择器) * 语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 * 语法:$("#id的属性值" ...
- jQuery 源码分析(二十一) DOM操作模块 删除元素 详解
本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- jQuery学习之旅 Item4 细说DOM操作
jQuery-–DOM操作(文档处理) Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准 ...
- jQuery入门基础(事件、DOM操作)
http://www.w3school.com.cn/b.asp 一.事件 1.常规事件——把js事件前面的on去掉 比如:js:onclick——JQuery:click 下面是 jQuery 中事 ...
- jQuery使用(六):DOM操作之元素包裹、克隆DOM与data的综合应用
包裹 wrap() wrapInner() wrapAll() unwrap() clone() 数据缓存机制 data 文档处理(包裹) 1.1.wrap()--将所匹配的元素用其他元素结构化标签包 ...
- jquery 常用api 小结2
*一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. ...
随机推荐
- mdev USB disk auto mount demo
/********************************************************************* * mdev USB disk auto mount de ...
- js之放大镜效果
HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Android 实现两屏幕互相滑动
Android 实现两屏幕互相滑动 下文来自: http://blog.csdn.net/song_shi_chao/article/details/7081664 ----------------- ...
- linux下修改了tomcat端口之后无法访问
查看防火墙,是否将修改之后的端口加入防火墙规则内,如没有,加入规则内,重启防火墙,如果还是无法访问,请看第二步 执行bin目录下shutdown.sh脚本,如果正常关闭,则执行startup.sh脚本 ...
- Jmeter查看结果树
取样结果: Thread Name: test 1-2 线程名称:测试1 - 2Sample S ...
- BZOJ4831: [Lydsy1704月赛]序列操作(非常nice的DP& 贪心)
4831: [Lydsy1704月赛]序列操作 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 250 Solved: 93[Submit][Statu ...
- BZOJ4976:宝石镶嵌(DP&思维)
Description 魔法师小Q拥有n个宝石,每个宝石的魔力依次为w_1,w_2,...,w_n.他想把这些宝石镶嵌到自己的法杖上,来提升 法杖的威力.不幸的是,小Q的法杖上宝石镶嵌栏太少了,他必须 ...
- 船长带你看书——《selenium2 python 自动化测试实战》(2)浏览器操作
浏览器操作 # coding: utf-8 from selenium import webdriver from time import sleep driver = webdriver.Firef ...
- globalalloc、malloc和new的区别
简单来说: malloc是c分配内存的库函数,new是c++分配内存的操作符,而globalalloc是win32提供的分配内存的API malloc不能自动调用构造和析构函数,在c++中没什么实用价 ...
- hdu4261 Estimation[暴力dp+对顶堆]
https://vjudge.net/problem/HDU-4261 对于一个长2000的数列划分最多25个块,每块代价为块内每个数与块内中位数差的绝对值之和,求最小总代价. 套路化地,设$f[i] ...