jQuery教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37099532/article/details/82753234

jQuery绑定事件

常用绑定事件方法

$('#btn').click(function(e){
    console.log('这是一个常用绑定事件方法');
})

添加多个绑定事件

$('#btn').on('mouseover mouseout',function(){
    console.log('同一元素绑定多个事件，同一个事件处理函数');
})

$('#btn').on({
    mouseover:function(){
        console.log('这是移入事件处理函数');
    },
    mouseout:function(){
        console.log('这是移出事件处理函数');
    }
})

或者：
$(#btn).on('mouseover',function(){
    console.log('这是移入事件');
});
$(#btn).on('mouseout',function(){
    console.log('这是移出事件');
})

jQuery中的事件详解

###e中的属性(常用)
-e.which   //针对鼠标或键盘，获得键盘或者按钮的值。
-e.target    //事件追踪，获取到触发事件的元素。
-e.pageX或者Y   //或者光标相对于页面的x和y坐标。
###e中的方法
-e.preventDefault()   //阻止浏览器默认行为
-e.stopPropagation()   //阻止事件冒泡

//获取键盘键或者鼠标键的ASCII值
$('#btn').click(function(e){
    console.log(e.which);
})
// 输出：1   鼠标左键点击

$('input:text').keydown(function(e){
    console.log(e.which);
})
//输入a后输出：66   获得输入键盘的ASCII值

jQuery中合成事件（常用于鼠标移入和移出效果）

$('#btn').hover(function(e){
   console.log('鼠标移入事件处理函数'); 
},function(e){
    console.log('鼠标移出事件处理函数');
});

jQuery中DOM操作

jQuery中DOM元素属性操作

<p class="item" a="1">段落</p>

单个属性操作
$('.item').attr('a');  //获取段落的a属性
$('.item').attr('a','2'); //设置段落的a属性

多个属性的操作
$('.item').attr({
    a:'1',
    b:'2',
    c:function(){
        console.log('这是段落中的c方法')
    }
});

移除属性
$('.item').removeAttr('a');//移出段落中的属性a

text(string); //不传参为获取，传参为设置，注意参数为一个字符串
html(string);//不传参为获取，传参为设置，注意参数为一个字符串或者一个html标签
val(string);//不传参为获取，传参为设置，注意参数为一个字符串

jQuery中的DOM类操作

添加类名
$('p').addClass('btn');//给段落添加一个类
移除类
$('p').removeClass('btn');//移除段落的类

如果有则去掉样式类，没有则添加样式类
$('p').toggleClass('btn');//类似与开关
判断样式是否存在
$('p').hasClass('btn');//判断段落是否存在类btn

jQuery中css样式操作

获取css样式

$('p').css('color');//获取段落的前景色

设置单个css样式

$('p').css(backgroundColor,'red');//设置段落背景色为红色

设置多个css样式

$('p').css({
    'color':'red',
    'font-size':'18px',
    'background-color':'blue'
})
注意：如样式名为js中的命名方法那么不需要加引号，如果使用的是css中的样式命名方法那么则需要加引号。

jQuery中动态创建DOM元素

在父元素里面的最后面追加节点

let body=$('body');
$('<div>123</div>').appendTo(body);//创建标签并添加在body的最后。

在兄弟节点的前面或者后面追加节点

let span=$('<span>123</span>')
$('.div').after(span);//在div的后面追加span节点
$('.div').before(span);//在div的前面追加span节点

元素移除操作

<div>
    <p class="item">这是段落一</p>
    <p class="item">这是段落二</p>
    <p class="item1>这是段落三</p>
</div>

$("div").remove();//移除div中所有元素包含子元素
$("p").remove(".item");//移除p段落中包含item的元素

效果

元素的显示以及隐藏

<p>这是段落</p>
<button class="showHide">按钮</button>

$(".showHide").click(function(){
    $("p").toggle();
})

事项：.toggle()以可以传入一个时间参数，表示显示和隐藏的时间。例如：.toggle(1000)；时间单位为毫秒。

元素的淡入与淡出

<div>这是第一个div</div>
<div>这是第二个div</div>
<button>这是一个按钮</button>

$("button").click(function(){
    $("div").fadeToggle();    
})

事项：fadeToggle()可以传入一个时间参数，表示淡入与淡出的时间，单位为毫秒。

元素的滑动（常用于侧边栏）

<div class="click">点击我</div>
<div class="silde">下滑和上滑</div>

$(".click").click(function(){
    $(".slide").slideToggle();
})

事项：slideToggle()可以传入一个时间参数，表示滑入和滑出的时间，单位为毫秒。

动画

<div>这是一个div</div>
<button>按钮</button>

$("button").click(function(){
    $("button").animate({
        left:'100px',
        height:'100px',
        width:'100px',
        background:'pink'
    },2000);
})

animate() 第一个参数：自定义动画；第二个参数：动画时间。

jQuery获取元素的尺寸

<style>
    div{
        width:100px;
        height:100px;
    }
</style>
<div>这是段落</div>

$("div").innerWidth();//获取元素的宽度不包括边框的宽度。
$("div").outerWidth();//获取元素宽度包括边框

innerWidth():可以传入一个参数，当传入参数时为设置元素宽度。

outerWidth();当传入参数为true时，获得的宽度包含元素的margin值。

jQuery中的遍历

向上选

<html>
    <body>
        <div>
            <span class="item"></span>
            <span></span>
        </div>
    </body>
</html>
$("div").parents();//选中div的所有父级元素包括html

$("div").parents("html");//选中div的所有父级元素并且是html的父级元素

向下选

<html>
    <body>
        <div>
            <span></span>
        </div>
    </body>
</html>

$("body").find("span");//选中body中所有子元素是span的元素
$("body").find("*");//选中body中的所有子元素

选取兄弟元素

<div>
    <p>段落</p>
    <span>文本</span>
    <strong>加粗文本</strong>
</div>

$("p").siblings("span");//选中p元素所有同级兄弟元素中为span的元素
$("p").siblings();//选中p元素的所有兄弟元素