学霸初养成 阅读(12) 评论(0)

初识jQuery

什么是jQuery?

jQuery就是JavaScript和Query,是辅助JavaScript开发的库,应用广泛,形成了行业标准。它对DOM操作做了很好的封装,我们可以用jQuery非常方便地来代替DOM操作。

为什么要使用jQuery?

轻量级,最新版本的大小只有85KB;功能强大的选择器;出色的DOM封装;兼容性好(可以在不同浏览器使用);可靠的事件处理机制;完善的Ajax支持;丰富的插件支持。

jQuery的理念是:写得少,做得多(write less,do more)。

如何使用jQuery?

官网去jQuery官网下载最新的jQuery,放在项目文件夹内,在html文件中JS代码上方加入 <script src="jquery-3.3.1.js"></script> 即可。

jQuery对象与DOM对象的相互转化

1. jQuery对象转化成DOM对象

  •  $(DOM对象) = jQuery对象

2.DOM对象转化成jQuery对象

  •  jQuery对象[0] = DOM对象
  •  jQuery对象.get(0) = DOM对象

jQuery大全:http://jquery.cuishifeng.cn/

查找元素

常用选择器

1. 根据 id 找标签

$("#id") 

2. 根据 class 使用样式找标签

<div class="c1"></div>
$(".c1")

3. 根据标签类型寻找

$("a") // 找到所有a标签

4. 组合查找

(用逗号隔开)

<div id='i10' class='c1'>
	<a>f</a>
	<a>f</a>
</div>
<div class='c1'>
	<a>f</a>
</div>
<div class='c1'>
	<div class='c2'> </div>
</div>

$("a,.c2,#i10")  相当于  $("a") + $(".c2") + $("#i10")

5. 层级选择

(用空格隔开)

$("#i10 a") 将id=i10的标签下所有后代a标签找出来
$("#i10>a") 只找子标签,不找孙标签
$("#i10+a") 找到#i10后面的所有a标签(兄弟+兄弟的后代,不包括自己的后代)
$("#i10~a") 找到所有与#i10同层的a兄弟标签

6. 基本选择器

:first 在选择出来的若干个标签中选择第一个
:last  最后一个
:even  奇数
:odd   偶数
:eq()  括号里写索引值,从0开始
:gt()  索引大于
:lt()  索引小于

7. 根据属性查找

自定义了bob属性时,
$("[bob]")            找出所有具有bob属性的标签
$("[bob='123']")      找出bob属性为123的标签

8. 表单

$("input[type='text']")
$(":text")
两者完全等价,后者是一个简写

筛选器

在选择器的基础上再次筛选。

$(this).next()          下一个
          nextAll()       后面的所有标签
          nextUntil("") 向后直到某标签
$(this).prev()          上一个
          prevAll()       前面所有的标签
          prevUntil("") 向前直到某标签
$(this).parent()      父标签
$(this).children()     所有子标签(在children的括号内也可以进一步筛选)如:children("[a='123']")
$(this).siblings()      所有兄弟标签(不包括自己)

first() 第一个 last() 最后一个 find("") 找到具有某样式的标签 hasClass("") 判断是否具有某样式 .eq("")与选择器eq功能相同,只是写法不同

示例:

$('#tb:checkbox').each(function(k){  // .each() 是jQuery使用的循环
	// k当前索引
	// this代指当前循环的每一个元素,为DOM对象
	var v = $(this).prop("checked") ? false : true;
	$(this).prop("checked",v);
})

jQuery方法内置循环: $('#tb:checkbox').操作

操作元素

jQuery支持链式编程,可以将很多操作写入一行

1. 绑定事件

jQuery的绑定事件操作与DOM非常相似

$("input[type='123']").click(函数名或匿名函数);                   jQuery
document.getElementById("").onclick = 函数名或匿名函数;   DOM

2. 样式操作

.addClass("样式");      增加某样式(力度大)
.removeClass("样式");   删除某样式
.hasClass("样式");      判断是否具有某样式,返回true或false
.toggleClass("样式")    多次执行时,交错地删除或添加某样式

.css("color"); 获取color样式的值
.css("display","none") 设置样式(力度小)

3. 文本操作

// 在DOM中,能够以innerText获取文本的操作在jQuery中都用 text()方法
.text()          获取文本内容
.text("内容")    设置文本内容
.html()       获取标签内容
.html("<a>内容</a>")  或 .html("内容")    设置文本内容,效果与上面相同

// 部分标签,如<input>,<select>,<textarea>标签 等原本是value的在这里都是val()
.val()           获取文本
.val("内容")  设置文本

4. 属性操作

// 可以用做自定义属性
.attr("value") 获取属性的值(传入属性名) .attr("value","1") 设置值(传两个参数),可以新增、修改属性 .removeAttr("") 删除属性 // 专门用于checkbox,radio获取、设置值 .prop("checked",true)

如果要判断标签是否具有某属性,不能直接判断其属性值是否等于undefined,【 if(obj.attr("value") == "undefined" ) 】。因为undefined是属于undefined类型,而非字符串。正确的方法是:

if( typeof(对象.attr("属性")) == "undefined" )

5. 索引

.index() 获取此标签在父标签下的索引,常与eq一起用  

6. 标签操作(创建插入删除)

.append("<a>123</a>")  在内部创建标签,添加到末尾
.prepend("<a>123</a>") 添加到内部最前面

.after("")    创建兄弟标签,紧随其后
.before("")   创建兄弟标签,紧随其前

.remove()  删除标签
.empty()   仅删除内容,不删除标签

.clone()   克隆一份 // 如果只克隆标签而不安排位置,标签不会显示出来

7.位置操作

.scrollTop()  获取/调整当前浏览的上下位置
.scrollLeft() 获取/调整当前浏览的水平位置
window是DOM对象,表示整个浏览页面窗口
$(window).scrollTop()     获取当前浏览相对于整个窗口的位置
$(window).scrollTop(0)   返回顶部
  
.offset()          获取指定标签在html中的坐标
.offset().top    距离顶部的坐标
.offset().left    距离左边的坐标

.position()   获取指定标签相对于父标签的坐标(相当于在父标签中relative,子标签中absolute)
        
.height()                 获取标签的纯高度
.innerHeight()         纯高度 + 内边距
.outerHeight()         纯高度 + 内边距 + 边框
.outerHeight(true)   纯高度 + 内边距 + 外边距 + 边框

8.表单提交

a标签、submit按钮,本身具有提交/跳转功能,内置了点击事件。如果我们给此类标签再写一个点击事件,则会优先执行自己写的事件,然后再执行提交提交/跳转功能。如果想要屏蔽原有的功能,根据点击方式的不同,方法也不同。

// 在html中写Onclick事件绑定函数。
html:<a onclick="A();" href="http://www.baidu.com">点击啊</a>
JS:   function A(){alert('123');return false;};

// 在js代码中绑定点击事件函数
$("a").click(function(){
    alert('123');
    return false;
});

两种方式效果相同,且针对 a标签 和 submit 都一样。

9. 其他操作和方法

  • 标签的隐藏和显示

      hide()和show()                   在设置速度的情况下,从隐藏到完全可见的过程中会逐渐地改变高度、宽度、内外边距和透明度

      fadeOut()和fadeIn()           控制透明度直至完全消失/显示

      sildeUp()和sildeDown()     上升消失/下降显示

    以上三对方法都可以直接作用于jQuery对象,实现的本质是改变display样式,不同之处在于隐藏/显示的过程中呈现的视觉效果不同。

    hide/show(speed,callback)   参数:speed表示变化时间:"fast","normal","slow"或直接写时间(毫秒)

                      callback表示回调函数

    调用方法时可以不传入参数,也可以传入两个,但如果传入一个只能是speed。

事件处理

jQuery事件处理主要有四种方法:bind(),delegate(),live(),on()。解除绑定事件分别对应unbind(),undelegate(),die(),off()

bind()支持所有jQuery版本,live()支持jQuery1.9-,delegate()支持1.4.2+,on()支持jQuery1.7+。由于1.9往后的版本不再支持live(),这里不再讲此方法。

bind()和其中的click()方法只能对原本有的标签绑定事件,而不能对动态添加的标签绑定。on(),delegate(),liev()都可以。

bind()、live()或.delegate(),查看源码就会发现,它们实际上调用的都是.on()方法,现在官方推荐on方法,所以大家以后尽量习惯on方法。

页面1:

    <input id="t1" type="text" />
    <input id="a1" type="button" value="添加" />

    <ul id="u1">
        <li id="s1">1</li>
        <li>2</li>
    </ul>
  
<script src="jquery-3.3.1.js"></script>
<script>
    $('#a1').click(function () {
        var v = $('#t1').val();
        var temp = "<li>" + v + "</li>";
        $('#u1').append(temp);
    });
</script>

页面2:

    <input id="btn1" type="button" value="点击1" />
    <input id="btn2" type="button" value="点击2" />
    <a id="a1" href="#">CodePlayer</a>

一、bind() 和 unbind()

.bind("type", {data}, function) 
  参数: type:必需。绑定事件的类型。可以绑定多个,用空格隔开。
      data:可选。传入参数,字典的形式。
      function:必需。执行函数
  我们常用的.click() .mouse()等方法,是bind()的简写。

.unbind("type", function)  删除由bind()方法添加的绑定事件
  参数:type:可选。取消绑定的类型,可以是多个。
      function:可选。取消绑定的函数
  当没有参数时,删除此标签所有由bind()绑定的事件程序。

页面1示例:

$("ul").bind("click",function(){
     var v = $(this).text();
     alert(v);
});

二、delegate() 和 undelegate()

$("#s1").delegate("selector", "type", {data}, function)
  参数:selector:必需。是一个选择器,可选择被点击元素的一个或多个子元素。在这里,并不是为s1绑定事件,而是为筛选后的selector绑定。
        type:必需。绑定事件的类型。可以绑定多个,用空格隔开。
        data:可选。传入参数,字典的形式。
      function:必需。执行函数。

.undelegate("selector", "event", function)  删除由delegate()方法绑定的事件
  参数:selector:可选。同上。
        event:可选。事件,一个或多个
        function:可选。解除指定的函数
  如果没有参数,删除此标签所有由delegate()绑定的事件程序。
  在解除事件函数绑定时,如果使用选择器,必需和绑定时的选择器相同,否则会解除失败。

页面1示例:

        $('ul').delegate('li','click',A);
        function A() {
            var v = $(this).text();
            alert(v);
        }
        $('ul').undelegate("li","click",A); // 解除绑定
        $('ul').children().eq(0).undelegate(); // 解除绑定失败
        $('ul').undelegate("#s1","click",A);   // 解除绑定失败

        // $('ul').delegate('#s1','click',function () {
        //     var v = $(this).text();
        //     alert(v);
        // });

三、on() 和 off()

第一种语法结构:

.on("type", "selector", {data}, function)
  参数:type:必需。同上
     selector:可选。同上。
     data:传入参数。同上。
     function:执行函数。同上。

.off("type", "selector", function)
  参数:type:必需。同上。
     selector:可选。同上。
     function:可选。指定取消绑定的函数。
  如果没有参数,删除此标签所有由on()绑定的事件程序。
  在解除事件函数绑定时,如果使用选择器,必需和绑定时的选择器相同,否则会解除失败。

第二种语法结构:

.on( {object:function(e){ ... }},“selector”,{data} )
  参数:object:必需。事件对象。
     function:必需。执行函数。
     selector:可选。选择器。
     e:可选。形参
     data:可选。

页面1示例:

// 第一种语法结构
$('ul').on('click','li',function () {
    var v = $(this).text();
    alert(v);
});

// 第二种语法结构
$("ul").on({
    mouseenter: function() {
        $(this).css("color","red");
    },
    mouseleave: function() {
        $(this).css("color","black");
    },
    click: function(e) {
        alert(e.data.a);
    }
}, "li",{a:"你好"});

 页面2示例:

    <script>
        function btnClick1(){
          alert( this.value + "-1" );
        }

        function btnClick2(){
          alert( this.value + "-2" );
        }

        var $body = $("body");

        // 给按钮1绑定点击
        $body.on("click", "#btn1", btnClick1 );
        // 给按钮2绑定点击
        $body.on("click", "#btn2", btnClick2 );

        // 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2
        // 点击按钮,btnClick1照样执行
        $body.off("click", ":button", btnClick2); // 发现并不起作用

        // 点击按钮1,不会执行任何事件处理函数
        // $body.off("click", "#btn1");
        
        // 注意: $body.off("click", ":button"); 无法移除btn1的点击事件,off()函数指定的选择器必须与on()函数传入的选择器一致。

    </script>

 四、one()

如果想要绑定一个事件,只想让它运行一次,不用使用解绑函数,用one()一步到位。

.one(event,data,function)
参数:event:必需。事件
        data:可选。参数
        function:必需。执行函数。

 

※ 如何在事件发生时往执行函数内传参呢?

利用事件绑定函数中参数data传入。以on为例。

.on("click",{a:"3",b:"4"},func2);  // 传入参数以字典形式
    function func2(c){
        console.log(c.data["a"]);
        console.log(c.data["b"]);
        console.log(c.data.a); 
        console.log(c.data.b);
    } 

jquery扩展

1.如何理解 $(function(){  ...  }) ?

它等效于 $(document).ready(function(){})。

一般地写好的JavaScript代码,在html代码渲染完成后(完全加载完毕),才执行js代码,包括绑定的事件。如果有较大的图片片,视频等,会导致js代码迟迟不能执行,影响用户体验。

如果在JavaScript代码块内包一层 $(function(){ ... }) ,将所有代码写在这里面,可以解决这一问题。它的意思是,当DOM页面文档框架布局加载完毕后,自动执行里面的代码。

2.jQuery扩展

扩展指的是将扩展内容写到别的文件(.js),在主文件中导入即可直接使用。

// 类方法
$.extend({
    "nihao":function(){
        return "sb";
    }
});
调用:
$.nihao();
//alert($.nihao());

// 对象方法
$.fn.extend({
    "hello":function(){
        return "db";
    }
});
调用:
$("选择器").hello();
//alert(v2);

当引入多个js文件时,可能会出现以下问题:

  • 出现相同的扩展名
  • 出现相同的全局变量

解决办法:一个文件嵌套一个自执行函数,将内部的全局变量变成局部变量。

(function(){ ... })();