jQuery事件与动画详解-优快云博客

本文链接：https://blog.youkuaiyun.com/dpy521/article/details/84982309

高级事件

$('.box').on('click','.button',function(){
           alert('on click')
     })给父元素box绑定click事件，但点击的是子元素button

$(’.box’).off(‘click’,’.button’)移除绑定的事件

$('.box').one('click','.button',function(){
           alert('one click')
     })
绑定的事件只执行一次

动画嵌套

$('.show').click(function(){
           $('.box').first().show('fast',function test(){
                $(this).next().show('fast',test)
           })
     })

自定义动画

$('.box').animate({width:'300px'})
         .animate({height:'300px'})
         .animate({fontSize:'50px'})

队列执行动画

$('button').click(function(){
                           $('.box').slideUp('slow')
                           .slideDown('slow')
                          .queue(function(next){
                                $(this).css('background','gray')
                                next()
                           })
                           .hide('slow')
                     })

click.*** 别名

$('input').bind('click.1',function(){
           alert('1')
     })
     $('input').bind('click.2',function(){
           alert('2')
     })
     $('input').unbind('click.1')   ---  $('input').unbind('.1')
     });

后代元素： $(“div li”)
子元素： $(“div > li”)
下一元素： $(“div + li”)
下面所有同级元素： $(“div ~ li”)

后代元素： find()
子元素： children()
下一元素： next()
下面所有同级元素： nextAll()
同级上一个元素 prev()
同级所有上面的元素 prevAll()
同级上非指定元素 prevUntil()
同级下非指定元素 nextUntil()
同级上下所有元素 siblings()

等于属性值 $(“a[title=value]”)
属性值开头匹配 $(“a[title^=value]”)
属性值结尾匹配 $(" a [t i t l e$ =value]")
不等于属性值 $(“a[title!=value]”)
属性值是以空格分割的列表 $(“a[title~=value]”)
属性值包含 $(“a[title*=value]”)
选定具有多个属性且属性值匹配 $(“a[name][title=value]”)

第一个： :first
最后一个： :last
选取class不是red的li元素 :not(.red)
选择偶数 :even
选择奇数 :odd
选择等于 :eq(2)
选择大于 :gt(2)
选择小于 :lt(2)
选择标题元素 :header
选择动画元素 :animated
选择被焦点元素 :focus

含有gaogao文本的元素 :contains(‘gaogao’)
不包含子元素或空文本的元素 :empty
含有class=red的元素 :has(.red)
含有子元素或文本的元素 :parent

含有class=red的元素方法 $(“ul”).has(’.red’)
选择当前元素的父元素 $(‘li’).parent()
选择当前元素的父元素及祖先元素 $(‘li’).parents()
选择li遇到div父元素停止 $(‘li’).parentsUntil(‘div’)

选取所有不可见元素 :hidden
选取所有可见元素 :visible

获取每个父元素的第一个子元素 :first-child
获取每个父元素的最后一个子元素 :last-child
获取只有一个子元素的元素 :only-child
获取每个自定义子元素的元素 :nth-child(n)
每个父元素奇数 li 元素 $(‘li:nth-child(odd)’)
每个父元素偶数 li 元素 $(‘li:nth-child(even)’)

检测 class 是否为 red $(’.red’).is(‘li’);
检测第2个li元素class是否为red $(‘li’).eq(2).hasClass(‘red’);
选择从 start 到 end 位置的元素，
前三个变成红色 $(‘li’).slice(0,2).css(‘color’, ‘red’);
获取当前元素前一次状态 $(“div”).find(“p”).end().get(0);
选择 li 的 class 为 red 的元素 $(‘li’).filter(’.red’).css(‘background’,’#ccc’);

元素名定位，默认获取第一个 $(‘input’).val();
元素名定位，获取第二个 $(‘input’).eq(1).val();
选择 type 为 password 的字段 $(‘input[type=password]’).val();
选择 name 为 user 的字段 $(‘input[name=user]’).val();

$(’:input’).size(); //获取所有表单字段元素
$(’:text).size(); //获取单行文本框元素
$(’:password’).size(); //获取密码栏元素
$(’:radio).size(); //获取单选框元素
$(’:checkbox).size(); //获取复选框元素
$(’:submit).size(); //获取提交按钮元素
$(’:reset).size(); //获取重置按钮元素
$(’:image).size(); //获取图片按钮元素
$(’:file).size(); //获取文件按钮元素
$(’:button).size(); //获取普通按钮元素
$(’:hidden).size(); //获取隐藏字段元素

$(’:enabled’).size(); //获取可用元素
$(’:disabled).size(); //获取不可用元素
$(’:checked).size(); //获取单选、复选框中被选中的元素
$(’:selected).size(); //获取下拉列表中被选中的元素

$('input').bind('click',function(){
            alert(绑定事件)
});

$(function(){
           $("#box").mouseover(function(){
                $(this).css('background','red')
           }).mouseout(function(){
                $(this).css('background','gray')
           })
     });     (更多使用mouseenter)
$('input').bind({
        mouseover:function(){
            alert();
        },
        mouseout:function(){
            alert();
        }
});

$('input').unbind('click',fun1);解除绑定

阻止a标签的默认行为（跳转另一界面）

  $('a').click(function(event){
            event.preventDefault();  
            alert("baidu")
    })

阻止冒泡

$("input").bind('click',function(event){
        event.stopPropagation()  
})

阻止form表单的提交

$('form').submit(function(event){
        event.preventDefault();  
        alert（“确认事件触发了”）
})

阻止冒泡和默认事件

$('a').bind("click",function(event){
        //event.stopPropagation();
        //event.preventDefault()；
        return false;
})

alert(event.isDefaultPrevented());
alert(event.isPropagationStopped());
event.stopImmediatePropagation();(把自己之后的相关的方法都取消掉) 使用stopImmediatePropagation()函数可以阻止当前事件向祖辈元素的冒泡传递，也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。

val() 只会对第一个元素起作用，所以你的代码只输出一次。

$("p").css({"color":"white","background-color":"#98bf21","font-family":"Arial","font-size":"20px","padding":"5px"});`

       $('li:first')选择第一个元素
4. 
       $('li:last')
5. 
       $('li:not(.red)')选择class不是red的li元素
6. 
       $('li:even')选择索引（从0开始）是偶数的所有元素
7. 
       $('li：odd')
8. 
       $('li:eq(2)')选择索引等于index的元素
9. 
       $('li:gt(2)')大于
10. 
       $('li:lt(2)')小于
11. 
       $(':header')选择标题元素，h1~h6
12. 
       $(':animated')选择正在执行动画的元素
14. 
       $('input').get(0).focus()
15. 
       $(':focus')选择当前被焦点的元素
16. 
       使用eq来获得第一个p标签的color值： 
$("p").eq(0).css("color")  //因为eq(num)返回的是个jq对象，所以可以用jq的方法css
19. 
使用get来获得第一个p标签的color值：
$("p").get(0).style.color  //因为get(num)返回的是个html对象，所以要使用传统的HTML对象方法，jq对象此时就没用了。
当然，你也可以get(num)后把对象转为jq的对象再进行操作
	22. 
内容过滤器
	23. 
主要是对子元素，以及文本内容上进行操作，DOM元素对象
	24. 
$(':contains("文本内容")')选取含有“文本内容”的元素
	25. 
$(':empty')选取不含有子元素或空文本的元素
	26. 
$(':has(.red)')选取含有class是red的元素
	27. 
$(':parent')选取含有子元素或文本的元素
	28. 
$('.red').is('li')
	29. 
$('li').eq(2).hasClass("red")
	30. 
$('div').contents()选取某元素下面所有元素节点，包括文本节点
	31. 
$('div').children().size()不包含文本节点只包含元素节点
	32. 
$('li').slice(0,2)选择从start到end位置的元素
	33. 
$('li').filter('.red')匹配元素的子集构造一个新的jQuery对象
	34. 
$("input").val(['男'，'读书'])
	35. 
$('#box').html()
	36. 
$('#box').text()
	37. 
alert($("#box").attr('id'))
	38. 
$("#box").attr({'class':'cla','id':'i','date':'2015'})不建议这样设置class和id属性
	39. 
$("div").attr('title',function(index,value){
	40. 
     return 'title属性值'+index(索引)+value(之前的value值)
	41. 
})
	42. 
$("div").removeAttr('title')
	43. 
$(function(){
	44. 
     var box=$("div").css(['width','color','height'])
	45. 
     for(var i in box){
	46. 
           alert(i+':'+box[i]);
	47. 
     }
	48. 
});
	49. 
$(function(){
	50. 
     var box=$('div').css(['width','color','height'])
	51. 
     $.each(box,function(attr,value){
	52. 
           alert(attr+":"+value)
	53. 
     })
	54. 
})
	55. 
$('div').addClass('red bg')添加多个类
	56. 
$('div').removeClass('red bg')删除类
	57. 
$(function(){
	58. 
     $('div').click(function(){
	59. 
           //$('div').addClass("red")
	60. 
           //$('div').toggleClass('red')
	61. 
           if($('div').hasClass("blue")){
	62. 
                $('div').removeClass('blue')
	63. 
           }
	64. 
     })
	65. 
})
	66. 
.innerWidth()  .outerWidth(true)  .offset().left  .position().left
	67. 
$(window).scrollTop(300)滚动条直接定位到300
	68. 
$('div').width(300)设置宽300，比较智能（300px,300pt)
	69. 
$('div').width(function(index,value){
	70. 
     return value+300;
	71. 
})
	72. 
创建元素节点
$(function(){
     var box=$('<div id="box"></div>')
     $('body').append(box)//添加到后面
     $('div').append(function(index,html){
     return '<strong>新的内容</strong>'+html（旧的内容）;
     })
})   只能在调制器看到

prepend() prependTo()把节点添加到另一个节点里的前面

append() appendTo()把节点添加到另一个节点里的后面

after()把节点添加到另一个节点的后面（兄弟）

before()把节点添加到另一个节点的前面（兄弟）

insertAfter()把已存在的节点插入到另一个节点的后面去（位置变了）

insertBefore()把已存在的节点插入到另一个节点的前面去（位置变了）

$(‘strong’).appendTo(‘div’);把原有的strong标签插入到div里

       size()   get()   eq()   find()   children('p')

       $("#box + p")==$("#box").next('p') #box下的第一个兄弟节点

       $("#box").nexAll('p')#box下的所有的p

       prev()  prevAll()  next()  nextAll()

       siblings('p')上面和下面所有的兄弟节点

       nextUntil('p') prevUntil('p')

包裹节点：$(‘div’).wrap(’’)给div外面包裹了一个strong标签

$(‘div’).wrap(‘abc’)abc在div的前面
$(‘div’).unwrap()移除紧挨着的一层包裹
wrapAll() wrapInner()

克隆:

  $('div').clone().appendTo('body')克隆div并添加到body中，但是“事件”没有被克隆，需要设置        clone(true)。
 删除节点：$("div").remove('.box')删除class为box的元素节点
 $('div').remove().appendTo('body')删除后再添加  ‘事件’不添加
 $('div').detach().appendTo('body')删除后再添加  ‘事件’也添加上了
empty（）删除文本
 $('div').replaceWith('<span>span内容</span>')把div整体替换（包括它的点击事件）

jquery常用语法