WEB前端第四十三课——jQuery框架(一)$()函数、添加事件监听

1.前端进阶之路

  菜鸟级:设计图的还原,就是根据PSD文件写HTML和CSS;

  入门级:加页面特效,轮播图、菜单、选项卡、无缝滚动等;

      HTML5+CSS3炫酷页面、手机端页面;

      Canvas游戏

      jQuery是页面特效的完美解决方案;

  普通级:处理数据,拿到后台工程是的数据,组件页面,Ajax;

  高端级:自己写服务,自己写后台,Node.js;

  大神级:前端架构师,MVC,路由控制,后台协作,Angular,设计模式等。

2.jQuery简介

  官网:https://jquery.com/

  口号:write less, do more.

  本质:是一个快速、简洁的JavaScript框架。

     是继Prototype之后又一个优秀的JavaScript代码库。

  产品线:

    jQuery1.x.x:兼容IE6、7、8等低级版本浏览器

    jQuery2.x.x:从1代中剔除了所有兼容代码,产品更轻量

    jQuery3.x.x:全面支持HTML5和CSS3

  文件引用:

    本地存放,<script src="存放地址"></script>,官方下载jQuery文件

    静态资源公共库(CDN),<script src="三方平台提供的url"></script>,

      第三方类库很多,如节跳动(http://cdn.bytedance.com)、腾讯(https://libs.qq.com)等

    在HTML头部(<head>内)添加引用链接。

3.jQuery基础

  jQuery有非常便利的选择元素的能力,用一个“$()”函数就可以搜寻页面上的元素。

  操作过程:

    ① jQuery操作页面元素一定是从一个“$()”开始的;

    ② $() 函数括号内使用引号,引号中写CSS选择器;

    ③ 然后加上jQuery自己的方法(不能使用 js原生的方法)。

4.$()函数

  ① $() 函数的执行结果(返回值)是“jq”对象,

    “jq”对象是一个包含了满足选择器条件的元素节点的信息集合,可以像数组一样使用,

    “jq”对象可以转换成为 js对象,调用 js方法、属性,

    $()函数可以批量获取和操作元素节点,

    jq 只能调用自己的属性和方法

  代码示例:

<body>
    <div class="divClass"></div>
    <div id="divLast"></div>
    <div class="divClass"></div>
<script>
    var $divs=$('div');     //可以批量获取元素节点
    $divs.css({width:"100px",height:"100px",border:"1px solid darkorange",
    backgroundColor:"lightgreen",margin:"10px"});    //可以批量操作元素节点,但必须使用jQuery自己的方法
    $divs[1].style.backgroundColor="lightblue";    //可以转换成 js的元素节点,使用 js原生方法操作
    console.log($divs);    //返回值为 jQuery对象
    console.log($divs.get(2));    //jQuery获取对象集合中的节点,也可以使用jq自己的 get()方法
</script>
</body>

  ② size()方法和 length属性

    是 jq对象所拥有的,用于访问 jq对象中元素节点的数量

    两种方式都能够获取通过 $()函数得到的页面元素的个数

    语法:var $count = $("div").size();

       var $count = $("div").length;

  ③ jQuery全面支持CSS2.1的选择器

    $("css选择器"),这里所说选择器可以是id选择器、类选择器、标签选择器、包含选择器等css2.1中提到的任意选择器组合。

    语法示例:$("div .span #part") .animate({font-size:"40px"}, 600);

    上述示例函数中传入了一个字符串,而$()函数在内部会采用正则表达式对其进行解析,然后在页面中搜索符合条件的所有元素节点。

  ④ jQuery全面支持CSS3的选择器

    对于css3选择器的支持,简单来说就是支持对象属性选择器、关系选择器的等在css3中提出来的选择器,可以直接在$()中使用。

    语法示例:$("div[id=divBox]").css("background-color","blue");

    css3选择器最大的问题实际就是浏览器的兼容性问题,但是使用jQuery则不存在兼容性问题。

5.jQuery自己的伪类

  作用:从指定的元素节点集合中“筛选”出想要的元素。

    ① 选择器:first,选择指定元素集合中的第一个元素

    ② 选择器:last,选择指定元素集合中的最后一个元素

    ③ 选择器:eq(n),选择指定元素集合中从 0 开始,第 n 个元素

    ④ 选择器:lt(n),选择指定元素集合中从 0 开始,第 n 个元素之前的所有元素(不包含n)

    ⑤ 选择器:gt(n),选择指定元素集合中从 0 开始,第 n 个元素之后的所有元素(不包含n)

    ⑥ 选择器:odd,选择指定元素集合中从 0 开始,所有奇数序号的元素

    ⑦ 选择器:even,选择指定元素集合中从 0 开始,所有偶数序号的元素

  语法:$("选择器 :伪类") .方法/事件;

  其中,“eq(n)” 可以从 $()函数中提出来作为方法使用,如 $("选择器") .eq(n) .方法/事件;,

     但其他的伪类不可以这样使用。

  语法示例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="jQueryFiles/jquery-1.8.3.js"></script>
</head>
<body>
    <table border="1" style="color: orangered;text-align: center" cellspacing="0">
        <tr><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td><td>第六列</td><td>第七列</td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </table>

<script>
    $('tr').css('height','40px');
//    :first
    $('tr:first td').css('width','100px');
//    :last
    $('tr:last').css('background-color','lightpink');
//    :eq(n)
    $('tr:eq(5)').click(function () {
        $(this).css('background-color','skyblue');
        $(this).animate({'height':'60px'},'slow');    //slow\/normal\/fast(字符串),也可以使用毫秒数值。
    });
//    lt(n)/gt(n)
    var backColor='';
    backColor=$('tr:lt(5)').css('background-color');
    $('tr:lt(5)').mouseover(function () {
        $(this).css('background-color','yellowgreen');
    });
    $('tr:lt(5)').mouseout(function () {
        $(this).css('background-color',backColor);
    });
//    table奇数列和偶数列选择
    $('tr td:nth-child(even)').click(function () {
        $(this).text('偶数列');
        $(this).css('color','gray');
    });
    $('tr td:nth-child(odd)').click(function () {
        $(this).text('奇数列');
        $(this).css('color','gold');
    });
</script>
</body>
</html>

  ps:上述“mouseover和mouseout”两个事件可以使用“hover”替代,示例如下:

    $("选择器").hover(overFunction(){}, outFunction(){});

6.$()函数与 jQuery()函数等价

  事实上在 jq中做出了一个声明,这个声明就是“$==jQuery”,即“$()和 jQuery()”两种写法是等价的。

  ps:$() 函数并不是 jq所独有的,在很多其他框架(如prototype框架)中也对“$()”函数做出了声明,

    根据 js语法,同名函数后声明的会覆盖前面的,  

    因此,在工程中如果引入了多个框架,那么使用 jQuery()这种写法是最保险的。

    但是,仅对于jq框架来说,两种写法是等价的。

  jq中规定 $()函数的返回值是一个 jq对象,其职能调用 jq设定的属性和方法。

  jq对象转换为 js原生对象的方式:

    ① $("选择器")[n],使用中括号加索引的方式

    ② $("选择器").get(n),使用 get()方法加索引的方式

  在使用$()函数选择元素节点的时候,括号中需要使用引号,但是下面三种例外:

    $(window)

    $(document)

    $(this)

7.添加监听事件

  jQuery对象采用打点调用方法,在jQuery中给元素添加监听的语法:

    $("选择器").事件名(function(){ });

  因为$()函数获取的是元素集合,所以是对集合中所有元素批量添加监听事件,无需使用for循环语句。

  常用事件名:

    ① click(),单击事件

    ② dbclick(),双击事件

    ③ mouseenter(),鼠标进入

    ④ mouseleave(),鼠标离开

    ⑤ focus(),获取焦点

    ⑥ blur(),失去焦点

  注意,jQuery中添加事件时一律不加“on”前缀;

     同一个对象可以添加多个不同事件,互不影响;

     同一个对象可以添加多个相同事件,不会覆盖,触发顺序与书写顺序一致。

  另外,jQuery中对象绑定事件时还允许使用“链式声明”的方式,不需要重复获取 jq对象。

     链式声明时除最后一个绑定的函数末尾加分号表示绑定结束以外,其余函数后不写任何内容。

    语法示例:$("选择器").事件名1(function(){ })

              .事件名2(function(){ })

              ……  ……;

8.jQuery事件监听的特点

  jq中还提供了很对事件监听的方式:

    ① 通过“on()”方法添加事件监听,通过“off()”方法取消事件监听;

      语法:$("选择器").on("事件名", function(){ });  //添加事件监听

         $("选择器").off("事件名");    //去除事件监听

    ② 通过“bind()”方法添加事件监听

      bind()方法的优点在于,它可以给一个jq对象添加多个不同的事件监听,事件名用“空格”隔开即可。

        语法:$("选择器").bind("事件名1 事件名2 ……", function(){ });

      另外,bind()方法还可以采用JSON形式的参数添加事件监听,添加多个不同事件监听,且拥有不同回调函数。

        语法:$("选择器").bind({事件名1: function(){ }, 事件名2: function(){ }, ……});

    ③ 通过“one()”方法添加事件监听

      one()方法添加的事件监听是“一次性”的,只能执行一次。

        语法:$("选择器").one("事件名", function(){ });

90.大咖分享(弹性布局):

  Flex布局详解(一):https://zhuanlan.zhihu.com/p/163217760

  Flex布局详解(二):https://zhuanlan.zhihu.com/p/164590960

(0)

相关推荐