jquery常用总结

Posted 2020-09-29

一。选择器优先级：
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 请求从服务器上请求数据。