码迷，mamicode.com
首页 > Web开发 > 详细

四、jQuery

时间：2020-04-16 20:53:08      阅读：86      评论：0      收藏：0      [点我收藏+]

标签：ddc   find   The   jquery属性   过滤   other   callback   object   回调   

1、jquery介绍

　　jQuery是目前使用最广泛的javascript函数库，jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器。

　　jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

　　 <script type="text/javascript" src="js/jquery-1.12.2.js"></script> 

　　（1）http://jquery.com/ 官方网站
　　（2）https://code.jquery.com/ 版本下载

2、jquery加载

　　将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

　　完整的写法：

<script type="text/javascript">
    $(document).ready(function(){
        ......
});
</script>

　　简写：

<script type="text/javascript">
$(function(){
     ......
});
</script>

　　说明:导入模块后，不能在当前script标签内写js，需要另外打开一个标签。

3、jquery选择器

　　jquery用法思想一：选择某个网页元素，然后对它进行某种操作。

　　3.1 jquery选择器

<!DOCTYPE html>
<html>
<head>
    <mate charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var $div1=$(‘#div1‘);
            $div1.css({
                "color":"blue"
            });
            alert($div1.length);
        });
    </script>
</head>
<body>
    <div id="div1">这是一个div测试</div>
</body>
</html>

　　　　jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

$(‘#myId‘) //选择id为myId的网页元素
$(‘.myClass‘) // 选择class为myClass的元素
$(‘li‘) //选择所有的li元素
$(‘#ul1 li span‘) //选择id为为ul1元素下的所有li下的span元素
$(‘input[name=first]‘) // 选择name属性等于first的input元素

　　3.2 对选择集进行过滤

$(‘div‘).has(‘p‘); // 选择包含p元素的div元素
$(‘div‘).not(‘.myClass‘); //选择class不等于myClass的div元素
$(‘div‘).filter(‘.myClass‘); //选择class等于myClass的div元素
$(‘div‘).eq(5); //选择第6个div元素

　　3.3 选择集转移

$(‘div‘).prev(); //选择div元素前面紧挨的同辈元素
$(‘div‘).prevAll(); //选择div元素之前所有的同辈元素
$(‘div‘).next(); //选择div元素后面紧挨的同辈元素
$(‘div‘).nextAll(); //选择div元素后面所有的同辈元素
$(‘div‘).parent(); //选择div的父元素
$(‘div‘).children(); //选择div的所有子元素
$(‘div‘).siblings(); //选择div的同级元素
$(‘div‘).find(‘.myClass‘); //选择div内的class等于myClass的元素

　　3.4 判断是否选择到了元素

　　jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。

var $div1 = $(‘#div1‘);
var $div2 = $(‘#div2‘);
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
<div id="div1">这是一个div</div>

4、jquery样式操作

　　jquert用法思想二：同一个函数完成取值和赋值

<!DOCTYPE html>
<html>
<head>
    <mate charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            var $div=$(‘#box‘);

            //读取属性值
            var sTr=$div.css("fontSize");
            alert(sTr);

            //写属性值
            $div.css({
                "color":"red",
                "backgroundColor":"pink",
                "fontSize":"40px"
            })

            var $div2=$(".box");

            $div2.addClass("big");
        });
    </script>
    <style type="text/css">
        .box{
            width:100px;
            height:100px;
            background-color:green;
        }
        .big{
            font-size:30px;
        }
    </style>
</head>
<body>
    <div id="box">这是一个div测试</div>
    <div class="box">这是第二个测试</div>
</body>
</html>

　　4.1 操作行间样式

// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

　　　说明：选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

　　4.2 操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

5、绑定click事件

　　给元素绑定click事件，可以用如下方法：

$(‘#btn1‘).click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})
<!DOCTYPE html>
<html>
<head>
    <mate charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn01").click(function(){

                //绑定click事件
                // if($(".box").hasClass("col01")){
                //     $(".box").removeClass("col01");
                // }
                // else{
                //     $(".box").addClass("col01");
                // }
                //简化
                $(".box").toggleClass("col01")
            })

        })
    </script>
    <style type="text/css">
        .box{
            width:100px;
            height:100px;
            background-color:gray;
            color:green;
            font-size:20px;
        }
        .col01{
            background-color:gold;
            color:white;
        }
    </style>
</head>
<body>
    <input type="button" name="" value="切换模式" id="btn01" />
    <div class="box">这是一个div元素</div>
</body>
</html>

　　获取元素的索引值

　　有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取。

var $li = $(‘.list li‘).eq(1);
alert($li.index()); // 弹出1
......
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<!DOCTYPE html>
<html>
<head>
    <mate charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            var $li=$(".list li");
            alert($li.length);
            alert($li.eq(1).index());
            alert($li.filter(".myli").index())
        })
    </script>
    <style type="text/css">
        
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li class="myli">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

　　选项卡

<!DOCTYPE html>
<html>
<head>
    <mate charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            var $btns=$(‘.btns input‘);
            var $divs=$(‘.cons div‘);

            alert($btns.length);
            alert($divs.length);

            $btns.click(function(){
                //　this指的是原生的this，它表示当前点击的对象，只能使用类似this.style.color等属性
                // $(this)是jquery的this，表示指示的地方，可随指示变换

                //当前点击的按钮加上current样式后，同级的去除current样式
                $(this).addClass("current").siblings().removeClass("current");
                alert($(this).index())
                $divs.eq($(this).index()).addClass("active").siblings().removeClass("active")

            });
        })
    </script>
    <style type="text/css">
        .btns{
            width:120px;
            height:30px;
            border:0;
        }
        .btns .current{
            background-color: gold;
        }
        .cons div{
            width:100px;
            height:100px;
            background-color:green;
            display:none;
        }
        .cons .active{
            display:block;
        }
    </style>
</head>
<body>
    <div class="btns">
        <input type="button" name="" value="01" class="current">
        <input type="button" name="" value="02">
        <input type="button" name="" value="03">
    </div>
    <div class="cons">
        <div class="active">选项卡１的内容</div>
        <div>选项卡2的内容</div>
        <div>选项卡3的内容</div>
    </div>    
</body>
</html>

6、jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $(‘#div1‘).fadeIn(1000,‘swing‘,function(){
            alert(‘done!‘);
        });

    });

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
<!DOCTYPE html>
<html>
<head>
    <mate charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn").click(function(){
                $(".box").fadeToggle(1000,"swing");
            });
        });
    </script>
    <style type="text/css">
        
    </style>
</head>
<body>
    <input type="button" name="" value="动画" id="btn">
    <div class="box" style="color:red">这是第一个测试</div>
</body>
</html>

7、jquery链式调用

　　jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$(‘#div1‘) // id为div1的元素
.children(‘ul‘) //该元素下面的ul子元素
.slideDown(‘fast‘) //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children(‘ul‘) //这些兄弟元素中的ul子元素
.slideUp(‘fast‘);  //高度实际高度变换到零来隐藏ul元素

8、jquery动画

　　通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

$(‘#div1‘).animate({
    width:300,
    height:300
},1000,‘swing‘,function(){
    alert(‘done!‘);
});

　　参数可以写成数字表达式：

$(‘#div1‘).animate({
    width:‘+=100‘,
    height:300
},1000,‘swing‘,function(){
    alert(‘done!‘);
});

9、尺寸相关、滚动事件

　　9.1 获取和设置元素的尺寸

width()、height()    获取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

　　9.2 获取元素相对页面的绝对位置

　　 offset() 

　　9.3 获取浏览器可视区宽度高度

$(window).width();
$(window).height();

　　9.4 获取页面文档的宽度高度

$(document).width();
$(document).height();

　　9.5 获取页面滚动距离

$(document).scrollTop();  
$(document).scrollLeft();

　　9.6 页面滚动事件

$(window).scroll(function(){  
    ......  
})

10、jquery属性操作

　　10.1 html()取出或设置html内容

// 取出html内容

var $htm = $(‘#div1‘).html();

// 设置html内容

$(‘#div1‘).html(‘<span>添加文字</span>‘);

　　10.2 prop()取出或设置某个属性的值

// 取出图片的地址

var $src = $(‘#img1‘).prop(‘src‘);

// 设置图片的地址和alt属性

$(‘#img1‘).prop({src: "test.jpg", alt: "Test Image" });

11、jquery循环

　　　　对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法:

$(function(){
    $(‘.list li‘).each(function(i){
        $(this).html(i);
    })
})
......
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

12、jquery事件

　　事件函数列表：

blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单

　　绑定事件的其他方式：

$(function(){
    $(‘#div1‘).bind(‘mouseover click‘, function(event) {
        alert($(this).html());
    });
});

　　取消绑定事件

$(function(){
    $(‘#div1‘).bind(‘mouseover click‘, function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind(‘mouseover‘);

    });
});

13、事件冒泡

　　13.1 事件冒泡的定义

　　　　在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）　

　　13.2 事件冒泡的作用

　　　　事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

　　13.3 阻止事件冒泡

　　　　事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止：

$(function(){
    var $box1 = $(‘.father‘);
    var $box2 = $(‘.son‘);
    var $box3 = $(‘.grandson‘);
    $box1.click(function() {
        alert(‘father‘);
    });
    $box2.click(function() {
        alert(‘son‘);
    });
    $box3.click(function(event) {
        alert(‘grandson‘);
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert(‘grandfather‘);
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

　　13.4 阻止默认行为

　　　　阻止表单提交

$(‘#form1‘).submit(function(event){
    event.preventDefault();
})

　　13.5 合并阻止操作

　　　　实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用：

// event.stopPropagation();
// event.preventDefault();

// 合并写法：
return false;

14、事件委托

　　事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

　　一般绑定事件的写法：

$(function(){
    $ali = $(‘#list li‘);
    $ali.click(function() {
        $(this).css({background:‘red‘});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

　　事件委托的写法：

$(function(){
    $list = $(‘#list‘);
    $list.delegate(‘li‘, ‘click‘, function() {
        $(this).css({background:‘red‘});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

15、jquery元素节点操作

　　15.1 创建节点

var $div = $(‘<div>‘);
var $div2 = $(‘<div>这是一个div元素</div>‘);

　　15.2 插入节点

　　　　（1）append()和appendTo()：在现存元素的内部，从后面插入元素

var $span = $(‘<span>这是一个span元素</span>‘);
$(‘#div1‘).append($span);
......
<div id="div1"></div>

　　　　（2）prepend()和prependTo()：在现存元素的内部，从前面插入元素

　　　　（3）after()和insertAfter()：在现存元素的外部，从后面插入元素

　　　　（4）before()和insertBefore()：在现存元素的外部，从前面插入元素

　　15.3 删除节点

　　　　 $(‘#div1‘).remove(); 

16、滚轮事件与函数节流

　　jquery.mousewheel插件使用

　　jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。

　　函数节流

　　javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

17、json

　　json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

　　javascript自定义对象：

var oMan = {
    name:‘tom‘,
    age:16,
    talk:function(s){
        alert(‘我会说‘+s);
    }
}

　　json格式的数据：

{
    "name":"tom",
    "age":18
}

　　说明:与javascript对象不同的是，json数据格式的属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

　　json的另外一个数据格式是数组，和javascript中的数组字面量相同。

　　 ["tom",18,"programmer"] 

18、ajax和jsonp

　　ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

　　同步和异步

　　现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。

　　局部刷新和无刷新

　　ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

　　同源策略

　　ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。

　　$.ajax使用方法

　　　　常用参数：

　　　　（1）url　请求地址

　　　　（2）type 请求方式，默认是"get"，常用的还有"post"

　　　　（3）dataType 设置返回的数据格式，常用的是"json"格式，也可以设置为"html"

　　　　（4）data 设置发送给服务器的数据

　　　　（5）success 设置请求成功后的回调函数

　　　　（6）error 设置请求失败后的回调函数

　　　　（7）async 设置是否异步，默认值是"true"，表示异步

　　　　以前的写法：

$.ajax({
    url: ‘js/data.json‘,
    type: ‘GET‘,
    dataType: ‘json‘,
    data:{‘aa‘:1}
    success:function(data){
        alert(data.name);
    },
    error:function(){
        alert(‘服务器超时，请重试！‘);
    }
});

　　　　新的写法：

$.ajax({
    url: ‘js/data.json‘,
    type: ‘GET‘,
    dataType: ‘json‘,
    data:{‘aa‘:1}
})
.done(function(data) {
    alert(data.name);
})
.fail(function() {
    alert(‘服务器超时，请重试！‘);
});

// data.json里面的数据： {"name":"tom","age":18}

　　jsonp

　　ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性。jsonp和ajax原理完全不一样，不过jquery将它们封装成同一个函数。

$.ajax({
    url:‘js/data.js‘,
    type:‘get‘,
    dataType:‘jsonp‘,
    jsonpCallback:‘fnBack‘
})
.done(function(data){
    alert(data.name);
})
.fail(function() {
    alert(‘服务器超时，请重试！‘);
});

// data.js里面的数据： fnBack({"name":"tom","age":18});

　　例子：获取360搜索关键词联想数据

$(function(){
    $(‘#txt01‘).keyup(function(){
        var sVal = $(this).val();
        $.ajax({
            url:‘https://sug.so.360.cn/suggest?‘,
            type:‘get‘,
            dataType:‘jsonp‘,
            data: {word: sVal}
        })
        .done(function(data){
            var aData = data.s;
            $(‘.list‘).empty();
            for(var i=0;i<aData.length;i++)
            {
                var $li = $(‘<li>‘+ aData[i] +‘</li>‘);
                $li.appendTo($(‘.list‘));
            }
        })        
    })
})

//......

<input type="text" name="" id="txt01">
<ul class="list"></ul>

19、本地存储

　　本地存储分为cookie，以及新增的localStorage和sessionStorage

　　19.1 cookie

　　　　cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。

jquery 设置cookie
$.cookie(‘mycookie‘,‘123‘,{expires:7,path:‘/‘});
jquery 获取cookie
$.cookie(‘mycookie‘);

　　19.2 localStorage

　　　　localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。

/设置：
localStorage.setItem("dat", "456");
localStorage.dat = ‘456‘;

//获取：
localStorage.getItem("dat");
localStorage.dat

//删除
localStorage.removeItem("dat");

　　19.3 sessionStorage

　　　　sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。

　　　　localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据的更新通知监听者，Web Storage的api接口使用更方便。

20、jqueryUI

　　jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。　　

　　jqueryUI 网址：http://jqueryui.com/

四、jQuery

标签：ddc   find   The   jquery属性   过滤   other   callback   object   回调   

原文地址：https://www.cnblogs.com/nuochengze/p/12715591.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！