JQuery基础用法
一、DOM操作（增删改查）
1、新增节点
$(selector).append(content) //在匹配元素内部最后面新增一个节点
$(content).appendTo(selector) //把新节点追加到匹配元素内部最后面
$(selector).prepend(content) //在匹配元素内部最前面新增一个节点
$(content).prependTo(selector) //把新节点追加到匹配元素内部最前面
$(selector).after(content) //在匹配元素同级之后新增一个节点
$(content).insertAfter(selector) //把新节点追加到匹配元素同级之后
$(selector).before(content) //在匹配元素同级之前新增一个节点
$(content).insertBefore(selector) //把新节点追加到匹配元素同级之前
案例
<body>
<input type="button" value="btn">
<ol class="list">
<li>吃饭</li>
<li>睡觉</li>
</ol>
</body>
<script src="../lib/jquery-1.8.3.js"></script>
<script>
$(function () {
//按钮单击事件
$("input").click(function () {
//新增li标签
var newLi = "<li>打地鼠</li>";
//将新增的li拼接到类名list列表
// $(".list").append(newLi);
$(newLi).appendTo(".list");
});
// 元素内部第一个元素
$("input").click(function () {
var newLi = "<li>敲代码</li>";
// $(".list").prepend(newLi);
$(newLi).prependTo(".list");
});
// 同级之后新增一个节点
$("input").click(function () {
var newLi = "<li>asd</li>";
$(newLi).insertAfter(".list");
});
// 同级之后新增一个节点
$("input").click(function () {
var newLi = "<li>qwe</li>";
$(newLi).insertBefore(".list");
});
});
</script>
2.删除节点
remove() //删除节点，全部删除
empty() //清空节点,只清空内部内容保留外面的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<ul class="list">
<li>
商品信息1
<a href="#">删除</a>
</li>
<li>
商品信息2
<a href="#">删除</a>
</li>
<li>
商品信息3
<a href="#">删除</a>
</li>
</ul>
</body>
<script src="../lib/jquery-1.8.3.js"></script>
<script>
$(function () {
//点击a标签, 删除元素
//获取a标签 绑定事件
$("a").click(function () {
//1 将所有的 a 标签删除
// $("a").remove();
//2 删除当前被点击的a标签
// $(this).remove();
//3 删除被点击a标签的父标签
// $(this).parent().remove();
//4 empty 清空
$(this).parent().empty();
});
});
</script>
<style>
.list{
width: 400px;
margin: 50px auto;
}
.list li{
list-style: none;
height: 50px;
line-height: 50px;
border-bottom: 1px dashed #ccc;
}
.list a{
float: right;
}
</style>
</html>
3 替换节点
$(selector).replaceWith(content) //把旧的替换掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换节点</title>
</head>
<body>
<button>替换节点</button>
<div id="box">这是一个div节点.</div>
</body>
<script src="../lib/jquery-1.8.3.js"></script>
<script>
$(function () {
//点击按钮, 将div标签替换为h1标签
//为按钮绑定事件
$("button").click(function () {
//准备替换的内容
var h = "<h1>我是h1标签</h1>";
//替换
$("#box").replaceWith(h);
});
});
</script>
</html>
二、jQuery遍历函数
jquery对象的遍历方法
此方式是jquery特有的遍历方式，使用jquery集合对象调用each方法即可遍历。
Jq对象.each（function（index，element）{
alert（index）; //打印索引
alert（element）; //打印集合对象中的每一个元素
})
$(element).css('color','red');在使用的时候必须加选择器环境$()
// 经验：一般我们很少去用element这个参数，this在这里等同于element
遍历元素 修改颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery遍历</title>
<script src="../lib/jquery-1.8.3.js"></script>
<script>
$(function () {
//遍历 jquery对象.each(function(index, element) {});
$("li").each(function (index, element) {
console.log(index + " = " + element + " = " + $(element).html())
//遍历元素 颜色设为blue
//注意:element是JS对象,如需调用jquery方法,需将JS对象包装为jquery对象
$(element).css("color", "blue");
});
});
</script>
</head>
<body>
<ul class="list">
<li style="color: red;">11</li>
<li style="color: red;">22</li>
<li style="color: red;">33</li>
<li style="color: red;">44</li>
</ul>
</body>
</html>
案例-省市联动
方式一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
</head>
<body>
<select id="province">
<option value="none">--请选择省--</option>
<option value="0">北京市</option>
<option value="1">上海市</option>
<option value="2">广州市</option>
</select>
<select id="city">
<option value="none">--请选择市--</option>
</select>
</body>
<script src="../lib/jquery-1.8.3.js"></script>
<script>
$(function () {
//区县数组
var cities = [
["朝阳区", "海淀区", "丰台区", "昌平区", "西城区", "东城区", "通州区", "大兴区"],
["浦东新区", "闵行区", "静安区", "徐汇区", "杨浦区", "嘉定区", "黄埔区"],
["白云区", "天河区", "花都区", "番禺区"]
];
//`province` 绑定+--+更改事件
$("#province").change(function () {
// 清空:jquery
// $("#city").html("<option value=\"none\">--请选择市--</option>");
// 清空:js
// document.getElementById("city").innerHTML = "<option value=\"none\">--请选择市--</option>";
// 清空:options数组(是JS数组)
// document.getElementById("city").options.length = 1;
// 清空:通过 get 方法将 jquery 转换为 js 对象.
// $("#city").get(0).options.length = 1;
// 重选省份后，市区选中第一个
$("#city")[0].options.length = 1;
//获取选中省份的索引值
var index = $("#province").val();
//根据index,从cities数组中取出对应的一维数组.实现遍历
$(cities[index]).each(function (index, element) {
// console.log(index + " = " + element); element 就是我们需要的字符串
//创建option
var option = "<option value=\"none\">"+element+"</option>";
//将option添加到city标签中
$("#city").append(option);
});
});
});
</script>
</html>
方式二：JSON、[]为数组、{}为对象
- json数据 jsons.js
var china = [
{
"p_name": "吉林省",
"p_id": "jl",
"cities": [
{
"c_name": "长春",
"c_id": "cc"
},
{
"c_name": "四平",
"c_id": "sp"
},
{
"c_name": "通化",
"c_id": "th"
},
{
"c_name": "松原",
"c_id": "sy"
}
]
},
{
"p_name": "辽宁省",
"p_id": "ln",
"cities": [
{
"c_name": "沈阳",
"c_id": "sy"
},
{
"c_name": "大连",
"c_id": "dl"
},
{
"c_name": "抚顺",
"c_id": "fs"
},
{
"c_name": "铁岭",
"c_id": "tl"
}
]
},
{
"p_name": "山东省",
"p_id": "sd",
"cities": [
{
"c_name": "济南",
"c_id": "jn"
},
{
"c_name": "青岛",
"c_id": "qd"
},
{
"c_name": "威海",
"c_id": "wh"
},
{
"c_name": "烟台",
"c_id": "yt"
}
]
},
{
"p_name": "上海市",
"p_id": "sh",
"cities": [
{
"c_name": "闵行区",
"c_id": "mh"
},
{
"c_name": "徐汇区",
"c_id": "xh"
},
{
"c_name": "黄浦区",
"c_id": "hp"
},
{
"c_name": "浦东新区",
"c_id": "pd"
}
]
}
];
- html代码
<body>
<select id="province">
<option value="none">--请选择省--</option>
</select>
<select id="city">
<option value="none">--请选择市--</option>
</select>
</body>
- js代码
<script src="../lib/jquery-1.8.3.js"></script>
<!--导入 city.js 文件-->
<script src="../lib/city.js"></script>
<script>
$(function () {
//jquery可以实现json文件遍历
//遍历js文件中的china变量
$(china).each(function (index, element) {
//根据当前遍历的 element 对象, 设置 option 标签的值
var province = "<option value='"+element.p_id+"'>"+element.p_name+"</option>";
//将新建的标签拼接到 province 标签内容
$("#province").append(province);
});
//给 `province` 绑定事件
$("#province").change(function () {
//注意:省份发生变化时,清空城市
$("#city").html("<option value=\"none\">--请选择市--</option>");
//获取当前选中省份的value值
var p_id = $("#province").val();
//遍历 china 数据, 查找与选中省份 p_id 相同的 element 标签对象
$(china).each(function (index, element) {
if (p_id == element.p_id) {
//需要遍历当前element对象的cities 数组
$(element.cities).each(function (index, element) {
//element对象的中c_id 和c_name 数据,并完成option对象的字符串书写
var city = "<option value='"+element.c_id+"'>"+element.c_name+"</option>";
//将新建的city标签, 拼接到city标签内部
$("#city").append(city);
});
}
});
});
});
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
