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

什么时候适合用jQuery

DOM操作较多、简单的AJAX、需要兼容多款浏览器

什么时候不用jQuery

页面交互极为简单、页面对流量有严苛要求、上级要求

jQuery做什么

选择网页元素、改变结果集、元素的操作:取值和赋值、移动、复制、删除和创建
工具方法、事件操作、特殊效果、AJAX、

网站推荐

youmightnotneedjquery
jquery中文文档

jQuery版本选择

1.XXX版本 支持IE6、7、8
2.XXX 3.XXX不兼容IE6、7、8 但体积小 速度快

jQuery所有的API只有这两种写法,使用美元符号定义 jQuery

$.each()
$('ul').addClass()

启动jQuery的几种写法

window.onload(等到页面上所有的内容都加载完毕之后,不推荐)
$( document ).ready( handler )//等DOM加载完毕后再执行函数
$( handler )//当script放入header内时需要 采用这种写法,等DOM加载完毕后再执行函数 .  script放入body底部时不需要这种方法
例如
$(function(){
})

jQuery对象与DOM对象的不同

$('#container li')称为jQuery元素 可认为是对DOM元素的一次封装
jQuery对象只能用jQuery对象的方法
DOM对象只能使用DOM对象的方法
jQuery对象可以通过中括号加下标的方式[index],如$('#container li')[2]转化成DOM对象 还有get(index)方式
如果想获取jQuery对象中的某一项,但不想通过中括号加下标转化成DOM对象的方式,可以$('#container li').eq(2)
使用$(DOM对象)就可以将DOM对象转化为jQuery对象

jQuery选择器

Query选择器

jQuery DOM操作

创建元素

把DOM字符串传入$方法即可返回一个jQuery对象

var obj = $('<div class="test"><p><span>Done</span></p></div>');

在对象中前后添加元素

  • .append(content[,content]) / .append(function(index,html))
    在对象.中的尾部插入内容
    • 可以一次添加多个内容,内容可以是DOM对象、HTML string、 jQuery对象

    • 如果参数是function,function可以返回DOM对象、HTML string、 jQuery对象,参数是集合中的元素位置与原来的html值

  • .appendTo(target)
    把对象a插入到目标元素b尾部 a.appendTo(b)
    • 目标元素可以是selector, DOM对象, HTML string, 元素集合, jQuery对象;

总之,b.append(a) === a.appendTo(b)

  • .prepend(content[,content]) / .prepend(function(index,html))
    向对象.头部追加内容 $( ".inner" ).prepend( "<p>Test</p>" );
  • .prependTo(target)
    把对象插入到目标元素头部
    $( "<p>Test</p>" ).prependTo( ".inner" );

在对象的同级前后添加元素

  • .before([content][,content]) / .before(function)
    在对象.前面(不是头部,而是外面,和对象并列同级)插入内容
  • .insertBefore(target)
    把对象插入到target之前
  • .after([content][,content]) / .after(function(index))
    在对象后面(不是尾部,而是外面,和对象并列同级)插入内容
  • .insertAfter(target)
    对象插入到target之后(同样不是尾部,是同级)

删除元素

  • .remove([selector])
    删除被选元素(及其子元素)
  • .empty()
    清空被选择元素内所有子元素,但这个元素本身仍然存在
  • .detach()
    和.remove()一样删除被选元素, 但 .detach()会保存删除的数据。
    当需要移走一个元素,不久又将该元素插入DOM时,这种方法很有用。

包裹元素

  • .wrap(wrappingElement) / .wrap(function(index))
    为每个对象包裹一层HTML结构
    $( ".inner" ).wrap( "<div class='new'></div>" );
  • .wrapAll(wrappingElement)
    把所有匹配对象包裹在同一个HTML结构中
  • .wrapInner(wrappingElement) / .wrapInner(function(index))
    $( ".inner" ).wrapInner( "<div class='new'></div>");
    意思是$( ".inner" )内部的内容 分别由( "<div class='new'></div>")包裹
  • .unwrap()
    把DOM元素的parent移除

html([string])

读写两用的方法,用于获取/修改元素的innerHTML

$('div').html() #没有参数,获取元素的innerHTML
$('div').html('123') #有参数,参数内容即为修改后的元素innerHTML

text()

和html方法类似,操作的是DOM的innerText值

事件

.on( events [,selector ] [,data ], handler(eventObject) )

增加事件处理函数

  1. events:事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin",一个或多个
  2. selector:选择器,用于过滤出被选中的元素中能触发事件的后代元素。
  3. data:传递给事件处理函数的event.data
  4. handler(eventObject):事件被触发时的执行函数。若该函数只是要执行return false,该参数位置可以直接简写成 false
// 普通事件绑定,最简单的用法
$('div').on('click', function(e){
    console.log(this); //点击的元素
    console.log(e); // 事件,e.target 事件的对象
});
// 事件委托或者事件代理,想让div 下面所有的span绑定事件,可以把事件绑定到div上
$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

// 可以在绑定的时候给事件处理程序传递一些参数
$('div').on('click', {name: 'Byron', age: 24}, function(e){
    console.log(e.data);
});

命名空间的作用:解绑事件时做一个区分

#click.hello事件解绑,但是click事件不受影响
   $('.box>ul').on('click',3,function(e){
      console.log(e.data)
    })
    $('.box>ul').on('click.hello','li',function(){
      console.log(this)
      var str = $(this).text()
      $('#wrap').text(str)
    })
    $('.box>ul').off('click.hello')

事件代理的意义:1.给未创建的后代元素绑定事件 2.当需要监视很多元素的时候,代理事件的开销更小

.off( events [, selector ] [, handler ] )

移除一个事件处理函数

.trigger( eventType [, extraParameters ] )

用语句代替用户的操作,触发事件
$('#foo').trigger('click');

事件的简写方法

$('.box>ul').on('click',3,function(e){
      console.log(e.data)
    })
与下面的写法都是可以的
$('.box>ul').click(3,function(e){
      console.log(e.data)
    })

属性相关

.val([value])

读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的value值为参数值

$('input').val() //没有参数的时候返回input的value值
$('input').val('newValue'); //当传递了一个参数的时候,将参数值设为input的value值
$('input')[0].value = "hello" 用原生DOM的方式设置值

.attr(attributeName)

获取元素特定属性的值

 <input type="text" value="hello">
    <script>
        console.log($('input').attr("type")) //text
    </script>

.attr(attributeName,value)

/ .attr(attributesJson)

/ .attr( attributeName, function(index, attr) )

为元素属性赋值

$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );

$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
}); #以Json格式批量设置属性

$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
});//这里用id选择符举例是不是function永远最多迭代一次?用类选择符是不是更好些?

.removeAttr(attributeName)

为匹配的元素集合中的每个元素中移除一个属性

CSS相关

.css(propertyName) / .css(propertyNames)

.css()获取到的是浏览器计算后的属性

获取元素style特定property的值

var color = $( this ).css( "background-color" );

var styleProps = $( this ).css([
  "width",
  "height",
  "color",
  "background-color"
]);

.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )

设置元素style特定property的值

$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});

$( this ).css( "width", "+=200" );//在原来的基础上宽度增加200

$( this ).css( "background-color", "yellow" );

$( this ).css({ //Json格式批量设置
  "background-color": "yellow",
  "font-weight": "bolder"
});

.addClass(className) / .addClass(function(index,currentClass))

为元素添加一个或多个class,不是覆盖原class,是追加,也不会检查重复

removeClass([className]) / ,removeClass(function(index,class))

移除元素单个/多个/所有class

$( "p" ).addClass( "myClass yourClass" ); //为元素添加多个class
$( "p" ).removeClass( "myClass yourClass" );//移除元素多个class

.hasClass(className)

检查元素是否包含某个class,返回true/false

$( "#mydiv" ).hasClass( "foo" )

.toggleClass(className)

toggle是切换的意思,方法用于切换class
当触发事件时,先去判断有没有该class,有的话去掉,没有的话加上

jQuery 动画

基础

  • .hide([duration ] [,easing ] [,complete ])
    隐藏元素,没有参数的时候等同于直接设置display:none属性
  1. duration:动画持续多久
  2. easing:表示过渡使用哪种缓动函数,jQuery自身提供"linear" 和 "swing"
  3. complete:在动画完成时执行的函数,先完成动画,后执行函数
  • .show( [duration ] [, easing ] [, complete ] )
    用于显示元素,用法和hide类似
  • .toggle( [duration ] [, easing ] [, complete ] )
    toggle是切换的意思,用来切换元素的隐藏、显示,类似于toggleClass
    事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置

渐变

  • .fadeIn( [duration ] [, easing ] [, complete ] )
    通过淡入的方式显示匹配元素
  • .fadeOut( [duration ] [, easing ] [, complete ] )
    通过淡出的方式隐藏匹配元素
  • .fadeTo( duration, opacity [, easing ] [, complete ] )
    调整匹配元素的透明度,方法通过匹配元素的不透明度做动画效果
  • .fadeToggle( [duration ] [, easing ] [, complete ] )

滑动

  • .slideDown( [duration ] [, easing ] [, complete ] )
    用滑动动画显示一个匹配元素
  • .slideUp( [duration ] [, easing ] [, complete ] )
    用滑动动画隐藏一个匹配元素
  • .slideToggle( [duration ] [, easing ] [, complete ] )
    用滑动动画显示或隐藏一个匹配元素
    slideDown&slideUp例子

自定义动画

  • .animate( properties [, duration ] [, easing ] [, complete ] )
    properties是一个CSS属性和值的对象,动画将根据这组对象移动。
##可以把一串连续变化的属性定义成数组,遍历数组
  $('#btn3').click(function(){
        var action = [
          {width:'80px',height:'80px',left:0,top:0},
          {width:'150px',height:'150px',left:0,top:0},
          {left:'200px'},
          {top:'200px'},
          {left:'0'},
          {top:'0'},
          {width:'80px',height:'80px',left:0,top:0}
        ]
        action.forEach(function(action,idx){
          $('.box2').animate(action)
        })
     }) 
#jQuery也可以使用链式语法
         action.forEach(function(action,idx){
         $('.box2').animate({width:'80px',height:'80px',left:0,top:0})
                   .animates({width:'150px',height:'150px',left:0,top:0})
                   .animate({left:'200px'})
                   .animate({left:'0'})
                   .animate({top:'0'})
        })
  • .animate( properties, options )
    options是一组包含动画选项的值的集合。 常用的选项:
  1. duration (default: 400):一个字符串或者数字决定动画将运行多久。默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如:1000) )
  2. easing (default: swing):一个字符串,表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing",其他效果可以使用jQuery Easing Plugin插件
  3. complete:在动画完成时执行的函数
  • .stop( [clearQueue ] [, jumpToEnd ] )
    停止元素当前正在运行的动画。
  1. clearQueue
    一个布尔值,指示是否取消以列队动画。默认 false
  2. jumpToEnd
    指示是否当前动画立即完成,默认false.
  • .finish( [queue ] )
    停止当前正在运行的动画,删除所有排队的动画

推荐阅读更多精彩内容