<script>
//#target ID选择器 .target 样式选择器 body元素选择器
$(document).ready(function() { //HTML加载完毕之后加载
$("#target1").css("color", "red"); //添加CSS样式
$("#target1").prop("disabled", true); //改变属性
$("#target4").remove(); //移除选择的标签
$("#target2").appendTo("#right-well"); //移动选择的标签
$("#target5").clone().appendTo("#left-well"); //克隆并移动选择的标签
$("#target1").parent().css("background-color", "red"); //给父级元素添加CSS样式
$("#right-well").children().css("color", "orange"); //给子级元素添加CSS样式
$("#left-well").children().css("color", "green");
$(".target:nth-child(2)").addClass("animated bounse"); //给子元素第二个元素添加动画效果
$(".target:even").addClass("animated shake"); //给偶数行元素添加动画效果 元素从0开始计算(0、1、2、3、4...)
$("body").addClass("animated hinge"); //给body添加动画效果
});
</script>
<!-- Only change code above this line. -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>
1.jQuery 事件绑定
$obj.bind( ' click ' , function(){});
简写形式$obj.click(function(){});
事件对象的常用属性:
获取事件var obj = e.target;
获取事件的坐标:e.pageX; e.pageY
2.事件冒泡 :子节点产生的时间会依次向上抛给父节点
obj.stopPropagation();
$('a').click(function(obj){
alert("点击了一下");
obj.stopPropagation();
})
3.合成事件
hover(mouseenter, mouseover ); 模拟光标悬停事件
toggle() 在多个事件中响应切换
4.JQuery 动画
A.show() / hide()通过同时改变元素的宽度和高度 来实现显示
/ 隐藏
$obj.show(执行时间,回调函数);
执行时间:slow ,normal,fast或毫秒数
回调函数:动画执行完毕之后要执行的函数
B.上下滑动效果实现 slideDown()/slideUp()
5.数组
length属性
each(fn)遍历数组,fn用来处理DOM对象,在fn中this表示正在被遍历的那个DOM对象fn函数可以添加一个参数用于表示正在被遍历的DOM对象下标(从0开始)
eq(index)将下标等于index的DOM对象取出来
get() 返回一个DOM对象组成的数组
index(obj) 返回DOM或jQuery对象在数组中的下标
例:
- var $li = $("li");
- $li.each(function( i ){
- if ( i == 0 ){
- $( this ).css(" font-size ",' 30px ').css(' ',' ');
- }
- });
var $li = $("li"); $li.each(function( i ){ if ( i == 0 ){ $( this ).css(" font-size ",' 30px ').css(' ',' '); } });
6.JQuery 对ajax的支持 见《ajax方法》一文
7.JQuery操作DOM查询
html();
text();
val();
attr();
8.JQuery操作DOM创建、插入、删除
插入DOM节点:
append():作为最后一个子节点添加进来
prepend():作为第一个子节点添加进来
after():作为下一个元素添加进来
before():作为上一个兄弟元素添加进来
删除DOM节点:
remove():移除
remove(selector) 按选择器定位后移除
empty():清空节点
复制节点:
clone()
clone(true):复制的节点也具有行为(将处理代码一块复制)
9.JQuery操作DOM----样式操作
attr('class',' '):获取和设置
addClass(' '):添加样式
removeClass(' '):移除样式
removeClass():移除所有的样式
toggleClass(' '):切换样式
hasClass(' '):是否拥有某个样式
css(' '):读取css的值
css(' ', ' '):设置多个样式
10.遍历节点
children()/children(selector) 只考虑直接子节点
next()/next(selector)下一个兄弟节点
prev()/prev(selector)上一个兄弟节点
siblings()/siblings(selector)其他兄弟
find(selector)查找满足选择器的所有后代
parent()父节点(没有选择器)