1. jQuery HTML
text() - 设置或返回所选元素的文本内容---->innerText
html() - 设置或返回所选元素的内容（包括 HTML 标记）—innerHTML
通过 jQuery text() 和 html() 方法来获得内容
val() - 设置或返回表单字段的值—value属性
获取属性-attr()，jQuery attr() 方法用于获取属性值
<body>
<div id="box">this is a div</div>
<input type="button" value="改变内容" id="btn1"/>
<input type="text" id="username" name="username" value="aaa"/>
<input type="button" id="btn2" value="改变输入框内容"/>
<img src="img/1.jpg" id="img1" width="100px" height="100px"/>
<input type="button" value="改变图片" id="btn3"/>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//html可以识别内容中标签，text则不识别
//$("#box").html("<font color = 'red'>this is a red font</font>");
$("#box").text("<font color = 'red'>this is a red font</font>");
//var t = $("#box").html();
//alert(t);
});
$("#btn2").click(function () {
// 通过val可以获取输入框的内容 和改变内容
$("#username").val("bbbb");
alert( $("#username").val());
});
$("#btn3").click(function () {
$("#img1").attr("src","img/2.jpg");
});
})
</script>
</body>
2.案例 ：全选 |全不选
<body>
<table border="1px" width="300" height="200">
<tr>
<td><input type="checkbox" id="selectAll">全选</input></td>
<td>编号</td>
<td>名称</td>
<td>价格</td>
</tr>
<tr>
<td><input type="checkbox" class="sel"></input></td>
<td>1</td>
<td>手机</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" class="sel"></input></td>
<td>2</td>
<td>电脑</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" class="sel"></input></td>
<td>3</td>
<td>平板</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" class="sel"></input></td>
<td>4</td>
<td>手表</td>
<td>5</td>
</tr>
</table>
<script type="text/javascript">
$(function () {
$("#selectAll").click(function () {
//alert($(this).attr("checked"));
// alert($(this).prop("checked"));
if($(this).prop("checked")){
$(".sel").prop("checked",true);
}else{
$(".sel").prop("checked",false);
}
});
});
</script>
</body>
3.添加元素
append 在标签内容后面追加,包含在原来标签里面
prepend 在标签内容前面追加,包含在原来标签里面
after 在标签后面重新写一个标签,不包含在原来标签里面
before在标签前面重新写一个标签,不包含在原来标签里面
<body>
<p id="p1" style="background-color: green;height: 100px">this is p</p>
<div id="box1">this is div</div>
<input type="button" id="btn1" value="删除元素"/>
<script type="text/javascript">
$(function () {
// append 在标签内容后面追加,包含在原来标签里面
//prepend 在标签内容前面追加,包含在原来标签里面
// after 在标签后面重新写一个标签,不包含在原来标签里面
//before在标签前面重新写一个标签,不包含在原来标签里面
$("#p1").append("<span style='color: red'>this is a span</span>");
$("#box1").append("<span style='color: red'>this is a div span</span>");
$("#p1").prepend("<span style='color: red'>this is a span</span>");
$("#box1").prepend("<span style='color: red'>this is a div span</span>");
$("#p1").after("<img src='img/1.jpg'/>");
$("#p1").before("<img src='img/2.jpg'/>");
});
$(function () {
$("#btn1").click(function () {
// $("#p1").remove();// 删除当前标签以及子标签
$("#p1").empty();// 清除当前标签的子标签以及内容
});
});
</script>
</body>
4.遍历元素
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<script type="text/javascript">
$(function () {
// 遍历标签的一种形式
$("div").css("color","red");// 内置了 隐式循环
// 2. 显示循环
for(var i = 0;i<$("div").length;i++){
var divd = $("div")[i];
$(divd).css("color","green");
}
// 3. each jQuery中提供的遍历方式
$("div").each(function (i,n) {// i 索引,下标 div数组的下标
// n 代表每一个div标签
if(i==2){
$(n).css("color","yellow");
}
})
});
</script>
</body>
5.案例演示：省市联动
<body>
<!--两个标签 代表省份 城市-->
<select name="provice" id="provice" >
<option value="-1">-----请选择省份-----</option>
</select>
<select name="city" id="city" >
<option value="-1">-----请选择城市-----</option>
</select>
<script type="text/javascript">
$(function () {
var arr = new Array();
arr['河北省'] = ["石家庄","沧州","保定","邯郸","邢台","张家口","唐山"];
arr['天津市'] = ["西青区","北辰","南开","河东","河西","河北","和平","津南"];
arr['北京市'] = ["朝阳","海淀","丰台","昌平","房山","密云","东城","西城"];
// 1. 遍历arr 先给provice 省份赋值
for (var k in arr){
$("#provice").append("<option value='"+k+"'>"+k+"</option>");
}
// 监听省份下拉框的数据变化
$("#provice").change(function () {
// 清除城市select中内容
$("#city").empty().append("<option value='-1'>-----请选择城市-----</option>");
// 1.先获取省份中选中的值
var v = $("#provice").val();
// 北京市 河北省 天津市
// 根据选中的省份得到对应的城市的一维数组
var cityarry = arr[v];
for(var c in cityarry){
$("#city").append("<option value='"+cityarry[c]+"'>"+cityarry[c]+"</option>");
}
});
});
</script>
</body>
6.节点之间的关系
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
jQuery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素。
<body>
<div> this is a div</div>
<div id="div1">
<p>
<span id="span1">this is first span</span>
</p>
<p>
<span id="span2">this is second span</span>
</p>
</div>
<h1>一级标题</h1>
<h2>二级标题</h2>
<script type="text/javascript">
$(function () {
// parent(); 直接父标签
var v = $("#span1").parent();
$(v).css("bgColor","red");
//parents() 获取当前标签的所有父标签
alert("span1的父标签"+$("#span1").parents().length);
// 获取直接子标签
alert("div1的子标签"+$("#div1").children().length);
alert("div1的后代span标签"+$("#div1").find("span").length);
alert("div1的所有后代标签"+$("#div1").find("*").length);
alert("div1的兄弟标签"+$("#div1").siblings().length);
var d = $("#div1").siblings();
$(d).each(function (i,n) {
alert(i+" "+n);
});
});
</script>
</body>
扫一扫
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
