Java教程

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

本文主要是介绍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);
}
}

这篇关于JavaScript 和jQuery 对元素值的获取和写入的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!