jQuery学习笔记之二
dom操作
查询 dom
利用选择器找到要操作的节点之后，获得节点的值、属性值、文本以及html内容
- a html():html内容
- b text() :文本
- c val()：节点的值
- d attr():属性值
此外这几个方法也可以用来修改节点的内容，值，文本内容和属性值
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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 jqueryspan>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();前一个兄弟
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<script type = "text/javascript" src = "../js/jquery-1.7.min.js">script>
<script type = "text/javascript">
function f1(){
var $obj = $('岳飞是一个民族英雄');
//$('body').append($obj);
//$('body').prepend($obj);
//也可以简化
$('body').append('岳飞是一个民族英雄');
}
function f2(){
//$('ul').after('hello');
$('ul').before('hello');
}
script>
head>
<body style = "font-size:30px;">
<a href = "javascript:;" onclick = "f2();">岳飞是谁？a>
<br/>
<ul>
<li>item1li>
<li>item2li>
<li>item3li>
ul>
body>
html>删除节点 d3.html
- remove()
- remove(selector)
- empty():清空节点 innerHTML = ”“
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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>
<li>item1li>
<li id = 'l2'>item2li>
<li>item3li>
ul>
<input type = "button" value = "点击" onclick = "f1();"/>
body>
html>如何将js代码与html分开 d4.html
使用如下的结构：
$(function(){
//这里的js代码会在加载完成之后执行。
});数据与样式分离
数据与形式分离
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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 jquerydiv>
body>
html>js代码：
window.onload = function(){
var obj = document.getElementById('d1');
obj.onclick = function(){
this.innerHTML = 'hello java';
};
};
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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>item1li>
<li>item2li>
<li>item3li>
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):使复制的节点也具有行为(将事件处理代 码一块复制)
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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>item1li>
<li>item2li>
<li>item3li>
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({”:”,”:”})设置多个格式
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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 jquerydiv>
<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();父节点
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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 1div>
<div id = "d3">hello 2div>
<div id = "d4">hello 3div>
<p>hello 4p>
div>
<input type="button" value = "点击" id ="b1"/>
body>
html>测试
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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>20000td><td>23td>tr>
<tr><td id ="b2"><input type = "checkbox">td><td>李四td><td>22000td><td>22td>tr>
<tr><td id ="b3"><input type = "checkbox" checked = "checked">td><td>王五td><td>14000td><td>26td>tr>
<tr><td id ="b4"><input type = "checkbox">td><td>马六td><td>15000td><td>21td>tr>
tbody>
table>
body>
html>