jQuery选择器_Dom操作_样式_事件处理_动画

1. jquery 能做什么?

jquery是一个js工具类库,封装了常用的DOM操作方法,有更好的兼容性,利用jquery提供的api,可以完成以下工作:

  • 完成DOM的增删改查等操作
  • 事件绑定操作
  • 样式修改
  • 方便的动画设置
  • ajax操作
  • 多种第三方插件可以使用

2. Jquery对象和DOM原生对象的区别,转换

区别:

  1. jquery对象是使用jquer方法获取的对象,可以调用jquery方法,jquery对象是一个类数组对象

  2. DOM原生对象是使用原生js方法获取的对象,是文档对象模型,只能调用原生的js方法

转换方式:

  1. jquery对象转DOM原生对象:通过下标方式选择jquery对象,如:$('div')[0]

  2. DOM原生对象转jQuery对象:调用jquery方法,如:$(document.querySelector('div'))


3.jquery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

jquery提供了四种事件监听的方式,分别为bind、delegate、live和on

  • bind

      bind(type,[data],function(eventObject))
    

    在选择的元素上绑定特定事件类型的监听函数,其中data为可选参数

//定位找出所有的div元素给其添加click事件的函数
  $('div').bind('click',function(){
     console.log(this)
  })
  • unbind

    unbind(type,[data|fn]])
    

bind()的反向操作,从每一个匹配的元素中删除绑定的事件。
如果没有参数,则删除所有绑定的事件。
你可以将你用bind()注册的自定义事件取消绑定。
如果提供了事件类型作为参数,则只删除该类型的绑定事件。除指定类型的事件

//把所有段落的所有事件取消绑定
$("p").unbind()

//将段落的click事件取消绑定
$("p").unbind( "click" )
  • delegate

    delegate(selector,type,[data],fn)
    

指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

这是一个段落。

$("div").delegate("button","click",function(){ $("p").slideToggle(); });
  • live

    live(type, [data], fn)

jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说:


  
Click here
//可以给这个元素绑定一个简单的click事件: $('.clickme').bind('click', function() { alert("Bound handler called."); }); //有另一个元素添加进来了 $('body').append('
Another target
'); //尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。 //.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的: $('.clickme').live('click', function() { alert("Live handler called."); }); //然后再点击新增的元素,他依然能够触发事件处理函数。

事件委托

.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。

  • on

    on(type,[selector],[data],fn)
    

在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live().

  //给p绑定click事件处理方法
  $("p").on("click", function(){
    alert( $(this).text() );
  });
  • off

    off(events,[selector],[fn])
    

在选择元素上移除一个或多个事件的事件处理函数。

//删除所有p的绑定事件
$("p").off()

//删除所有p的代理事件
$("p").off( "click", "**" )

var foo = function () {
  // code to handle some kind of event
};

// body代理所有p的点击事件,p点击时,会执行foo方法
$("body").on("click", "p", foo);


// 解除body代理的p点击事件
$("body").off("click", "p", foo); 

推荐使用
推荐使用on方法

在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live().

on绑定事件使用事件代理写法:

//只需为tbody绑定点击事件处理方法,
//在tr发生点击事件后,会通过冒泡传递给tbody,然后调用处理方法
$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

4. jquery 如何展示/隐藏元素?

.show([speed],[callback])       //显示元素
.hide([speed],[callback])       //隐藏元素
.fadeIn([speed], [callback]      //淡入显示隐藏元素
.fadeOut([speed], [callback]):  //淡出隐藏显示元素
.slideUp([speed],[callback])     //以滑动的方式隐藏显示元素
.slideDown([speed],[callback])     //以滑动的方式隐藏显示元素

.toggle([speed], [callback])        //显示隐藏元素,隐藏显示元素
fade.toggle([speed], [callback])    //淡入淡出显示隐藏元素,隐藏显示元素

- speed:  规定速度,取值:'slow', 'normal', 'fast'或毫秒
- callback:显示或隐藏后执行的函数

5. jquery 动画如何使用?

$(selector).animate(styles,speed,easing,callback)

//例子:

  

nihao


6.如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

  • $().html()获取html内容

  • $().text()获取文本内容

      $('div').html()           //无参数,用于返回元素的innerHTML
      $('div').html(string)       //有参数,设置元素为内部HTML内容
    
      $('div').text()           //无参数,用于返回元素的innerText
      $('div').text(string)       //有参数,设置元素的内部文本
    

7.如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

.val([string])
无参数时,获取表单用户的输入值
有参数时,设置表单的输入值

.attr('attrName')
获取元素特定属性的值
.attr('attrName','attrVal')     //传递两个参数,即属性名称和对应的值
设置单个的属性值

8. 边栏菜单

http://js.jirengu.com/rayoj/3/edit

jQuery选择器_Dom操作_样式_事件处理_动画_第1张图片
image.png

9. tab页切换

http://js.jirengu.com/kimoj/3/edit

jQuery选择器_Dom操作_样式_事件处理_动画_第2张图片
image.png

10. 添加元素

http://js.jirengu.com/lobih/10/edit

jQuery选择器_Dom操作_样式_事件处理_动画_第3张图片
image.png

11. tab页滑动切换

http://js.jirengu.com/pusup

jQuery选择器_Dom操作_样式_事件处理_动画_第4张图片
image.png

你可能感兴趣的:(jQuery选择器_Dom操作_样式_事件处理_动画)