JQuery学习记录

<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();  

     })  

 

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对象在数组中的下标

例：

1. var $li = $("li");  
2. $li.each(function( i ){  
3.     if ( i == 0 ){  
4.          $( this ).css(" font-size ",' 30px ').css(' ',' ');  
5.     }  
6. });  

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()父节点（没有选择器）