jQuery方法大全
时间:2009-06-18 15:30来源:作者:
Dom: Attribute: $(p).addClass(css中定义的样式类型); 给某个元素添加样式 $(img).attr({src:test.jpg,alt:test Image}); 给某个元素添加属性/值,参数是map $(img).attr(src,test.jpg); 给某个元素添加属性/值$(img).attr(title, function() { return t
Dom: 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(); 获得该元素内的内容(元素,文本等)
$("元素名称").html("new stuff"); 给某元素设置内容
$("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值
$("元素名称").removeClass("class") 给某元素删除指定的样式
$("元素名称").text(); 获得该元素的文本
$("元素名称").text(value); 设置该元素的文本值为value
$("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式
$("input元素名称").val(); 获取input元素的值
$("input元素名称").val(value); 设置input元素的值为value Manipulation:
$("元素名称").after(content); 在匹配元素后面添加内容
$("元素名称").append(content); 将content作为元素的内容插入到该元素的后面
$("元素名称").appendTo(content); 在content后接元素
$("元素名称").before(content); 与after方法相反
$("元素名称").clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理)
$("元素名称").empty() 将该元素的内容设置为空
$("元素名称").insertAfter(content); 将该元素插入到content之后$("元素名称").insertBefore(content); 将该元素插入到content之前$("元素").prepend(content); 将content作为该元素的一部分,放到该元素的最前面
$("元素").prependTo(content); 将该元素作为content的一部分,放content 的最前面
$("元素").remove(); 删除所有的指定元素
$("元素").remove("exp"); 删除所有含有exp的元素
$("元素").wrap("html"); 用html来包围该元素
$("元素").wrap(element); 用element来包围该元素
Traversing:
add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings(expr) Core:
$(html).appendTo("body") 相当于在body中写了一段html代码
$(elems) 获得DOM上的某个元素
$(function(){……..}); 执行一个函数
$("div > p").css("border", "1px solid gray"); 查找所有div的子节点p,添加样式
$("input:radio", document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮
$.extend(prop) prop是一个jQuery对象,
举例:
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery( expression, [context] ) ---$( expression, [context]); 在默认情况下,$()查询的是当前HTML文档中的DOM元素。 each( callback ) 以每一个匹配的元素作为上下文来执行一个函数
举例:1
$("span").click(function){
$("li").each(function(){
$(this).toggleClass("example");
});
});
举例:2
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
jQuery Event: ready(fn); $(document).ready()注意在body中没有onload
事件,否则该函数不能执行。在每个页面中可以
有很多个函数被加载执行,按照fn的顺序来执行。
bind( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。可能的事件属性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
keyup, error
one( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。在每个对
象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。trigger( type, [data] ) 在每一个匹配的元素上触发某类事件。triggerHandler( type, [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型),同时取消浏览器对此事件的默认行动
unbind( [type], [data] ) 反绑定,从每一个匹配的元素中删除绑定的事件。$("p").unbind() 移除所有段落上的所有绑定的事件
$("p").unbind( "click" ) 移除所有段落上的click事件
hover( over, out ) over,out都是方法, 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
}
); toggle( fn, fn ) 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this).removeClass("selected");
}
);
元素事件列表说明
注:不带参数的函数,其参数为可选的 fn。jQuery不支持form元素的reset
事件。
事件描述支持元素或对象
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 JQuery Ajax 方法说明: load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
$("#feeds").load("feeds.html"); 将feeds.html文件载入到id为feeds的
div中
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
}); jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " + data);
}); jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){ alert("JSON Data: " + https://www.doczj.com/doc/0f2730357.html,ers[3].name);
}); jQuery.getScript( url, [callback] ) 使用GET请求JavaScript文件并
执行。
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。
ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件
$("#msg").ajaxComplete(function(request, settings){
$(this).append("
});
ajaxError( callback ) 当一个AJAX请求失败后,执行一个函数。这是一个Ajax 事件
$("#msg").ajaxError(function(request, settings){
$(this).append("
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("
+ "
}); ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时,执行一个
函数。这是一个Ajax事件
当AJAX请求开始(并还没有激活时)显示loading信息
$("#loading").ajaxStart(function(){
$(this).show();
}); ajaxStop( callback ) 当所有的AJAX都停止时,执行一个函数。这是一个Ajax事件
当所有AJAX请求都停止时,隐藏loading信息。
$("#loading").ajaxStop(function(){
$(this).hide();
}); ajaxSuccess( callback ) 当一个AJAX请求成功完成后,执行一个函数。
这是一个Ajax事件
当AJAX请求成功完成时,显示信息。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("
}); jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看
$.ajax函数取得所有选项信息。
设置默认的全局AJAX请求选项。
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData }); serialize( ) 以名称和值的方式连接一组input
元素。实现了正确表单元素序列
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues(); serializeArray( ) 连接所有的表单和表单元素(类似
于.serialize()方法),但是返回一个JSON数据格式。
从form中取得一组值,显示出来
function showValues() {
var fields = $(":input").serializeArray();
alert(fields);
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value + " ");
});
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues(); JQuery Effects 方法说明 show( ) 显示隐藏的匹配元素。show( speed, [callback] ) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
hide( ) 隐藏所有的匹配元素。
hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数
toggle( ) 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,
切换为可见的。
slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选
地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式显示出来。
slideUp( speed, [callback] ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地
触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"
的方式隐藏起来。
slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回
调函数。这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐
藏或显示。
fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触
发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的
高度和宽度不会发生变化。
fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触
发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的
高度和宽度不会发生变化。
fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成
后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所
有匹配的元素的高度和宽度不会发生变化。
stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。
queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组) queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数
queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列
dequeue( ) 执行并移除动画序列前端的动画
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
animate( params, options ) 创建自定义动画的另一个方法。作用同上。JQuery Traversing 方法说明 eq( index ) 从匹配的元素集合中取得一个指定位置的元素,index从0开始
filter( expr ) 返回与指定表达式匹配的元素集合,可以使用","号分割多个expr,用于实现多个条件筛选
filter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。is( expr ) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的
表达式就返回true。
map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。
not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。
slice( start, [end] ) 从匹配元素集合中取得一个子集,和内建的数组的slice 方法相同。
add( expr ) 把与表达式匹配的元素添加到jQuery对象中。
children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器
将使这个方法只匹配符合的元素(只包括元素节点,不包括文本节点)。
contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集
合(只包括元素节点,不
包括文本节点),如果元素为iframe,则取得其中的文档元素
find( expr ) 搜索所有与指定表达式匹配的元素。
next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合
parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合
(不包含根元素)。
prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。
siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。
andSelf( ) 将前一个匹配的元素集合添加到当前的集合中
取得所有div元素和其中的p元素,添加border类属性。取得所有div元素中的p元素,
添加background类属性
$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");
end( ) 结束当前的操作,回到当前操作的前一个操作
找到所有p元素其中的span元素集合,然后返回p元素集合,添加css属性$("p").find("span").end().css("border", "2px red solid"); JQuery Selectors 方法说明基本选择器
$("#myDiv") 匹配唯一的具有此id值的元素
$("div") 匹配指定名称的所有元素
$(".myClass") 匹配具有此class样式值的所有元素
$("*") 匹配所有元素
$("div,span,p.myClass") 联合所有匹配的选择器
层叠选择器
$("form input") 后代选择器,选择ancestor的所有子孙节点
$("#main > *") 子选择器,选择parent的所有子节点
$("label + input") 临选择器,选择prev的下一个临节点
$("#prev ~ div") 同胞选择器,选择prev的所有同胞节点
基本过滤选择器
$("tr:first") 匹配第一个选择的元素
$("tr:last") 匹配最后一个选择的元素
$("input:not(:checked) + span")从原元素集合中过滤掉匹配selector的所有元素(这里有是一个临选择器)
$("tr:even") 匹配集合中偶数位置的所有元素(从0开始)
$("tr:odd") 匹配集合中奇数位置的所有元素(从0开始)
$("td:eq(2)") 匹配集合中指定位置的元素(从0开始)
$("td:gt(4)") 匹配集合中指定位置之后的所有元素(从0开始)
$("td:gl(4)") 匹配集合中指定位置之前的所有元素(从0开始)
$(":header") 匹配所有标题
$("div:animated") 匹配所有正在运行动画的所有元素
内容过滤选择器
$("div:contains('John')") 匹配含有指定文本的所有元素
$("td:empty") 匹配所有空元素(只含有文本的元素不算空元素)
$("div:has(p)") 从原元素集合中再次匹配所有至少含有一个selector的所有元素
$("td:parent") 匹配所有不为空的元素(含有文本的元素也算)
$("div:hidden") 匹配所有隐藏的元素,也包括表单的隐藏域
$("div:visible") 匹配所有可见的元素
属性过滤选择器
$("div[id]") 匹配所有具有指定属性的元素
$("input[name='newsletter']") 匹配所有具有指定属性值的元素$("input[name!='newsletter']") 匹配所有不具有指定属性值的元素$("input[name^='news']") 匹配所有指定属性值以value开头的元素$("input[name$='letter']") 匹配所有指定属性值以value结尾的元素$("input[name*='man']") 匹配所有指定属性值含有value字符的元素$("input[id][name$='man']") 匹配同时符合多个选择器的所有元素
子元素过滤选择器
$("ul li:nth-child(2)"),
$("ul li:nth-child(odd)"), 匹配父元素的第n个子元素
$("ul li:nth-child(3n + 1)") $("div span:first-child") 匹配父元素的第1个子元素
$("div span:last-child") 匹配父元素的最后1个子元素
$("div button:only-child") 匹配父元素的唯一1个子元素
表单元素选择器
$(":input") 匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button
$(":text") 匹配所有类型为text的input元素
$(":password") 匹配所有类型为password的input元素
$(":radio") 匹配所有类型为radio的input元素
$(":checkbox") 匹配所有类型为checkbox的input元素
$(":submit") 匹配所有类型为submit的input元素
$(":image") 匹配所有类型为image的input元素
$(":reset") 匹配所有类型为reset的input元素
$(":button") 匹配所有类型为button的input元素
$(":file") 匹配所有类型为file的input元素
$(":hidden") 匹配所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器
$(":enabled") 匹配所有可操作的表单元素
$(":disabled") 匹配所有不可操作的表单元素
$(":checked") 匹配所有已点选的元素
$("select option:selected") 匹配所有已选择的元素
JQuery CSS 方法说明 css( name ) 访问第一个匹配元素的样式属性。
css( properties ) 把一个"名/值对"对象设置为所有匹配元素的样式属性。$("p").hover(function () {
$(this).css({ backgroundColor:"yellow", fontWeight:"bolder" }); }, function () {
var cssObj = {
backgroundColor: "#ddd",
fontWeight: "",
color: "#0028f4"
}
$(this).css(cssObj);
});
css( name, value ) 在所有匹配的元素中,设置一个样式属性的值。
offset( ) 取得匹配的第一个元素相对于当前可视窗口的位置。返回的对象有2个属性,
top和left,属性值为整数。这个函数只能用于可见元素。
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
width( ) 取得当前第一匹配的元素的宽度值,
width( val ) 为每个匹配的元素设置指定的宽度值。
height( ) 取得当前第一匹配的元素的高度值,
height( val ) 为每个匹配的元素设置指定的高度值。 JQuery Utilities 方法说明
jQuery.browser
.msie 表示ie
jQuery.browser.version 读取用户浏览器的版本信息
jQuery.boxModel 检测用户浏览器针对当前页的显示是否基于W3C CSS的盒模型jQuery.isFunction( obj ) 检测传递的参数是否为function
function stub() { }
var objs = [
function () {},
{ x:15, y:20 },
null,
stub,
"function"
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$("span:eq( " + i + ")").text(isFunc);
});
jQuery.trim( str ) 清除字符串两端的空格,使用正则表达式来清除给定字符两端的空格
jQuery.each( object, callback ) 一个通用的迭代器,可以用来无缝迭代对象和数组
jQuery.extend( target, object1, [objectN] ) 扩展一个对象,修改原来的对象并返回,这是一个强大的实现继承的
工具,这种继承是采用传值的方法来实现的,而不是JavaScript中的
原型链方式。
合并settings和options对象,返回修改后的settings对象
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options); 合并defaults和options对象,defaults 对象并没有被修改。options对象中的值
代替了defaults对象的值传递给了empty。 var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);
jQuery.grep( array, callback, [invert] ) 通过一个筛选函数来去除数组中的项
$.grep( [0,1,2], function(n,i){
return n > 0;
});
jQuery.makeArray( obj ) 将一个类似数组的对象转化为一个真正的数组
将选取的div元素集合转化为一个数组
var arr = jQuery.makeArray(document.getElementsByTagName("div")); arr.reverse(); // use an Array method on list of dom elements $(arr).appendTo(document.body);
jQuery.map( array, callback ) 使用某个方法修改一个数组中的项,然后返回一个新的数组
jQuery.inArray( value, array ) 返回value在数组中的位置,如果没有找到,则返回-1
jQuery.unique( array ) 删除数组中的所有重复元素,返回整理后的数组
jQuery常用功能大全 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery 对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.getElementByIdx_x("msg"))则为jquery对象,可以使用jquery的方法。 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。 如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。 以下几种写法都是正确的: $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery 对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个
jquery选择器之获取父级元素、同级元素、子元素 1、父级元素 1.1 parent() 方法返回被选元素的直接父元素。 如:$("span").parent(); 1.2 parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素()。 如:$("span").parents();
也可以使用可选参数来过滤对祖先元素的搜索。 如:$("span").parents("ul"); 1.3 parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 如:$("span").parentsUntil("div");
2、同胞 2.1 siblings() 方法返回被选元素的所有同胞元素。如:$("h2").siblings(); 返回属于
2.2 next() 方法返回被选元素的下一个同胞元素。 如:$("h2").next(); 2.3 nextAll() 方法返回被选元素的所有跟随的同胞元素。如:$("h2").nextAll();
2.4 nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。 如:$("h2").nextUntil("h6");
2.5 prev(), prevAll() 以及prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素。 3、子元素 3.1 children() 方法返回被选元素的所有直接子元素。 如:$("div").children(); 返回类名为"1" 的所有元素,并且它们是
$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点 上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt 等等. 2.组选择器: 下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class. $("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 3.后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test 的标签) 可以见DEMO。 4.子选择器: $("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子: $("div>.test")
在$("div + #test")中能取到p段落节点
则不能取到 6.属性选择器: 把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"):选取所有该mix且具有attr属性的节点 $("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点 $("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的 $("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的 $("mix[@attr*=a_value"]):attr属性的属性值中包含a_value 7.进一步选择器:
jQuery选择器的工作原理和优化 至于有那些选择器,在帮助手册中都有,自己去看,这篇主要是分析他的工作原理,而优化我们写的选择器,尤其在页面内容很多的情况下,更应该需要优化。下边就言归正传。 每次申明一个jQuery对象的时候,返回的是 jQuery.prototype.init 对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同,这里就不讲原因了,等下一篇再讲为什么会是这样。 当我们使用选择器的时候$(selector,content),就会执行 init(selectot,content),我们看看inti中是怎样执行的: if ( typeof selector == "string" ) { //正则匹配,看是不是HTML代码或者是#id var match = quickExpr.exec( selector );
//没有作为待查找的 DOM 元素集、文档或 jQuery 对象。 //selector是#id的形式 if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array) //HTML代码,调用clean补全HTML 代码 if ( match[1] ){ selector = jQuery.clean( [ match[1] ], context ); } // 是: $("#id") else {
jQuery入门 什么是jQuery jQuery是一个JavaScript库,通过封装原生的JavaScript函数得到一整套定义好的方法。它是JohnResig于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。以最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。 主旨:以更少的代码、实现更多的功能(write less ,do more!) 官网:https://www.doczj.com/doc/0f2730357.html,/ jQuery的功能和优势 jQuery作为JavaScript封装的库,它的目的就是为了简化开发者使用JavaScript。主要功能有以下几点: 像CSS那样访问和操作DOM; 修改CSS控制页面外观; 简化JavaScript代码操作; 事件处理更加容易; 各种动画效果使用方便; 让Ajax技术更加完美; 基于jQuery大量插件; 自行扩展功能插件。 jQuery最大的优势,就是特别的方便。比如模仿CSS获取DOM,比原生的JavaScript
要方便太多。并且在多个CSS设置上的集中处理非常舒服,而最常用的CSS功能又封装到单独的方法。 最重要的是jQuery的代码兼容性非常好,你不需要总是头疼着考虑不同浏览器的兼容问题。 其他JavaScript库 目前除了jQuery,还有5个JS库较为流行,他们分别是YUI、Prototype、Mootools、Dojo和ExtJS。 YUI,是雅虎公司开发的一套完备的、扩展性良好的富交互网页工具集。 Prototype,是最早成型的JavaScript库之一,对JavaScript内置对象做了大量的扩展。 Dojo,Dojo强大之处在于提供了其他库没有的功能。离线存储、图标组件等等。 Mootools,轻量、简洁、模块化和面向对象的JavaScript框架。 ExtJS,简称Ext,原本是对YUI的一个扩展,主要创建前端用户界面。(付费的) jQuery代码的编写 配置jQuery环境 1、获取jQuery最新版本 从官网下载:https://www.doczj.com/doc/0f2730357.html,/ 3、jQuery环境配置 jQuery不需要安装,把下载的jQuery.js放到网站上的一个公共位置,想要在某个页面上使用jQuery时,只需在该HTML文档中引入该库文件即可。 4、在页面中引入jQuery 由于jQuery是JavaScript的一个库文件,也就是jQuery本质是一个.js文件,所以使用引入。 简单的jQuery示例
jquery: 基本的选择器: $('#id').css('color','blue');//根据id属性为id,设置css样式颜色设置成蓝色 $('h2').css('background-color','pink'); $('input').css('width','500px'); $('.apple').css('background-color','lightgreen');//class属性值查找 $('*').css('background-color','gray');//通配符 $('h2,#usertel,#userqq').css('color','lightblue');//联合选择器 层次选择器: $('div span');//在div内部获得span节点,不考虑层次,只获得div内第一个span节点,,注意不考虑层次 $('div > span')//在div内部获得子元素span节点 $('div+span')//在div后边获得紧紧挨着的第一个兄弟关系的span节点,获得的是span节点 $('div~span')//在div后边后边获得全部兄弟关系的span节点 并且选择器: $('li').css('color','red'); $('li:first');//:first第一个 :last 最后一个 $('li:eq(3)').css('color','red')//eq(下标索引号码) 获得节点的下标索引值与给定索引值相等 gt(索引号) great than 节点索引值,大于某个范围 lt(索引值) less than 节点索引值,小于某个范围 $('li:gt(5)').css('background-color','pink'); $('li:lt(5)').css('background-color','orange'); :even 匹配到下标索引值为偶数的节点 :odd 匹配到下标索引值为奇数的节点
jQuery选择器种类 由于经常使用jQuery,但是其中的很多选择器又不太能够熟练记牢使用,所以趁着上周有人分享,我再仔细的把jQuery的选择器过一遍,争取一次拿下,以后做到运用自如。jQuery选择器主要来分可以分为三种:(1)基本选择器(2)层次选择器(3)过滤选择器(4) 表单选择器 1、基本选择器 基本选择器主要就是比较常见和常用的集中,是必须要掌握的。 #ID id选择器返回一个对象$("#div") .class类选择器返回集合$(".content") Element 标签选择器返回集合$("input") * 匹配所有元素返回集合$("*") selector1,selector2,selector3,....合并每个选择器匹配的元素,返回集合$("#div,.class,input") 2、层次选择器(主要是选择层次下面的元素) $("E F") 选择E元素中的所有F后代元素(注意:是子孙元素) 返回集合 $("P>C") 选择P元素下的C子元素(注意:是子元素)返回集合 $("P+N") 选择P元素后的相邻元素(即下一个兄弟元素),和$("P").next("N")方法执行效果相同 $("P~S") 选择P元素之后的所有S兄弟元素,和$("P").nextAll("S")方法执行效果相同,另pre()方法和next()方法相对。preAll()和nextAll()相对。 注意siblings()方法和nextAll()方法的区别:siblings()是所有前后的兄弟元素,nextAll()是所有后面的兄弟元素 第三和第四个选择器常常用后面的写法代替
现在我们开始Jquery 的选择器之旅哈哈。 下面的选择器分类中, 带有“过滤器”的分类表示是“过滤”选择器, 否则就是“选择”功能的选择器。 jQuery 选择器分为如下几类: [说明] 1.点击“名称”会跳转到此方法的jQuery 官方说明文档。 2.可以在下节中的jQuery 选择器实验室测试各种选择器 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id 选择 $("divId") 选择ID 为divId 的元素 element 根据元素的名称选择, $("a") 选择所有元素 .class 根据元素的css 类选择 $(".bgRed") 选择所用CSS 类为bgRed 的 元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几 个选择器匹配的内容. $("#divId, a, .bgRed") [学习建议]: 大家暂时记住基础选择器即可, 可以直接跳到下一节“jQuery 选择器实验室”进行动手练习, 以后再回来慢慢学习全部的选择器, 或者用到的时候再回来查询。 2.层次选择器 Hierarchy
child必须包含在parent中并且父类是 parent元素.选择CSS类为myList元素中的直接子节点
jQuery 语法 您可以选取(查询,query)HTML 元素,并对它们执行“操作”(actions)。 jQuery 语法实例 $(this).hide() 演示jQuery hide() 函数,隐藏当前的HTML 的元素。 $("#test").hide() 演示jQuery hide() 函数,隐藏id="test" 的元素。 $("p").hide() 演示jQuery hide() 函数,隐藏所有 元素。 $(".test").hide() 演示jQuery hide() 函数,隐藏所有class="test" 的元素。 jQuery 语法 jQuery 语法是为HTML 元素的选取编制,可以对元素执行某些操作。 基础语法是:$(selector).action() ?美元符号定义jQuery ?选择符(selector)“查询”和“查找” HTML 元素 ?jQuery action() 执行对元素的操作 实例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - 隐藏所有class="test" 的段落 $("#test").hide() - 隐藏所有id="test" 的元素 提示:jQuery 使用的语法是XPath 与CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有jQuery 函数位于一个document ready 函数中:
这是为了防止文档在完全加载(就绪)之前运行jQuery 代码。 jQuery 选择器 选择器允许您对元素组或单个元素进行操作。 jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取HTML 元素的实例。 关键点是学习jQuery 选择器是如何准确地选取您希望应用效果的元素。 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML 元素进行选择。选择器允许您对HTML 元素组或单个元素进行操作。 在HTML DOM 术语中: 选择器允许您对DOM 元素组或单个DOM 节点进行操作。 jQuery 元素选择器 jQuery 使用CSS 选择器来选取HTML 元素。 $("p") 选取 元素。 $("p.intro") 选取所有class="intro" 的 元素。 $("p#demo") 选取id="demo" 的第一个 元素。 jQuery 属性选择器 jQuery 使用XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有href 属性的元素。 $("[href='#']") 选取所有带有href 值等于"#" 的元素。
jQuery选择器按照功能主要分为"选择"和"过滤".并且是配合使用的.可以同时使用组合 成一个选择器字符串.主要的区别是"过滤"作用的选择器是指定条件从前面匹配的内容中 筛选,"过滤"选择器也可以单独使用,表示从全部"*"中筛选.比如: $(":[title]") 等同于: $("*:[title]") 而"选择"功能的选择器则不会有默认的范围,因为作用是"选择"而不是"过滤". 下面的选择器分类中,带有"过滤器"的分类表示是"过滤"选择器,否则就是"选择"功能的 选择器. jQuery选择器分为如下几类: [说明] 1.点击"名称"会跳转到此方法的jQuery官方说明文档. 2.可以在下节中的jQuery选择器实验室测试各种选择器 1.基础选择器Basics 名称说明举例 #id根据元素Id选择$("divId")选择ID为divId的元素element根据元素的名称选择,$("a")选择所有元素 .class根据元素的css类选择$(".bgRed")选择所用CSS类为 bgRed的元素 *选择所有元素$("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用","分隔开然后再拼成一个 选择器字符串.会同时选中这几个选择器匹配的 内容. $("#divId,a,.bgRed") [学习建议]:大家暂时记住基础选择器即可,可以直接跳到下一节"jQuery选择器实验室"进行动手练习,以后再回来慢慢学习全部的选择器,或者用到的时候再回来查询. 2.层次选择器Hierarchy 名称说明举例 ancestor descendant 使用"form input"的形式选中form中的所 有input元素.即ancestor(祖先)为from, descendant(子孙)为input. $(".bgRed div")选择CSS类为 bgRed的元素中的所有 jquery 获取对象大全 JQuery 的核心的一些方法 $("Element").length; ' 元素的个 数,是个属性 $("Element").size(); '也是元素的个数,不过带括号是个方 法 $("Element").get(); ' 某个元素在页面中的集合, 以数组的形式 存储 $("Element").get(index); '功能和上面的相同, index 表示第 几个元素,数组的下标 $("Element").get().reverse(); ' 把得到的数组方向 $("Element1").index($("Element2")); '元素 2 在元素 1 中的 索引值是。。。、基本对象获取 (注意这里获取的都是 Jquery 对象而不是 Dom 对象哦,但是 $(".abc")'获得样式class 的名字是.abc 的元素对象 常用 $("div") ' 标签选择器 选择所有的 div 元素 常用 $("#a,.b,span") '表示获得 ID 是 a 的元素和使用了类样式 b 的 元素以及所有的 span 元素 他俩是可以转换滴 ) $("*") '表示获取所有对象 $("#XXX") '获得 id=XXX id 或 CSS 样式 id ) 常用 $("input[name='username'] ") name='userName'的元素 但是我至今没这样用过 的元素对象( id 可以是标签的 获得 input 标签中 常用 $("#a .b p") 'ID号是a的并且使用了b样式的所有的p元素、层级元素获取$("Element1 Element2 Element3 ") '前面父级后面是子集 $("div > p") ' 获取div 下面的所有的p 元素 $("div + p") 'div 元素后面的第一个p 元素 $("div?p") 'div后面的所有的p元素、简单对象获取$("Element:first") 'HTML 页面中某类元素的第一个元素$("Element:last") 'HTML 页面中某类元素的最后一个元素$("Element:not(selector)") ' 去除所有与给定选择器匹配的元素,如:$("input:not(:checked)") 表示选择所有没有选中的复选框 $("Element:even") ' 获得偶数行 $("Element:odd “) '获得奇数行 $("Element:eq(index)") '取得一个给定的索引值$("Element:gt(index)") '取得给定索引值的元素之后的所有元素 $("Element:lt(index)") '取得给定索引值的元素之前的所有元素、内容对象的获取和对象可见性 $("Element:contains(text)") ' 元素中是否包含text 文本内容$('Element:empty") ' 获得元素不包含子元素或文本的$("Element:partnt") ' 获得元素包含子元素或文本的$("Element:has(selector)") ' 是否包含某个元素,如: 文档不收费,希望下载 一、基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色。(id选择器返单个元素) $(document).ready(function () { $('#one').css('background', '#000'); }); 2. class选择器(遍历css类元素) 将class="cube"的元素背景色设为黑色 $(document).ready(function () { $('.cube').css('background', '#000'); }); 3. element选择器(遍历html元素) 将p元素的文字大小设置为12px $(document).ready(function () { $('p').css('font-size', '12px'); }); 4. * 选择器(遍历所有元素) $(document).ready(function () { // 遍历form下的所有元素,将字体颜色设置为红色 $('form *').css('color', '#FF0000'); }); 5. 并列选择器 $(document).ready(function () { // 将p元素和div元素的margin设为0 $('p, div').css('margin', '0'); }); 二、层次选择器 1. parent > child(直系子元素) $(document).ready(function () { // 选取div下的第一代span元素,将字体颜色设为红色 $('div > span').css('color', '#FF0000'); }); 下面的代码,只有第一个span会变色,第二个span不属于div的一代子元素,颜色保持不变。 https://www.doczj.com/doc/0f2730357.html,jquery获取对象大全
jQuery选择器大全(48个代码片段+21幅图演示)
jQuery的所有方法
https://www.doczj.com/doc/0f2730357.html,
jQuery 选择器 选择器 实例 选取 所有元素 id=lastname 的元素 所有 class="intro" 的元素 所有 元素 所有 class=intro 且 class=demo 的元素 第一个 元素 最后一个 元素 所有偶数 元素 所有奇数 元素 列表中的第四个元素(index 从 0 开始) 列出 index 大于 3 的元素 列出 index 小于 3 的元素 所有不为空的 input 元素 所有标题元素 ... 所有动画元素 包含文本的所有元素 无子(元素)节点的所有元素 所有隐藏的 元素 所有可见的表格 所有带有匹配选择的元素 1 / 10
*
$("*")
#id
$("#lastname")
.class
$(".intro")
element
$("p")
.class.class
$(".intro.demo")
:first
$("p:first")
:last
$("p:last")
:even
$("tr:even")
:odd
$("tr:odd")
:eq(index)
$("ul li:eq(3)")
:gt(no)
$("ul li:gt(3)")
:lt(no)
$("ul li:lt(3)")
:not(selector)
$("input:not(:empty)")
:header
$(":header")
:animated
:contains(text)
$(":contains('W3School')")
:empty
$(":empty")
:hidden
$("p:hidden")
:visible
$("table:visible")
s1,s2,s3
$("th,td,.intro")