jquery常用总结

一。选择器优先级:
1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)<div style="color:Red;"></div>
2.次优先级是(ID选择器 ,假设级别为100) #myDiv{color:Red;}
3.其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}
4.最后优先级是 (标签选择器,假设级别是 1) div{color:Red;}
5.那么后代选择器的优先级就可以计算了啊
比如 .divClass span { color:Red;} 优先级别就是:10+1=11

二。jquery优先级
jquery 是没有优先级的,jquery是按照你的条件遍历一次DOM tree,所以写条件的时候最好尽量缩小范围和用ID,避免要遍历全部DOM,这样效率是最快的
比如$(‘#idA‘),$(‘div .classA‘),$(‘.classA‘),效率最好的是$(‘#idA‘),而$(‘div .classA‘)又比$(‘.classA‘)的效率高,最后一个效率是最低的,因为jquery会遍历整个TREE

三。jquery选择器
元素选择器
$("p.xxx") 选取所有class="intro"的<p>元素
$("p#demo") 选取所有id="demo"的<p>元素
$(".intro.demo")所有 class="intro" 且 class="demo" 的元素
$("p:first") 第一个 <p> 元素
$("p:last") 最后一个 <p> 元素
$("tr:even") 所有偶数 <tr> 元素
$("tr:odd") 所有奇数 <tr> 元素
$("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
$("ul li:gt(3)") 列出 index 大于 3 的元素
$("ul li:lt(3)") 列出 index 小于 3 的元素
$("input:not(:empty)") 所有不为空的 input 元素
$(":header") 所有标题元素 <h1> - <h6>
$(":contains(‘W3School‘)") 包含指定字符串的所有元素
$(":empty") 无子(元素)节点的所有元素
$("p:hidden") 所有隐藏的 <p> 元素
$("table:visible") 所有可见的表格
$("th,td,.intro") 所有带有匹配选择的元素
$("[href]") 所有带有 href 属性的元素
$(":input") 所有 <input> 元素
$(":radio") 所有 type="radio" 的 <input> 元素(radio可换成text,submit...)
$(":enabled") 所有激活的 input 元素
$(":disabled") 所有禁用的 input 元素
$(":selected") 所有被选取的 input 元素
$(":checked") 所有被选中的 input 元素
属性选择器
$("[href]") 选取所有带href属性的元素
$("[href=‘#‘]")选取所有带有href值等于#的元素
$("[href!=‘#‘]")选取所有带有href值不等于#的元素
$("[href$=‘.jpg‘]")选取所有href值以".jpg"结尾的元素

CSS选择器
$("p").css("background-color", "red");

$("ul li:first")每个<ul>的第一个<li>元素
$("div#xxx .yyy")id="xxx" 的 <div> 元素中的所有 class="yyy" 的元素

四。jquery事件
$(document).ready(function(){});
$("button").click(function(){}); 触发或将函数绑定到被选元素的点击事件
$("#xxx").val();
$("#xxx").text();
$("#xxx").html();
var jq=jQuery.noConflict();用自己的名称(比如 jq)来代替 $ 符号。
$(selector).dblclick(function);触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件

五。效果
1.显示隐藏
$("p").hide();
$("p").show();
$("p").toggle();显示被隐藏的元素,并隐藏已显示的元素:
$(selector).toggle(speed,callback);可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
2.下面是四个淡入淡出,可选参数speed,callback:
fadeIn()
fadeOut()
fadeToggle()
$(selector).fadeTo(speed,opacity,callback);允许渐变为给定的不透明度(值介于 0 与 1 之间)。
3.滑动
$(selector).slideDown(speed,callback);下
$(selector).slideUp(speed,callback);上
$(selector).slideToggle(speed,callback);如果上就下,下就上
4.动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
例:$("button").click(function(){
$("div").animate({left:‘250px‘});
});
复杂一点:
$("button").click(function(){
$("div").animate({
left:‘250px‘,
opacity:‘0.5‘,
height:‘150px‘,
width:‘150px‘
});
});
使用相对值
$("button").click(function(){
$("div").animate({
left:‘250px‘,
height:‘+=150px‘,
width:‘+=150px‘
});
});
预定义值
$("button").click(function(){
$("div").animate({
height:‘toggle‘或者"show"、"hide"
});
});
队列
$("button").click(function(){
var div=$("div");
div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");
div.animate({width:‘300px‘,opacity:‘0.8‘},"slow");
div.animate({height:‘100px‘,opacity:‘0.4‘},"slow");
div.animate({width:‘100px‘,opacity:‘0.8‘},"slow");
});
5.
$(selector).stop(stopAll,goToEnd); 方法用于停止动画或效果,在它们完成之前
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
6.chain
Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

六。ajax
url
type
timeout
async 所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false
cache
data
dataType xml,html,script,json,jsonp,text
beforeSend 要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头
complete 要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)
success 请求成功后调用的回调函数,有两个参数。(1)由服务器返回,并根据dataType参数进行处理后的数据。(2)描述状态的字符串。
error 请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)
contentType 当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。
dataFilter 给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数
global 默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。
ifModified 默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。
jsonp
username
password
processData
scriptCharset

$.each()以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。

七。添加元素
append() - 在被选元素的结尾插入内容 $("p").append(txt1,txt2,txt3);
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

八。遍历
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。$("span").parentsUntil("div");
children() 方法返回被选元素的所有直接子元素
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代
siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回$("p").filter(".intro");返回带有类名 "intro" 的所有 <p> 元素:
not() 方法返回不匹配标准的所有元素。

九。通配符
*=包含xx $= 以xx结束 ^=以xx开始

十。获取以及设置
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
html();
val();
attr();
十一。删除
empty() 方法删除被选元素的子元素
remove() 方法也可接受一个参数,允许您对被删元素进行过滤。$("p").remove(".italic");删除所有clss="italic"的所有p
十二。样式
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
css({"propertyname":"value","propertyname":"value",...});

十三。尺寸
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
十四。ajax
1.$(selector).load(URL,data,callback);从服务器加载数据,并把返回的数据放入被选元素中。
$("#btn1").click(function(){
$(‘#test‘).load(‘/example/jquery/demo_test.txt‘);
})
$("#div1").load("demo_test.txt #p1");把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
2.$.get(URL,callback);通过 HTTP GET 请求从服务器上请求数据。
3.$.post(URL,data,callback);通过 HTTP POST 请求从服务器上请求数据。

时间: 2024-10-17 01:57:37

jquery常用总结的相关文章

jQuery常用函数-思维导图

百度脑图jQuery常用函数 百度脑图jQuery常用函数

基于jQuery 常用WEB控件收集

Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion. jQuery-Horizontal Accordion AutoComplete-JQuery jQuery插件易于集成到现在的表单中(Form). AutoComplete-JQuery Facebook

jquery常用技巧及常用方法列表集合

jquery常用技巧及常用方法列表集合 jquery常用技巧及常用方法列表集合,学习jquery的朋友可以收藏下.方便查找学习. 1.关于页面元素的引用  通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换  只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注

Jquery常用选择器

Jquery常用选择器<p id="test">这是段落中的<b>粗体</b>文本.</p>text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)$("#test").text():这是段落中的粗体文本.$("#test").html():这是段落中的<b>粗体</b>文本. append() - 在被选元素的结尾插入

Jquery常用的选择器有哪些?

jquery 选择器. css3 选择器各种各样的选择器,作为非常灵活的 jquery 选择器到底如何使用呢?本文和大家分享的就是jquery 常用选择器种类及其原理相关内容,希望对大家 学习jquery有所帮助. 一.对于jQuery 选择器基本用法 在CSS3 选择器标淮草案定义的选择器语法中, jQuery 支持相当完整的一套子集,同时还添加了一些非标准但很有用的伪类.注意 : 本节讲述的是  jQuery 选择器.其中有不少选择器 ( 但不是全部 ) 可以在 CSS 样式表中使用.选择器

jquery常用事件(整理)

Jquery事件 (一).事件列表. 1.blur() 当失去焦点时触发.包括鼠标点击离开和TAB键离开. 2.change() 当元素获取焦点后,值改变失去焦点事触发. 3.click() 当鼠标单击时触发. 4.dblclick()  当鼠标双击时触发. 5.error() 当javascript出错或img的src属性无效时触发. 6.focus()   当元素获取焦点时触发.注意:某些对象不支持. 7.focusin()   当元素或其子元素获取焦点时触发,与focus()区别在于能够检

jQuery常用的正则表达式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jQuery常用技巧

Attribute: $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式$(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值,参数是map$(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/值$(”img”).attr(”title”, function() { return this.src }); 给某个元素添加属性/值$(”元素名称”).html(); 获得该

jquery 常用api

*一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. C)参见<<>> (2)jquery操作DOM的常用API实战 父.append(子) 父.prepend(子) ------------------------------ A.after(B):B在A之后 A.before(B):B在A之前 --------------------

Jquery常用的语法有哪些?

本文和大家分享的主要是jquery常用的一些语法,一起来看看吧,希望对大家学习jquery有所帮助. 1. 控制字体style < style > .fontcolor { color:#FF0000; font-size:15px; font-weight:bold; } </style > 2. td中换行,以及for展示 <td>    <ul>      #foreach($model in $!data.list1)        <li&g