文章目录
jQuery的DOM操作
1、补充内容
$(selector).action();//dom选择器
$.action();//工具方法
2、选择器——找到节点
1）id选择器
2）元素选择器
3）类选择器
<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
<button id="btnLogin">登录</button>
</div>
</body>
<script src="../../plugin/jquery.js"></script>
<script>
//原生JavaScript获取dom节点的方式
//（document是指当前网页）
var btnLogin = document.getElementById('btnLogin');
var btnLogin2 = document.getElementsByTagName('button')[0];//数组
var container = document.getElementsByClassName('container')[0];//数组
//jQuery获取dom节点的方式
//使用CSS选择器:可以使用任何css选择器
var btnLoginForJquery = $('#btnLogin');
var btnLoginForJquery2 = $('button');//数组
var containerForJquery = $('.container');//数组
var btnLoginForJquery3 = $('.container btn');
</script>
</html>
3、DOM修改
1）text()，html()
2）属性value()
| JavaScript | jQuery |
|---|---|
| innerHTML | html() |
| innerText | text() |
| value | val() |
<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
<input id="username"/>
<select id="sltSchool">
<option value="天津大学">天津大学</option>
<option value="北京大学">北京大学</option>
</select>
</div>
</body>
<script src="../../plugin/jquery.js"></script>
<script>
/*innerText:在获取和设置innerText是在做属性操作
innerHTML：在获取和设置innerHTML是在做属性操作
value:在获取和设置value是在做属性操作
*/
var container = document.getElementsByClassName('container')[0];
container.innerText = 'hello';
var innerTextFromContainer = container.innerText;
container.innerHTML = 'hello';
var innerHTMLFromContainer = container.innerHTML;
var inpUser = document.getElementById('username');
inpUser.value = 'admin';
var username = inpUser.value;
/**
* jquery取值和设置的方式都是方法
* $(selector).action();
*/
var containerForJquery = $('.container');
containerForJquery.text('hello world');
var contentForJquery = containerForJquery.text();
var containerForJquery2 = $('.container');
containerForJquery2.html('<h2>hello world</h2>');
var contentForJquery2 = containerForJquery2.html();
var inpUserForJquery = $('#username');
inpUserForJquery.val('admin');
alert(inpUserForJquery.val());
var sltSchool = $('#sltSchool');
alert(sltSchool.val());//jquery获取select的value是select选中的option的value
</script>
</html>
3）css样式
| JavaScript | jQuery |
|---|---|
| 节点.style.属性 | 节点.css() |
| 节点.classList.add() | 节点.addClass() |
<!DOCTYPE html>
<html lang="en">
<style>
div{
height:100px;
width: 100px;
border: 1px solid black;
}
.box{
font-size:100px;
}
</style>
<body>
<div id="testBox">hello world</div>
</body>
<script src="../../plugin/jquery.js"></script>
<script>
/**
* 原生js修饰样式（css）
* **/
var box = document.getElementById('box');
box.style.color='red';
box.classList.add('box');
/**
* jquery修饰样式（css）
* **/
var boxForJquery = $('#testBox')
boxForJquery.css('background-color','red');
var colorJ=boxForJquery.css('background-color');
alert(colorJ);
boxForJquery.addClass('box');
//boxForJquery.removeClass('box');
</script>
</html>
4）属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性操作</title>
</head>
<body>
<a href="dom.html">百度</a>
</body>
<script src="../../plugin/jquery.js"></script>
<script>
/**
*原生js修改属性
*/
var achor = document.getElementsByTagName('a')[0];
var address = achor.href;
alert(address);
achor.href = '#';
/**
* jquery修改属性
*/
var achorForJquery = $('a');
var addressForJquery = $('a').attr('href');
alert(addressForJquery);
achorForJquery.attr('href','test.html');
</script>
</html>
5）事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery事件</title>
</head>
<body>
<button id="btnLogin">
登录
</button>
</body>
<script src="../plugin/jquery.js"></script>
<script>
/**
* 事件：事件名称+处理函数+事件绑定
*
* 系统事件:如onload
* 鼠标事件：如click（mouse)
* 键盘事件：如keyup
*/
/**
*原生js的事件
*/
var btnLogin = document.getElementById('btnLogin');
btnLogin.onclick = function () {
alert('你点击了按钮');
}
/**
* 事件监听器
*/
btnLogin.addEventListener('click',function () {
alert('你点击了按钮');
})
/**
* jquery的事件
*/
var btnLoginForJquery = $('#btnLogin');
btnLoginForJquery.click(function () {
alert('你点击了按钮');
})
btnLoginForJquery.bind('click',btnLoginClick)
function btnLoginClick() {
alert('你点击了按钮');
}
</script>
</html>
4、DOM结构的改变
| JavaScript | jQuery | |
|---|---|---|
| 添加节点 | 父节点.appendChild(子节点) | 父节点.append(子节点) |
| 移除节点 | 父节点.removeChild(子节点) | 子节点.remove() |
| 在某个节点前添加节点 | 父节点.insertBefore(新节点，参照节点） | 参照节点.before(子节点） |
| 在某个节点后添加节点 | 无 | 参照节点.after(子节点） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM节点结构的改变</title>
</head>
<body>
<h1 class="box">box</h1>
</body>
<script src="../../plugin/jquery.js"></script>
<script>
/**
* 1.找到父节点
* 2、找到子节点
* 3、在父节点中，操作子节点
* */
var box = $('.box');
var newBox = $('<div></div>').text('hello').css('color','red');
//1.添加节点
box.append(newBox);
//2.移除节点
newBox.remove();
//3、在某个节点前添加节点
var beforeBox = $('<div></div>').text('before');
box.before(beforeBox);
//4、在某个节点后添加节点
var afterBox = $('<div></div>').text('after');
box.after(afterBox);
</script>
</html>
5、应用举例：jQuery版二级联动
1）第一步：添加一个option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级联动</title>
</head>
<body>
学校 <select id="sltSchool"></select>
</body>
<script src="../../../js/plugin/jquery.js"></script>
<script src="../../../js/jquery/select.js"></script>
</html>
$(document).ready(function () {
var select = $('#sltSchool');
var opt = $('<option></option>').val(1).text('天津大学');
select.append(opt)
})
2）第二步：静态加入一组option
$(document).ready(function () {
var select = $('#sltSchool');
for (var i=0;i<3;i++)
{
var opt = $('<option></option>').val(1).text('天津大学');
select.append(opt)
}
})
3）第三步：动态加入一组option
mock（模拟数据）：
var schools =[
{schoolid:1,schoolname:'天津大学'},
{schoolid:1,schoolname:'南开大学'},
{schoolid:1,schoolname:'北京大学'}
]
$(document).ready(function () {
var select = $('#sltSchool');
for (var i=0;i<schools.length;i++)
{
var school = schools[i];
var opt = $('<option></option>')
.val(school.schoolid)
.text(school.schoolname)
// var opt = $('<option> </option>').val(schools[i].schoolid).text(schools[i].schoolname);
select.append(opt)
}
})
利用each()函数进行简化：
$(document).ready(function () {
/**
* 工具:each()函数
* 作用：遍历数组
* 参数列表：
* 1. 数组
* 2. 回调函数（callback）
* **/
$.each(schools,function(index,item){
var opt = $('<option></option>')
.val(item.schoolid)
.text(item.schoolname);
$('#sltSchool').append(opt);
})
}
将这段代码继续优化重构：
$(document).ready(function () {
/**
* ready 是当前程序的主入口
* 使用描述性的编程语言
* 维护代价低
* 1. 描述性的结构稳定（静态）
* 2. 只修改方法中算法细节（变化）
* **/
initSelect();
})
function initSelect() {
/**
* 工具:each函数
* 作用：遍历数组
* 参数列表：
* 1. 数组
* 2. 回调函数（callback）
* **/
$.each(schools,function(index,item){
var opt = $('<option></option>')
.val(item.schoolid)
.text(item.schoolname);
$('#sltSchool').append(opt);
})
}
按照这个思路，我们来写一个二级联动的完整版：
4）jQuery版二级联动完整版
$(document).ready(function () {
initSelect();
})
var cities = [
{cityid:0,cityname:'全部'},
{cityid:1,cityname:'天津'},
{cityid:2,cityname:'北京'}
]
var schools = [
{schoolid:0,schoolname:'全部',cityid:0},
{schoolid:1,schoolname:'天津大学',cityid:1},
{schoolid:2,schoolname:'南开大学',cityid:1},
{schoolid:3,schoolname:'北京大学',cityid:2}
]
function initSelect(){
var selector = $('#sltArea');
var arr = cities;
var option = {var:'cityid',text:'cityname'};
var select = $('#sltSchool');
setOptionForSelect(selector,arr,option);
select.html(sltSchoolOnChange());
selector.bind('change',function () {
sltSchoolOnChange();
})
}
function sltSchoolOnChange() {
var area = $('#sltArea');
var select = $('#sltSchool');
var selected = area.val();
var newSchool = schools.filter(function (item) {
return item.cityid == selected;
})
select.html('');
var data = newSchool;
var opt = {var:'schoolid',text:'schoolname'};
setOptionForSelect(select,data,opt);
}
function setOptionForSelect(select,arr,opt){
for(var i = 0;i < arr.length;i++){
var option = $('<option></option>').val(arr[i][opt.var]).html(arr[i][opt.text]);
select.append(option);
}
}
<head>
<meta charset="UTF-8">
<title>二级联动</title>
</head>
<body>
大学
<select id="sltArea">
</select>
<select id="sltSchool">
</select>
</body>
