jQuery慢慢啃(三)

1.attr(name|properties|key,value|fn)设置或返回被选元素的属性值。

$("img").attr("src");//获取属性

$("img").attr({ src: "test.jpg", alt: "Test Image" });//设置多个属性

$("img").attr("src","test.jpg");//设置单个属性

$("img").attr("title", function() { return this.src });//设置title值为函数返回值

2.removeAttr(name)从每一个匹配的元素中删除一个属性

$("img").removeAttr("src");

3.prop(name|properties|key,value|fn)

$("input[type=‘checkbox‘]").prop("checked");//获取元素属性值

$("input[type=‘checkbox‘]").prop({disabled: true});//map设置元素属性值

$("input[type=‘checkbox‘]").prop("disabled", false);//设置元素属性值

$("input[type=‘checkbox‘]").prop("checked", function( i, val ) {  return !val;});//此处i表示元素所在索引,val代表元素的属性值

.attr()和.prop()都不应该被用来取值/设值。使用.val()方法代替

.prop()方法应该被用来处理boolean attributes/properties以及在html(比如:window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。

4.removeProp(name)用来删除由.prop()方法设置的属性集

var $para = $("p"); $para.prop("luggageCode", 1234);

$para.removeProp("luggageCode");

5.addClass(class|fn)为每个匹配的元素添加指定的类名。

$("p").addClass("selected");//添加一个类

$("p").addClass("selected1 selected2");//添加2个类

$(‘ul li‘).addClass(function(index, class) {return ‘item-‘ + $(this).index();});// 对集合中的元素加上不同的类,其中函数第一个参数是索引,第二个参数是对应的原来的类名值

6.removeClass([class|fn])从所有匹配的元素中删除全部或者指定的类。

$("p").removeClass("selected");

$("p").removeClass();//删除所有类

$(‘li:last‘).removeClass(function() {return $(this).prev().attr(‘class‘);});//用函数删除

7.toggleClass(class|fn[,sw])如果存在(不存在)就删除(添加)一个类。

$("p").toggleClass("selected");//切换类

var count = 0;//根据点击次数切换类

$("p").click(function(){$(this).toggleClass("highlight", count++ % 3 == 0);  });

$(‘div.foo‘).toggleClass(function() {//根据其他条件切换类名

if ($(this).parent().is(‘.bar‘)

{     return ‘happy‘;   }

else {     return ‘sad‘;   }

});

8.html([val|fn])取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档

$(‘p‘).html();返回p元素的内容。

$("p").html("Hello <b>world</b>!");//设置所有 p 元素的内容

$("p").html(function(n){return "这个 p 元素的 index 是:" + n; });//使用函数来设置所有匹配元素的内容。

9.text([val|fn])取得所有匹配元素的内容。

$(‘p‘).text();//返回p元素的文本内容

$("p").text("Hello world!");//设置所有 p 元素的文本内容

$("p").text(function(n){return "这个 p 元素的 index 是:" + n; });//使用函数来设置所有匹配元素的文本内容。

10.val([val|fn|arr])获得匹配元素的当前值。

$("input").val();//获取文本框中的值

$("input").val("hello world!");//设定文本框的值

$(‘input:text.items‘).val(function() {return this.value + ‘ ‘ + this.className;});//设定文本框的值

<select id="single">

<option>Single</option>

<option>Single2</option>

</select>

<select id="multiple" multiple="multiple">

<option selected="selected">Multiple</option>

<option>Multiple2</option>

<option selected="selected">Multiple3</option>

</select><br/>

<input type="checkbox" value="check1"/> check1

<input type="checkbox" value="check2"/> check2

<input type="radio" value="radio1"/> radio1

<input type="radio" value="radio2"/> radio2

执行:

$("#single").val("Single2");

$("#multiple").val(["Multiple2", "Multiple3"]);

$("input").val(["check2", "radio1"]);

时间: 2024-10-14 06:41:52

jQuery慢慢啃(三)的相关文章

jQuery慢慢啃之CSS(七)

1.ready(fn)//当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){ // 在这里写你的代码...}); 使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何. $(function($) { // 你可以在这里继续使用$作为别名... }); 2.on(events,[selector],[data],fn)//在选择元素上绑定一个或多个事件的事

jQuery慢慢啃之特效(八)

1.show([speed,[easing],[fn]])\\显示隐藏的匹配元素 //speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) //easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear" $("p").show() $("p").s

jQuery慢慢啃之CSS(五)

1.css(name|pro|[,val|fn])//访问匹配元素的样式属性 $("p").css("color");//获取 $("p").css({ "color": "#ff0011", "background": "blue" });//属性组设置 $("p").css("color","red");

jQuery慢慢啃之ajax(九)

1.jQuery.ajax(url,[settings])//通过 HTTP 请求加载远程数据 如果要处理$.ajax()得到的数据,则需要使用回调函数.beforeSend.error.dataFilter.success.complete. beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数. error 在请求出错时调用.传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话) dataFilter 在请求成功之后调用

jQuery慢慢啃(四)

1.eq(index|-index) 获取第N个元素 其中负数:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数.(1算起) $("p").eq(1)//获取匹配的第二个元素 $("p").eq(-2)//获取倒数匹配的第二个元素 2.$('li').first()//获取第一个元素 $('li').last()//获取最后个元素 $(this).hasClass("protected")和 $(this).is(".prote

jQuery慢慢啃之文档处理(五)

1.append(content|fn)//向每个匹配的元素内部追加内容. $("p").append("<b>Hello</b>"); 2.appendTo(content)//把所有匹配的元素追加到另一个指定的元素元素集合中. $("p").appendTo("div"); appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几

jQuery慢慢啃之工具(十)

1.jQuery.support//一组用于展示不同浏览器各自特性和bug的属性集合 2.jQuery.browser//浏览器内核标识.依据 navigator.userAgent 判断. 可用值: safari opera  msie mozilla 3.jQuery.browser.version//浏览器渲染引擎版本号 4.jQuery.boxModel//浏览器是否使用标准盒模型渲染页面. 建议使用 jQuery.support.boxModel 代替.W3C CSS 盒模型. 5.j

jQuery慢慢啃之事件对象(十一)

1.event.currentTarget//在事件冒泡阶段中的当前DOM元素 $("p").click(function(event) { alert( event.currentTarget === this ); // true }); 2.event.data//当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind. $("a").each(function(i) { $(this).bind('click', {index:i},

jQuery入门第三

jQuery入门第三 1.HTML 2.CSS 衣服 3.javascript 可以动的人 4.DOM 编程 对html文档的节点操作 5.jQuery 对 javascript的封装 简练的语法 复杂的操作 * -选择器 * -筛选 * -CSS * -属性 * -文档 * -事件 * -Ajax(Django) <style> td{ border:1px solid black; } td{ width:70px; height:20px; } p{ width:70px; height