jQuery 设计思想是将原始的 dom 对象封装成一个 jQuery 对象,通过调用 jQuery 对象的方
法来实现对原始的 dom 对象的操作。这样设计的目的是:是为了更好地兼容不同的浏览器,
简化代码
jQuery编程步骤:
1、<script type="text/javascript" src="js/jquery-1.4.3.js">
2、使用jQuery提供的选择器找到节点,一般情况下, jQuery会将找到的节点封装成jQuery对象
3、调用 jQuery 对象提供的方法
jQuery 对象与 dom 对象之间的转换
a. dom 对象转换成 jQuery 对象:使用 var $obj = $(dom 对象);
b. jQuery 对象转换成 dom 对象:使用 var obj = $obj.get(0)或者 var obj = $obj.get()[0]
jQuery 选择器
jQuery 选择器模仿 css 选择器的语法,其作用是,查找符合选择器要求的节点。
a. 基本选择器
#id
.class
element
selector1,select2..selectn
*
b. 层次选择器
select1 select2
select1>select2
select1+select2
select1~select2
c. 过滤选择器
1) 基本过滤选择器
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
2) 内容过滤选择器
:contains(text)
:empty
:has(selector)
:parent
3) 可见性过滤选择器
:hidden
:visible
4) 属性过滤选择器
[attribute]
[attribute=value]
[attribute!=value]
5) 子元素过滤选择器
:nth-child(index/even/odd)
6) 表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
d. 表单选择器
:input
:text
:pasword
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
e. select 选择器
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script>
function f2(){
//将原始的dom对象封装成一个jQuery对象
var obj = $('#a1');
//因为不再是原始的dom对象,所以不能使用dom对象提供的属性或方法了。
要使用jQuery对象提供的方法戒者属性。
alert(obj.html());
}
//演示:利用jQuery改变样式
function f4(){
$('#d1').css('font-size','60px').css('font-style','italic');
}
//演示:dom 对象和 JQuery 对象的相互转换
//dom对象转换成jQuery对象
function f1(){
var obj = document.getElementById('a1');
var $obj = $(obj);
alert($obj.html());
}
//jQuery对象转换成dom对象
function f2(){
var $obj = $('#a1');
var obj = $obj.get(0);或var obj = $obj.get()[0];
alert(obj.innerHTML);
}
//演示:select 选择器
//将找到节点的字体变大
function f1(){
$('.s1').css('font-size','40px');--- .class选择器s1对象
$('p.s1').css('font-size','40px');---元素选择器p+ .class选择器s1对象
$('div').css('font-size','40px');--- 元素选择器div对象
$('#d1,p.s1').css('font-size','40px');---id选择器d1对象和元素选择器p+ .class选择器s1对象
$(' * ').css('font-size','40px');---所有
}
</script>
</head>
<body style="font-size:30px;">
<a id="a1" href="javascript:;" onclick="f2();">hello jquery</a>
<div id="d1">jquery 是什么?</div>
<div id="d1">hello1</div>
<div class="s1">hello2</div>
<div class="s1">hello3</div>
<p class="s1">hello4</p>
<input type="button" value="基本选择器的使用" onclick="f1();"/>
</body>
</html>
jQuery dom 操作
1) 查询
利用选择器查找到节点:
text() 输出或设置节点之间的文本,text 方法相当于 dom 节点的 innerText 属性
html()输出或设置节点之间的 html 内容,html 方法相当于 dom 节点的 innerHTML 属性。
attr()输出或设置节点的属性值。
val()下拉列表,可以使用 val()获得值
2) 创建
$(html);
3) 插入节点
append()向每个匹配的元素内部追加内容
prepend() 向每个匹配的元素内部前置内容
after() 在每个匹配的元素之后插入内容
before()在每个匹配的元素之前插入内容
4) 删除节点
remove()
remove(selector)
empty() 清空节点
5) 复制节点
clone() 复制(不复制行为)
clone(true): 使复制的节点也具有行为
6) 属性操作
attr(''); 读取属性
设置:attr('','')
戒者一次设置多个 attr({"":"","":""});
删除:removeAttr('')
7) 样式操作
attr("class","") 获取和设置
addClass('') 追加
removeClass('') 移除 或 removeClass('s1 s2') 或 removeClass() 会删除所有样式
toggleClass() 切换样式:
hasClass('') 是否有某个样式
css('') 读取设置 css('','')戒者 css({'':'','':''})//设置多个样式
8) 遍历节点
children() 只考虑子元素,丌考虑其它后代元素。
next()
prev()
siblings(): 兄弟节点
find(selector)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<style>
.s1{
color:red;
}
.s2{
font-style:italic;
}
</style>
<script>
演示:打印,设置属性/属性值
function f2(){
alert($('#d1').html());---html()输出标记中所有内容
alert($('#d1').text());---text()输出标记中的文本内容
alert($('#d1').html('hello,tom'));---用 html()改变页面内容
alert($('#d1').attr('id'));---attr()输出节点的属性值,本例值为d1
$('#d1').attr('style' , 'font-size:40px;color:red;'); ---attr()设置节点的属性值
$('#d1').attr({'style':'font-size:60px;','class':'s1'}); ---attr()设置节点的属性值
alert($(':text').val());---使用 val()获得表单文本框的值
$(':text').val('马云');---val()设置值
alert($('#s1').val());---使用 val()获得下拉列表被选项的值
}
演示:增加节点
function f2(){
var $obj = $('<li>item4</li>');
$('#u1').append($obj);---标准形式
简化形式:
$('#u1').append('<li>item4</li>');---向元素u1内部追加元素
$('#u1').prepend('<li>item4</li>');---向元素u1内部前置元素
$('#u1').after('<div>hello jquery</div>');---向元素u1外部追加元素
$('#u1').before('<div>hello jquery</div>');---向元素u1外部前置元素
$('#u1 li').remove('#i2');---删除节点
$('#u1 li :eq(1)').remove();---删除节点(#u1 li:层次选择器,:eq(1):过滤选择器)
$('#u1 li :eq(1)').empty();---empty()清空节点中的内容
演示:初始化自动加载函数:当整个html文件解析完毕生成dom树之后执行内部的代码
$(function(){
$('#u1 li:eq(2)').click(function(){ alert('doaction...'); }); ---绑定click事件
$('#b1').click(function(){
var $obj = $('#u1 li:eq(2)').clone(true);---clone()复制节点不复制行为;clone(true):复制节点和行为
$('#u1').append($obj);
});
});
演示:样式操作
$(function(){
$('#b1').click(function(){
$('#d1').attr('class','s1');---添加样式
$('#d1').addClass('s2');---添加样式
$('#d1').removeClass('s1');---删除样式
$('#d1').toggleClass('s1');
alert($('#d1').hasClass('s1'));---判断是否有指定样式
$('#d1').css({'font-style':'italic','font-size':'60px'});---设置样式
});
});
演示:遍历节点
$(function(){
$('#b1').click(function(){
$('#d1').children().css('color','red');---所有子节点
$('#d1').next().css('color','red');---下一个节点
$('#d1').siblings().css('color','red');---下一个节点
});
}
}
</script>
</head>
<body style="font-size:30px;">
<a id="a1" href="javascript:;" onclick="f2();">hello jquery</a>
<div id="d1">jquery 是什么?</div>
<input type="text" name="username" onclick="f1();"/>
<select id="s1">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<ul id="u1">
<li>item1</li>
<li id='i2'>item2</li>
<li>item3</li>
</ul>
<input id="b1" type="button" value="Click"/>
</body>
</html>
事件处理
1) 事件绑订
bind(type,fn)
2) 绑订方式的简写形式
click(function(){
});
3) 合成事件
hover(enter,leave) : 模拟光标悬停事件
toggle(fn1,fn2...):模拟鼠标连续单击事件
4) 事件冒泡
获得事件对象
//e 不再是原始的事件对象,而是 jQuery封装之后的事件对象。
click(function(e){
});
停止冒泡
event.stopPropagation()
停止默认行为
event.preventDefault()
5) 事件对象的属性
event.type:获得事件类型
event.target:获得事件源,返回的是原始的 dom 节点
<style>
ul{ list-style-type:none;}
ul li{
float:left;
width:150px;
height:40px;
background-color:#ff88ee;
margin-left:10px;
border:1px solid black;
text-align:center;
}
.selected{ background-color:yellow; }
</style>
<script type="text/javascript">
演示:事件绑订
$(function(){
正式写法
$('#b1').bind('click',function(){
$('#d1').css('font-size','60px');
});
简化为
$('#b1').click(function(){
$('#d1').css('font-size','60px');
});
});
演示:合成事件
$(function(){
$('#d1').hover(---hover(enter,leave) : 模拟光标悬停事件
//当光标进入时执行 this代表当前绑订事件的那个dom节点
function(){ $(this).css('background-color','#ff88ee'); },
//当光标移出时执行
function(){ $(this).css('background-color','#fff8dc');}
);
$('#a1').toggle(---toggle(fn1,fn2...):模拟鼠标连续单击事件
function(){
$(this).after("<div id='tips'></div>");
$('#tips').html('无它,唯勤奋尔');
},
function(){ $('#tips').remove();}
);
});
演示:事件冒泡
$(function(){
$('#a1').click(function(e){
alert('你点击了一个链接');
e.stopPropagation();--- e.stopPropagation()方法阻止事件冒泡
});
$('#d1').click(function(e){
alert('你点击了一个div');
});
$('a.s1').click(function(e){
var obj = e.target;---e.target 是事件对象属性,可以获得事件源
alert(obj.innerHTML);
});
});
演示:鼠标事件
$(function(){
$('ul li').mouseover(function(){---当鼠标移动到元素上时样式发生改变,鼠标移出后样式还原
$(this).addClass('selected').siblings().removeClass('selected');
});
});
</script>
<body style="font-size:30px;">
<div id="d1">hello jquery</div>
<input id="b1" type="button" value="Click" onclick="f1();"/>
<div id="d1"> <a href="javascript:;" id="a1">Click</a> </div>
<a href="javascript:;" class="s1">Click2</a><br/>
<a href="javascript:;" class="s1">Click3</a>
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</body>
动画
1) show(): 显示
hide(): 隐藏
show("slow"/"normal"/"fast"/100) 可以带参数
hide("slow"/"normal"/"fast"/100) 可以带参数
2) fadeIn()
fadeOut(): 改变不透明度
3) slideUp():
slideDown(): 改变元素的高度
4) 以上凼数可以在执行完动画之后,再执行一个回调凼数。
show('slow',function(){
//写上劢画执行之后要执行的操作。
})
5) 自定义动画
animate(params,speed,[callback])
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#d1{
width:250px;
height:80px;
background-color:#fff8dc;
display:none;
}
#d2{
width:100px;
height:100px;
background-color:red;
}
#d3{
width:100px;
height:100px;
background-color:blue;
opacity:0.2;
display:none;
}
</style>
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
演示:动画显示/隐藏、边框改变、透明度改变
$(function(){
$('#a1').toggle(
function(){
$('#d1').show('slow');---快速显示(不加参数的方法 show()和 hide()表示正常显示和隐藏)
$('#d1').slideDown('slow');---慢速减小元素的高度
},
function(){
$('#d1').hide('slow');---慢速消失
$('#d1').slideUp('slow');---慢速增大元素的高度
}
);
$('#d2').toggle(
fadeIn()&&fadeOut()改变不透明度
function(){
$('#d3').fadeIn('slow');
},
function(){
$('#d3').fadeIn('slow',function(){ alert('我出来了');});---带回调函数
},
function(){ $('#d3').fadeOut();}
);
});
演示:自定义动画
$(function(){
$('#b1').click(function(){
$('#d1').animate({'left':'300px','top':'100px'},3000);
$('#d1').animate({'top':'400'},2000).h ide('slow');
});
</script>
</head>
<body style="font-size:30px;">
<a href="javascript:;" id="a1">如何才能学好java</a><br/>
<div id="d1">首先要好好培养兴趣</div>
<div id="d2"></div>
<div id="d3"></div>
<input type="button" value="点我,上面的div就会走" id="b1"/>
</body>
</html>
jquery 操作类数组
$(选择器)操作返回的如果是一个数组,可以使用如下方法来操作:
1) each(fn(i)) 循环遍历每一个元素,this 代表被迭代的 dom 对象,$(this)代表被迭代
的 jQuery 对象。
2) eq(index) 返回 index+1 位置处的 jquery 对象
3) index(obj) 返回下标,其中 obj 可以是 dom 对象戒者 jQuery 对象。
4) length 属性 个数
5) get() 返回 dom 对象组成的数组
6) get(index) 返回 index+1 处的 dom 对象
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
演示:数组操作
$(function(){
$('#b1').click(function(){
var $obj = $('#u1 li');
alert($obj.length);---打印出类数组 ul(类似数组)的长度
$obj.each(function(index){---遍历数组元素,为它们加上不同的样式
if(index == 0){
$(this).css('color','red');
}else{
$(this).css('color','yellow');
}
});
$obj.eq(1).css('color','red');---指定元素的样式改变
var $o1 = $obj.eq(1);
var index = $obj.index($o1);---输出元素的下标
alert(index);
var obj = $obj.get(0);---get() 返回 dom 对象组成的数组
alert(obj.innerHTML);
});
});
</script>
</head>
<body style="font-size:30px;">
<ul id="u1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<input type="button" value="Click" id="b1"/>
</body>
</html>