<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);
}
}