jQuery学习笔记之二
2017-11-01 15:06
369 查看
dom操作
查询 dom
利用选择器找到要操作的节点之后，获得节点的值、属性值、文本以及html内容- a html():html内容
- b text() :文本
- c val()：节点的值
- d attr():属性值
此外这几个方法也可以用来修改节点的内容，值，文本内容和属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type = "text/javascript">
function f1(){
//innerHTML
//alert($('#d1').html());
//文本输出 innerText
//alert($('#d1').text());
//alert($('#username:eq(0)').val());
alert($('#d1').attr('id'));
}
function f2(){
//$('#d1').html('hello java');
//$('#username').val('jetty');
$('#d1').attr('style','color:red;font-size:60px;');
}
</script>
</head>
<body style = "font-size:30px;">
<div id ="d1"><span>hello jquery</span></div>
username:<input name = "username" id = "username"/><br/>
<input type = "button" value = "点击" onclick = "f2();"/>
</body>
</html>创建 d2.html
插入节点 d2.html
append():最后一个孩子追加prepend();第一个孩纸追加
after();下一个兄弟 ul下
before();前一个兄弟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type = "text/javascript">
function f1(){
var $obj = $('<div>岳飞是一个民族英雄</div>');
//$('body').append($obj);
//$('body').prepend($obj);
//也可以简化
$('body').append('<div>岳飞是一个民族英雄</div>');
}
function f2(){
//$('ul').after('<div>hello</div>');
$('ul').before('<div>hello</div>');
}
</script>
</head>
<body style = "font-size:30px;">
<a href = "javascript:;" onclick = "f2();">岳飞是谁？</a>
<br/>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</body>
</html>删除节点 d3.html
remove()remove(selector)
empty():清空节点 innerHTML = ”“
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type = "text/javascript">
function f1(){
//$('ul li:eq(1)').remove();
//$('ul li:eq(1)').empty();
$('ul li').remove('#l2');
}
</script>
</head>
<body style = "font-size:30px;">
<ul>
<
1226e
li>item1</li>
<li id = 'l2'>item2</li>
<li>item3</li>
</ul>
<input type = "button" value = "点击" onclick = "f1();"/>
</body>
</html>如何将js代码与html分开 d4.html
使用如下的结构：$(function(){
//这里的js代码会在加载完成之后执行。
});数据与样式分离
数据与形式分离
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script> <script type = "text/javascript" src = "../js/d4.js"></script> </head> <body style = "font-size:30px;"> <div id = "d1">hello jquery</div> </body> </html>
js代码：
window.onload = function(){
var obj = document.getElementById('d1');
obj.onclick = function(){
this.innerHTML = 'hello java';
};
};<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script> <script type = "text/javascript" src = "../js/d6.js"></script> </head> <body style = "font-size:30px;"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> <input type="button" value = "点击" id ="b1" /> </body> </html>
js代码：
//相当于window.onload = function(){};
$(function(){
//页面加载完毕会执行这的代码
$('#d1').click(function(){
//相当于
//var obj = document.getElementById('d1');
//obj.onclick = function(){
//this.innerHTML = 'hello java';
//};
//this代表绑定了该事件的dom对象
//this.innerHTML = 'hello java';
$(this).html('hello java');
});
});复制节点 d6.html
clone()clone(true):使复制的节点也具有行为(将事件处理代 码一块复制)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script> <script type = "text/javascript" src = "../js/d6.js"></script> </head> <body style = "font-size:30px;"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> <input type="button" value = "点击" id ="b1" /> </body> </html>
js代码：
$(function(){
$('ul li:eq(2)').click(function(){
$(this).css('font-size','60px');
});
$('#b1').click(function(){
var $obj = $('ul li:eq(2)').clone(true);
$('ul').append($obj);
});
});属性操作
-读取：attr(”);-设置：attr(”,”);
-设置多个：attr(”,”,”);
-删除：removeAttr(”);
-样式操作：d7.html
-获取和设置：attr(“class”,”“) attr(“style”,”“)
-追加：addClass(”)
-移除：removeClass(”)或者removeClass(‘s1 s2’)或者removeClass()//删除所有样式
-切换样式：toggleClass,有该样式，就删除，没有，就添加
-是否有某个样式hasClass(”)
-读取css(”)
-css({”:”,”:”})设置多个格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type = "text/javascript" src = "../js/d7.js"></script>
<style>
.s1{
font-size:60px;
}
.s2{
color:red;
}
.s3{
font-style: italic;
}
</style>
</head>
<body style = "font-size:30px;">
<div id = "d1" class = "s3">hello jquery</div>
<input type="button" value = "点击" id ="b1"/>
</body>
</html>js代码：
$(function(){
$('#b1').click(function(){
//$('#d1').attr('class','s1');
//$('#d1').attr('style','color:red;');
//$('#d1').removeClass('s1');
//$('#d1').removeClass();
//有就删除，没有添加
//$('#d1').toggleClass('s3');
alert($('#d1').hasClass('s2'));
});
});遍历节点 d8.html
children()/children(selector);只考虑子元素，不考虑其他后代元素next()/next(selector):下一个兄弟
prev()/prev(selector):上一个兄弟
siblings()/siblings(selector);其他兄弟
find(selector);从某一个节点开始查找所有满足选择 条件的后代
parent();父节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script>
$(function(){
$('#b1').click(function(){
//length属性，获得jquery对象包含的dom对象个数
//var $obj = $('#d1').children('div');//子元素满足选择器要求 p不满足
//alert($obj.length);
//$('#d3').next('div').css('font-size','60px');
//$('#d3').siblings('p').css('font-size','60px');
//$('#d1').find('div').css('font-size','60px');
alert($('#d2').parent().attr('id'));
});
});
</script>
</head>
<body style = "font-size:30px;">
<div id ="d1">
<div id = "d2">hello 1</div>
<div id = "d3">hello 2</div>
<div id = "d4">hello 3</div>
<p>hello 4</p>
</div>
<input type="button" value = "点击" id ="b1"/>
</body>
</html>测试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function(){
$('tbody tr:even:not(#b0)').attr('class','s2');
$('tbody tr:odd').attr('class','s3');
$('tbody tr:not(#b0)').click(function(){
$(this).toggleClass('s4');
});
});
</script>
<style>
.s1{
background-color: gray;
}
.s2{
background-color: purple;
}
.s3{
background-color: orange;
}
.s4{
background-color: white;
}
</style>
</head>
<body style = "font-size: 30px;">
<table id = "t1" border ="1" width = "60%" cellpadding ="0" cellspacing="0">
<thread>
<tr id = "b0" class = "s1"><td></td><td>姓名</td><td>薪水</td><td>年龄</td></tr>
</thread>
<tbody>
<tr><td id ="b1"><input type = "checkbox" checked = "checked"></td><td>张三</td><td>20000</td><td>23</td></tr>
<tr><td id ="b2"><input type = "checkbox"></td><td>李四</td><td>22000</td><td>22</td></tr>
<tr><td id ="b3"><input type = "checkbox" checked = "checked"></td><td>王五</td><td>14000</td><td>26</td></tr>
<tr><td id ="b4"><input type = "checkbox"></td><td>马六</td><td>15000</td><td>21</td></tr>
</tbody>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery 学习笔记 选择器之二
- JQuery学习笔记2：选择器之二
- [JQuery学习笔记]——之二
- JavaScript 学习笔记之二：编写自己的jQuery扩展分页插件(分享yQuery)
- jQuery学习笔记之二——常规选择器
- jQuery 学习笔记之二 (jQuery代码风格)
- jQuery 学习笔记 之二 附： jQuery入门指南教程列表
- jquery-mobile 学习笔记之二（表单创建）
- jQuery学习笔记之二：显示效果
- jquery-mobile 学习笔记之二（表单创建）
- JQuery 学习笔记 选择器之二
- jquery学习笔记 之二 事件与效果
- jQuery学习笔记之二
- jQuery学习笔记1
- 【JAVAWEB学习笔记】06_jQuery基础
- 学习jquery的一些笔记
- jQuery学习笔记之解决jQuery和其他库的冲突
- jquery 深入学习笔记之一 （事件绑定）
- jQuery 学习笔记之九 (jQuery 图片提示 )
- jQuery学习笔记--丰富多彩的Pager Bar (底部 分页工具条) .