标签:
设置或返回被选元素的属性值。
//参数name 描述:返回文档中所有图像的src属性值。 $("img").attr("src");
//参数properties 描述:为所有图像设置src和alt属性。 $("img").attr({ src: "test.jpg", alt: "Test Image" });
//参数key,value 描述:为所有图像设置src属性。 $("img").attr("src","test.jpg");
//参数key,回调函数 描述:把src属性的值设置为img1.png , ... $(function(){ //回调函数(index下标)(src1可自定义,是src属性的值) $(‘img‘).attr(‘src‘,function(index,src1){ this.src = "img"+(index+1)+".png"; }); }) //结果: src="img1.png" src="img2.png" src="img3.png" ...
从每一个匹配的元素中删除一个属性
//将文档中图像的src属性删除 <img src="test.jpg"/> $("img").removeAttr("src");
获取在匹配的元素集中的第一个元素的属性值。
//参数name 描述: // 选中复选框为true,没选中为false $("input[type=‘checkbox‘]").prop("checked"); //参数properties 描述: // 禁用页面上的所有复选框。 $("input[type=‘checkbox‘]").prop({disabled: true}); //参数key,value 描述: // 禁用和选中所有页面上的复选框。 $("input[type=‘checkbox‘]").prop("disabled", false); $("input[type=‘checkbox‘]").prop("checked", true); //参数key,回调函数 描述: // 通过函数来设置所有页面上的复选框被选中。 <input type="checkbox" name="" id="" value="" /> //结果,选中勾上 <input type="checkbox" checked="checked" name="" id="" value="" /> //结果,没勾上 <input type="checkbox" checked="checked" name="" id="" value="" /> //结果,没勾上 $("input[type=‘checkbox‘]").prop("checked", function( i, val ) { return !val; });
用来删除由.prop()方法设置的属性集
//设置一个段落数字属性,然后将其删除。 <p></p> var $para = $("p"); $para.prop("luggageCode", 1234); $para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". "+"<br>"); $para.removeProp("luggageCode"); $para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". "); //结果: The secret luggage code is: 1234.
Now the secret luggage code is: undefined.
为每个匹配的元素添加指定的类名。
//参数class 描述: 为匹配的元素加上 ‘selected‘ 类 $("p").addClass("selected"); $("p").addClass("selected1 selected2");
//回调函数 描述: 给最后一个class加上一个"item-2"的类 <ul> <li>Hello</li> <li>Hello</li> <li>Hello</li> </ul> $(‘ul li:last‘).addClass(function() { return ‘item-‘ + $(this).index(); });
从所有匹配的元素中删除全部或者指定的类。
//参数class 描述: 从匹配的元素中删除 ‘selected‘ 类 $("p").removeClass("selected"); //参数class 描述: 删除匹配元素的所有类 $("p").removeClass(); //回调函数描述: 删除最后一个元素上与前面重复的class $(‘li:last‘).removeClass(function() { return $(this).prev().attr(‘class‘); });
如果存在(不存在)就删除(添加)一个类。
//参数class 描述: 为匹配的元素切换 ‘selected‘ 类 $("p").toggleClass("selected"); //参数class,switch 描述: 每点击三下加上一次 ‘highlight‘ 类 <strong>jQuery 代码:</strong> var count = 0; $("p").click(function(){ $(this).toggleClass("highlight", count++ % 3 == 0); }); //回调函数 描述: 根据父元素来设置class属性 $(‘div.foo‘).toggleClass(function() { if ($(this).parent().is(‘.bar‘) { return ‘happy‘; } else { return ‘sad‘; } });
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。
//无参数 描述: 返回p元素的内容。 $(‘p‘).html(); //参数val 描述: 设置所有 p 元素的内容 $("p").html("Hello <b>world</b>!"); 回调函数描述: 使用函数来设置所有匹配元素的内容。 jQuery 代码: $("p").html(function(n){ return "这个 p 元素的 index 是:" + n; });
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
//无参数 描述: 返回p元素的文本内容。 $(‘p‘).text(); //参数val 描述: 设置所有 p 元素的文本内容 $("p").text("Hello world!"); //回调函数 描述: 使用函数来设置所有匹配元素的文本内容。 $("p").text(function(n){ return "这个 p 元素的 index 是:" + n; });
获得匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。
//无参数 描述: 获取文本框中的值 $("input").val(); //参数val 描述: 设定文本框的值 $("input").val("hello world!"); //回调函数 描述: 设定文本框的值 $(‘input:text.items‘).val(function() { return this.value + ‘ ‘ + this.className; }); //参数array 描述: 选中check2,radio1 <input type="checkbox" value="check1"/> check1 <input type="checkbox" value="check2"/> check2 <input type="radio" value="radio1"/> radio1 <input type="radio" value="radio2"/> radio2 $("input").val(["check2", "radio1"]);
访问匹配元素的样式属性。
//参数name 描述: 取得第一个段落的color样式属性的值。 $("p").css("color"); //参数properties 描述: 将所有段落的字体颜色设为红色并且背景为蓝色。 $("p").css({ "color": "#ff0011", "background": "blue" }); //参数name,value 描述: 将所有段落字体设为红色 $("p").css("color","red"); //参数name,回调函数 描述: 逐渐增加div的大小 $("div").click(function() { $(this).css({ width: function(index, value) { return parseFloat(value) * 1.2; }, height: function(index, value) { return parseFloat(value) * 1.2; } }); });
直接向 jQuery 中添加钩子,用于覆盖设置或获取特定 CSS 属性时的方法,目的是为了标准化 CSS 属性名或创建自定义属性。
$.cssHooks 对象提供了一种通过定义函数来获取或设置特定 CSS 值的方法。可以用它来创建新的 cssHooks 用于标准化 CSS3 功能,例如,盒子阴影(box shadows)及渐变(gradients)。
例如,某些基于 Webkit 的浏览器会使用 -webkit-border-radius 来设置对象的 border-radius,然而,早先版本的 Firefox 则使用 -moz-border-radius。cssHook 就可以将这些不同的写法进行标准化,从而让 .css() 可以使用统一的标准化属性名(border-radius 或对应的 DOM 属性写法 borderRadius)。
该方法除了提供了对特定样式的处理可以采用更加细致的控制外,$.cssHooks 同时还扩展了 .animate() 方法上的属性集
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
//获取第二段的偏移 <p>Hello</p><p>2nd Paragraph</p> var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
//获取第一段的偏移 <p>Hello</p><p>2nd Paragraph</p> var p = $("p:first"); var position = p.position(); $("p:last").html( "left: " + position.left + ", top: " + position.top );
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。
//无参数描述: // 获取第一段相对滚动条顶部的偏移 <p>Hello</p><p>2nd Paragraph</p> var p = $("p:first"); $("p:last").text( "scrollTop:" + p.scrollTop() ); //结果: <p>Hello</p><p>scrollTop: 0</p> //参数val 描述: //设置相对滚动条顶部的偏移 $("div.demo").scrollTop(300);
获取匹配元素相对滚动条左侧的偏移。
此方法对可见和隐藏元素均有效。
//无参数描述: // 获取第一段相对滚动条左侧的偏移 <p>Hello</p><p>2nd Paragraph</p> var p = $("p:first"); $("p:last").text( "scrollLeft:" + p.scrollLeft() ); //参数val 描述: // 设置相对滚动条左侧的偏移 $("div.demo").scrollLeft(300);
取得匹配元素当前计算的高度值(px)。
在 jQuery 1.2 以后可以用来获取 window 和 document 的高
//无参数描述: //获取第一段的高 $("p").height(); //参数val 描述: // 把所有段落的高设为 20: $("p").height(20); //参数function(index, height) 描述: // 以 10 像素的幅度增加 p 元素的高度 jQuery 代码: $("button").click(function(){ $("p").height(function(n,c){ return c+10; }); });
取得第一个匹配元素当前计算的宽度值(px)。
获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
此方法对可见和隐藏元素均有效。
//获取第一段落内部区域高度。 <p>Hello</p><p>2nd Paragraph</p> var p = $("p:first"); $("p:last").text( "innerHeight:" + p.innerHeight() );
获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。
此方法对可见和隐藏元素均有效。
获取第一个匹配元素外部高度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
//获取第一段落外部高度。 <p>Hello</p><p>2nd Paragraph</p> var p = $("p:first"); $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
获取第一个匹配元素外部宽度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
标签:
原文地址:http://www.cnblogs.com/dadayang/p/5906287.html