jquery

2017-08-21 本文已影响0人无聊新生

什么是jquery

使用JavaScript库封装的一款高效简洁的框架（是什么/概念）
优化DOM操作、事件处理、动画设计和Ajax交互，帮助开发者创建出高难度的交互页面（有什么用/作用）
轻量级、强大的选择器、出色的 DOM 操作的封装、可靠的事件处理机制、完善的 Ajax、出色的浏览器兼容性、链式操作方式（为什么用/特点）

JQuery选择器

Jquery的选择器大部分与CSS3.0一样，例如juqery的标签选择器${"div"}与css的标签选择器div{}

JQuery选择器案例

1.png

2.png

3.png

4.png

5.png

6.png

7.png

Jquery选择器大全

具体请看选择器总结文件(选择器总结文件.docx)

样式

8.png

$('div').css('border','10px blue solid');//赋值
alert($('div').css('border'));//取值

$('div').addClass('aa bb');
$('div').removeClass('bb');

事件

9.png

方式一: event()

$('div').click(function1);

$('div').click(function1,function2);

方式二: bind()

//绑定一个事件，注意用事件名称,function
$('input:eq(1)').bind('click',function(){
    alert('hello jquery');
});

//绑定多个事件，触发同一个函数
$('input:eq(1)').bind('click blur',function(){
    alert('hello jquery');
});

// 绑定多个事件，触发不同的函数,注意用{}扩展多个函数
$('div').bind(
    {
        mouseover:function(){
            $(this).css('background','blue');
        },
        mouseleave:function(){
            $(this).css('background','yellow');
        }
    }
);

方式三: on()

on的基本用法与bind类似

//绑定一个事件，注意用事件名称,function
$('input:eq(1)').on('click',function(){
    alert('hello jquery');
});

//绑定多个事件，触发同一个函数
$('input:eq(1)').on('click blur',function(){
    alert('hello jquery');
});

// 绑定多个事件，触发不同的函数
$('div').on({
    // 注意用{}
    mouseover:function(){
        $(this).css('background','blue');
    },
    mouseleave:function(){
        $(this).css('background','yellow');
    }
});

on高级用法

$('p>span').on('click',function(){
    alert('span');
});

//与上面的代码等价
$('div').on('click','span',function(){
    alert('span');
});

事件冒泡

event.target 指向了触发事件的对象（事件源） this指向的是调用事件对象的本身

$('div').on('click',function(event){
    alert('span');
    event.stopProgation();
});

解绑事件

$('div').off('click');//解绑div的点击事件
$('div').unbind('click');//解绑div的点击事件

$('div').off();//解绑div的所有事件
$('div').unbind();//解绑div的所有事件

注意：无法将html标签上的事件进行解绑，只能解绑通过jquery绑定的事件

属性

通过attr(属性名,属性值)来赋值，通过attr(属性名)来取值

10.png

$('input[type="button"]').attr("onclick","");

dom操作

11.png

 // append添加到末尾
    $('div').append('<span>这是第二个span</span>');  
    //$()可以将字符串内容转成jquery对象
    $('<span>这是第二个span</span>').appendTo($('div'));

    //prepend添加到开头
    $('div').prepend('<span>这是第三个span</span>');
    $('<span>这是第四个span</span>').prependTo($('div'));

//wrap与wrapAll与
    $('p').wrap('<div style="color:red"></div>');
    $('p').wrapAll('<div style="color:red"></div>');

    //wrapInner 将div下面的节点包裹一个div父节点
    $('div').wrapInner('<div style="color:red"></div>');

    //unwrap 去掉p的div父节点
    $('p').unwrap('div');
    //去掉p的父节点
    $('p').unwrap();

元素遍历

12.png

//子代 div所有子代span
$('div').children('span').css('color','red');
//后代 div所有后代span
$('div').find('span').css('color','red');

//找到span的父节点
$('span').parent().css('border','1px red solid');
//找到span的所有祖先节点
$('span').parents().css('border','1px red solid');
//找到span的所有div祖先节点
$('span').parents('div').css('border','1px red solid');

//找到span最近的div父节点
$('span').closest('div').css('border','1px red solid');

parent与closest的区别

13.png

//span2的前一个相邻的span
$('#span2').prev('span').css('color','red');
//span1后一个相邻的span
$('#span1').next('span').css('color','blue');
//span2的同辈span标签
$('#span2').siblings('span').css('color','blue');
//index就是元素的数组下标 element元素本身
$('span').each(function(index,element) {
    if(index%2==0){
        //$(this).css('color','red');
        element.style="color:red";
    }else{
        $(this).css('color','blue');
    }
});

jquery对象与dom对象相互转换

//将dom对象转成jquery
var div=document.getElementById('div');
var $div=$(div);

//将jquery对象转成dom对象
var $div=$('div');
var div=$div[0];