<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<img src="imgs/01.jpg" alt=""/>
<img src="imgs/02.jpg" alt=""/>
<ul>
<li>Hello111</li>
<li>Hello222</li>
<li>Hello333</li>
</ul>
<p>this is p1</p>
<p>this is p2</p>
<select id="single">
<option>Single111</option>
<option>Single222</option>
<option>Single333</option>
<option>Single444</option>
</select>
<p>this is p3</p>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple111</option>
<option>Multiple222</option>
<option selected="selected">Multiple333</option>
</select>
<p>this is p4</p>
<input type="checkbox" value="check1" checked/> check111
<input type="checkbox" value="check2"/> check222
<br/>
<input type="radio" value="radio1"/> radio111
<input type="radio" value="radio2"/> radio222
<br>
<input type="text" value="this is text1" class="items">
<input type="text" value="this is text2" class="items">
<input type="text" value="this is text3">
</body>
</html>
<script>
$(function () {
/**
* 获取img标签的个数
* /
// var size = $("img").size();
// alert(size);
// var len = $("img").length;
// alert(len);
/**
* 将jquery对象通过get函数转化为DOM
* /
// var s1 = $("img").get(1).src;
// alert(s1);
/**
* 为所有图像设置src属性
*/
//$("img").attr("src", "imgs/01.jpg");
/**
* 返回文档中所有图像的src属性值。
*/
// alert($("img").attr("src"));
/**
*为所有图像设置src和alt属性。
*/
//$("img").attr({ src: "imgs/01.jpg", alt: "Test Image" });
/**
*把src属性的值设置为title属性的值。
*/
//$("img").attr("title", function() { return this.src });
/**
* 将文档中图像的src属性删除
*/
// $("img").removeAttr("src");
/**
* 为匹配的元素加上 'selected' 类
*/
// $("p").addClass("selected1 selected2");
/**
* 给li加上不同的class
*/
// $('ul li').addClass(function() {
// return 'item-' + $(this).index();
// });
/**
* 从匹配的元素中删除 'selected1' 类
*/
// $("p").removeClass("selected1");
/**
*删除匹配元素的所有类
*/
// $("p").removeClass();
//alert($('p').html());
/**
* 设置所有 p 元素的内容
*/
// $("p").html("Hello <b>world</b>!");
/**
* 使用函数来设置所有匹配元素的内容。
*/
// $("p").html(function(n){
// return "这个 p 元素的 index 是:" + n;
// });
/**
* 返回p元素的文本内容。
*/
//alert($('p:first').text());
/**
* 设置所有 p 元素的文本内容
*/
//$("p").text("Hello world!Hello world!Hello world!");
/**
* 使用函数来设置所有匹配元素的文本内容。
*/
// $("p").text(function (n) {
// return "这个 p 元素的 index 是:" + n;
// });
/**
* 获取文本框中的值
*/
//alert($("input:last").val());
/**
* 设定文本框的值
*/
//$("input").val("hello world!");
/**
* 回调函数设定文本框的值
*/
// $('input:text.items').val(function() {
// alert(this.value+","+this.className);
// return this.value + ',' + this.className;
// });
/**
* 设置初始值
*/
//$("#single").val("Single333");
//$("input").val(["check2", "radio1"]);
/**
* 返回属性的值
*/
// var val = $("input[type='checkbox']").prop("checked");
//alert(val)
/**
* 设置属性的值
*/
//$("input[type='checkbox']").prop("checked", true);
/**
* 使用函数设置属性和值:
*/
// $("input[type='checkbox']").prop("checked", function( i, val ) {
// alert(i+","+val);
// return !val;
// });
})
</script>
jQuery的属性操作(attr,prop,html,text,val,addClass)
最新推荐文章于 2020-04-28 19:58:10 发布