JavaScript 和jQuery 对元素值的获取和写入

<from>
			<input type="text" name="name" id="name" value="liwei" />
		</from>
		<div id="txt">woshiliwei</div>

<script>
	$(function(){
		//获取元素的值     js方式
		var fromValue=document.getElementById("name").value;
		var divValue=document.getElementById("txt").innerHTML;
		console.log(fromValue);
		console.log(divValue);
		//改变元素的值    js方式
		var fromValue=document.getElementById("name").value="awei";
		var divValue=document.getElementById("txt").innerHTML="wuminglin";
		console.log(fromValue);
		console.log(divValue);
		//获取元素的值     jQuery方式
		var a = $("#name").val();
		var b = $("#txt").html();	
		console.log(a);
		console.log(b);
		//改变元素的值    jQuery方式
		var c = $("#name").val("a");
		var d = $("#txt").html("liuguoyang");
		console.log(c);
		console.log(d);
		
	});
</script>

 控制台输出：

 

 

输出的对象  c，d 为jQuery对象，但是元素的值已经改变了。

 

 

//1、与内容相关的函数
function textFun(){
//获取的是第一个匹配元素的围堵标签中的所有内容，包括了嵌套在内部的标签
var str1=$("div").html();
console.log(str1);
//获取的是第一个匹配元素的围堵标签中的所有文本，不包含标签的内容
var str2=$("div").text();
console.log(str2);
//val()只能用在表单项元素中，div不是表单元素，所以val()获取不到任何内容
var str3=$("div").val();
//input是表单项元素，val()可以获取到
var str4=$("input").val();
console.log(str3);
console.log(str4);
}

与属性相关的函数

//2、与属性相关的函数
function attrFun(){
var img=$("img");
//设置属性
img.attr("src","img/cat.jpg");
img.attr("title","不服！");
//移除属性
img.removeAttr("title");
//获取属性
var src=img.attr("src");
var title=img.attr("title");
console.log(src+"===="+title);
//获取checked属性使用prop函数，获取到的值是boolean类型，表示是否被选中
var list=$("input[type='radio']");
for(var i=0;i<list.length;i++){
var flag=$(list[i]).prop("checked");
console.log("checked="+flag);
}
}