01-老马jQuery教程-jQuery入口函数及选择器

1.什么是jQuery?

1.1 jQuery介绍

jQuery是一个轻型、快速的、小巧的功能丰富的JavaScript类库。本质就是一堆js的函数的组合。对原生DOM操作做了一些非常有用的封装,可以让开发人员更简单、更方便、更统一的对DOM进行操作,比如:封装了事件相关统一操作api、DOM操作的API、Ajax、样式操作、动画的基础类库等。而且尽量屏蔽了浏览器的兼容性,而且提供了强大的可扩展性,成为了目前非常流行的前端开发框架之一。

1.2 为什么要学习jQuery

虽然前端的MVVM开发模式已经进入各个公司和各个开发人员的视野,而且也异常火爆。为什么还要学习jQuery呢?

  • 很多老的项目都是jQuery开发的,所以jQuery还会运行很长时间。
  • jQuery有助于刚入门的开发人员,更深入的理解原生DOM的开发方式
  • jQuery库封装的的确非常经典,做一下小项目和简单的项目足够支撑
  • 第三方类库太丰富!

jQuery的理念:write less,do more

1.3 jQuery相关资料

1.3 关于jQuery的版本说明

  • 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最好版本在1.7.2 以上。 下载地址:http://code.jquery.com/jquery-1.11.3.min.js
  • 2.x:不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,一般不要用,直接要么用3.x版本,兼容低版本浏览器就用1.x就行了。 下载地址:http://code.jquery.com/jquery-2.1.4.min.js
  • 3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。 下载地址:http://jquery.com/download/
  • 同一版本分类 jQuery每一个版本又分为压缩版和未压缩版:
    • jquery.js:未压缩版本(开发版本),代码可读性高,推荐在开发和学习阶段使用,方便查看源代码。
    • jquery.min.js:压缩版本,去除了注释、换行、空格、并且将一些变量替换成了a,b,c之类的简单字符,基本没有可读性,推荐在项目生产环境使用,因为文件较小,减少网络压力。
  • jQuery3.0多出来一个精简版(Slim) 精简版就是剔除了ajax模块和effects模块,精简版的文件比为未精简版要小很多,压缩和未压缩跟上面的区别一样。
    • jQuery.Slim.js:未压缩精简版
    • jQuery.Slim.min.js:压缩精简版

    image.png

1.4 jQuery的安装

2.入口函数介绍

2.1window.onload事件的问题

在之前DOM课 中咱们已经说过用window的onload事件作为JS代码的入口,时机并不好。因为window.onload事件是在页面的图片、第三方脚本、样式等都下载和加载完成后才会触发。而我们希望是页面的HTML的文档树对象可进行交互就立即绑定DOM的事件和做一些初始化工作。所以之前的DOM时代的兼容代码

/**
 * @description 当页面的文档树加载完成后,可以进行交互就立即触发回调函数执行
 * @param {function} callback -页面加载完成后调用的回调函数
 * @return {undefined} 返回undefined
 */
document.myReady = function(callback) {
  // jQuery实现文档加载完成后 事件的原理。
  // 封装标准浏览器和ie浏览器
  if(document.addEventListener) {
    document.addEventListener('DOMContentLoaded', callback, false);
  } else if(document.attachEvent) {
    // 兼容IE8及以下的浏览器。
    document.attachEvent('onreadystatechange', function(){
      // 当文档的状态变为:interactive表示,文档dom对象可以进行访问。
      if(document.readyState == "interactive") {
        callback(window.event);
      }
    });
  } else {  // 其他特殊情况
    window.onload = callback;
  }
};

2.2 jQuery类型引入HTML页面中

  • 引入jQuery文件(注意路径)
<script src="../code/lib/jquery.js"></script>
  • 忘记引包或者引包在入口函数的后面

2.3 jQuery对于页面加载完成入口函数的封装

jQuery内部帮我们做好了页面加载完成的封装,而且时机正是页面的文档加载完成,而不是window.onload. 而且对于页面中的iframe等子页面也做了兼容处理。直接用如下的方法进行使用:

// 第一种方式: 给document绑定ready事件。
$(document).ready(function(){
    //  ....此处是页面DOM加载完成的入口
});

// 第二种方式:直接给jQuery的全局函数传入一个回调函数
$(function(){
   //  ....此处是页面DOM加载完成的入口
});

参考代码:

  <script>
    // DOM
    // window.onload = function() {
    //   var btn = document.getElementById('btn');
    //   btn.onclick = function(e) {
    //     alert(this.value);
    //   }
    // };
    window.onload = function () {
      console.log('load')
    }

    // **** 推荐使用这种。!!
    // jQuery 占用了两个全局变量, $ === jQuery // true
    $(function () {
      // 页面加载完成后,自动执行
      console.log('ready1')

      var btn = document.getElementById('btn');
      btn.onclick = function (e) {
        alert(this.value);
      }
    }); // $是一个函数对象,jQuery构造函数。

    jQuery(function () {

    });

    // 文档加载完成后自动执行回调函数。
    $(document).ready(function () {
      console.log('ready2')
    });
  </script>
  <input type="button" id="btn" value="123">

3.jQuery的选择器

3.1 dom选择的痛点

  • ie8以下的浏览器不支持标准DOM的querySelector方法。强大的CSS选择器没有用武之地。
  • ie8以下的浏览器仅仅支持以下搜索的方法:
    • document.getElementById(id)
    • document.getElementsByTagName(tag)
    • document.getElementsByName(name)
  • `chideNode、nextSibling等节点操作方法也很不灵活

我们迫切希望,能用querySelector()或者querySelectorAll()这样的CSS选择器选择DOM元素节点的灵活方法。

jQuery的1.x版本支持ie6~8浏览器,而且还支持丰富的CSS选择器选择元素。

3.2 id选择器

id选择器就是根据标签的id获取dom的包装对象。

var $div = $('#id');  // $div 不是dom对象是jQuery的包装对象。

3.3 jQuery的包装对象和DOM对象

通过jQuery的选择器选择出来的对象都是jQuery的包装对象,里面封装了jQuery的很多API方法,后续我们会一一学习。

这里简单说一点: jQuery包装对象本身是一个伪数组,选择器返回的所有的DOM元素都会存在jQuery的包装对象中,并且还有很多其他的jQuery特有的api。

jQuery的包装对象和DOM对象的相互转换。

  • jQuery包装对象 → DOM对象
var $div = $('#id'); 
var domDiv = $div[0];
  • DOM对象→jQuery包装对象
var domDiv = document.getElmentById('divId');
var $div = $(domDiv); 
// 等同如下代码:
var $div = $('#divid');

上课源码:

<input type="button" value="按钮" id="btn">
  <script>
  // dom
  // window.onload = function() {
  //   document.getElementById('btn');
  // }

  // jQuery
  $(function(){
    // 页面的文档加载完成后
    var $btn = $('#btn'); // #代表id选择器。
    //jQuery的构造函数:
    // 第一种用法:可以接受一个回调函数,回调就是在页面加载完成后执行。
    // 第二种用法:还可以接受一个css的选择器(string),返回选择器对应dom节点的jQuery包装对象。

    // 我们一般给jQuery的对象加一个$.

    console.dir($btn);
    // jQuery包装对象(所有的选择器选择返回的对象都是jQuery的包装对象。也就是一个伪数组)
    // jQuery包装对象 和dom对象相互转换。
    var btn = $btn[0]; // jQuery → DOM

    // dom 对象转换  jQuery
    var $btn2 = $(btn); // jQuery构造函数的第三种用法: 接受一个dom对象,转成jQuery的包装对象。
    console.dir($btn2)

    // 转成jQuery的包装对象之后 ,就拥有了jQuery.fn上的方法api
  });
  </script>

3.4 其他简单选择器

名称

用法

描述

ID选择器

$("#id");

获取指定ID的元素

全选选择器

$('*');

匹配所有元素

类选择器

$(".class");

获取同一类class的元素

标签选择器

$("div");

获取同一类标签的所有元素

并集选择器

$("div,p,li");

使用逗号分隔,只要符合条件之一就可。获取所有的div、p、li元素

交集选择器标签指定式选择器)

$("div.redClass");

注意选择器1和选择器2之间没有空格,class为redClass的div元素,注意区分后代选择器。

3.5 层级选择器

名称

用法

描述

子代选择器

$("ul>li");

使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素

后代选择器

$("ul li");

使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

3.6 过滤选择器

过滤选择器都带冒号

语法

用法

描述

:first

$('li:first');

获取第一个元素

:last

$('li:last');

获取最后个元素

:contains(text)

$("div:contains('John')")

匹配包含给定文本的元素

:not(selector)

$("input:not(:checked)")

去除所有与给定选择器匹配的元素

:eq(index)

$("li:eq(2)").css("color", "red");

获取到的li元素中,选择索引号为2的元素,索引号index从0开始。

:odd

$("li:odd").css("color", "red");

获取到的li元素中,选择索引号为奇数的元素

:even

$("li:even").css("color", "red");

获取到的li元素中,选择索引号为偶数的元素

  • 案例:隔行变色
  $(function(){
      $("tr:odd").css('backgroundColor', '#eee')
      $("tr:even").css('backgroundColor', '#ddd')
    });

  // 上课代码:
 $(function(){
      // 获得奇数行的tr标签
      var oddTrs = $('tr:odd');
      // console.dir(oddTrs);
      // // DOM原始的写法,很麻烦,需要进行遍历。
      // for(var i = 0; i < oddTrs.length; i++) {
      //   var domTr = oddTrs[i]; // 拿到dom的tr标签对象。
      //   domTr.style.backgroundColor = "#eee";
      // }

      // jQuery提供隐式迭代的用法
      // jQuery设置dom的元素样式,提供了方法css('styleName', 'value')
      // 如果传一个参数,代表获取,传两个参数代表设置。
      oddTrs.css('backgroundColor', '#aaa');
      // jQuery:如果包装对象里面元素是多个时候,做设置操作会影响包装对象中的所有dom对象。
      // 但是获取值,只会返回第一个元素的值。

      // 拿到所有的偶数行
      $('tr:even').css('backgroundColor', '#eee');

    });

上课代码:

<body>
  <p>我是一个短路</p>
  <div class="cd">
    我是的一个div1
  </div>
  <div class="cd">
      我是的一个div2
  </div>
  <div class="cd2">
      我是的一个div2
      laoma
  </div>
  <h3 tm="属性">标题标签</h3>
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

  <script>
    $(function(){
      // 全部选择器,选择页面中所有的标签元素。
      var $all = $('*');
      console.dir($all);

      // 类选择器
      var $cd = $(".cd");
      console.dir($cd);

      var div1 = $cd[0];
      console.log(div1.innerHTML);

      // 标签选择器和并集选择器
      console.dir($('div, h3'));

      // 交集选择器
      console.dir($('div.cd2'));

      // 过滤选择器和后代选择器
      console.dir($('.list li:first'));

      // 包含选择器
      var $div = $('div:contains("laoma")');
      // 如果选择器返回的是多个元素的时候,那么返回第一个元素的内部文本
      console.log($div.text());// jQuery获取选择元素的内部文本。
      var domDiv = $div[0];
      // var str = domDiv.textContent ? domDiv.textContent : domDiv.innerText;
      console.log(domDiv.innerHTML);
    });
  </script>
</body>

3.7 属性选择器

用法

说明

$("p[attr]")

选取所有该p标签且具有attr属性的节点

$("p[attr=a_value]")

选取所有p标签且具有attr属性并满足属性值为a_value的节点

$("p[attr^=a_value_head]")

选取所有p标签且attr属性的属性值是以a_value_head开头的

$("p[attr$=a_value_end]")

选取所有p标签且attr属性的属性值是以a_value_end结尾的

$("p[attr*=a_value")

选取所有p标签且attr属性的属性值中包含a_value

3.8 筛选方法

语法

用法

说明

parent()

$("#first").parent();

查找父亲

children(selector)

$("ul").children("li")

相当于$("ul>li"),子类选择器

find(selector)

$("ul").find("li");

相当于$("ul li"),后代选择器

siblings(selector)

$("#first").siblings("li");

查找兄弟节点,不包括自己本身。

nextAll([expr])

$("div:first").nextAll()

查找当前元素之后所有的同辈元素。

prevtAll([expr])

$("div:first").prevAll()

查找当前元素之前所有的同辈元素

hasClass(class)

$('div').hasClass("protected")

检查当前的元素是否含有某个特定的类,如果有,则返回true。

eq(index)

$("li").eq(2);

相当于$("li:eq(2)"),index从0开始

not(exp)

$("p").not("#selected")

删除与指定表达式匹配的元素

4. 互斥选择案例

 <table>
    <tr>
      <td>用户名</td>
      <td>年龄</td>
      <td>联系</td>
    </tr>
    <tr>
      <td>老马1</td>
      <td>20</td>
      <td>qq:515154084</td>
    </tr>
    <tr>
      <td>弗兰德</td>
      <td>23</td>
      <td>332</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
  <script>
    $(function(){
      // jQuery可以通过 原型上的click方法进行绑定点击事件。
      // $('tr');// 选择到了所有的tr
      $('tr').click(function(e){  // 存在隐式迭代。
        // 点击了当前行, 那么让当前行 背景高亮,让其他的兄弟节点背景不高亮。
        // jQuery的事件处理程序中。 this依然指向 绑定事件dom对象。
        $(this).css('backgroundColor', '#ccc');
        // 拿到多个兄弟节点,隐式迭代全部设置背景为白色。
        $(this).siblings().css('backgroundColor', '#fff');
      });
    });
  </script>

5. 综合练习

有html代码如下:

<table>
  <tr>
    <th><span class="pl20">编号</span></th>
    <th><span class="pl120">课程名称</span></th>
    <th><span>价格</span></th>
    <th><span>购买/试听</span></th>
    <th><span>发布时间</span></th>
    <th><span>状态</span></th>
    <th><span>操作</span></th>
  </tr>
</table>
 <div class="finance-pt">
    <table cellpadding="0" class="finance-form">
      <thead>
        <tr>
          <th colspan="2">必读数据</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <a href="#">市场热点</a>
          </td>
          <td>
            <a href="#">微博舆情</a>
          </td>
        </tr>
        <tr class="la">
          <td>
            <a href="#">A股热图</a>
          </td>
          <td>
            <a href="#">美股热图</a>
          </td>
        </tr>
        <tr>
          <td>
            <a href="#zz">环球股指</a>
          </td>
          <td>
            <a id="md" href="#dd">实时大单</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  • 搜索样式类为:pl20的单元格。
$('.pl20');
  • 搜索具有colspan属性的th标签
$('th[colspan]');
  • 搜索id=md的标签
$('#md');
  • 搜索.finance-form下面的所有的td标签
$('.finance-form td');
  • 搜索tr.la的所有的兄弟标签
$('tr.la').siblings();

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

JS-DOM2级事件对象跨浏览器处理(已封装)

3328
来自专栏noteless

javaweb请求编码 url编码 响应编码 乱码问题 post编码 get请求编码 中文乱码问题 GET POST参数乱码问题 url乱码问题 get post请求乱码 字符编码

然后使用      65------>$ 另外一种解码方式解读,显然A就变成了$,这不就是乱码了么

773
来自专栏偏前端工程师的驿站

HTML语义化:HTML5新标签——template

一、前言                                 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就...

2309
来自专栏IMWeb前端团队

Zepto源码分析之form模块

前言 JavaScript最初的一个应用场景就是分担服务器处理表单的责任,打破处处依赖服务器的局面,这篇文章主要介绍zepto中form模块关于表单处理的几个...

18410
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第三天 JavaScript学习【悟空教程】

用户在提交表单时,需要对用户的填写的数据进行校验。本案例只对用户名、密码、确认密码和邮箱进行校验。

791
来自专栏技术墨客

React 列表、键值与表单

例子中使用map方法将每个元素的值*2,最后得到的数组为:[2, 4, 6, 8, 10]。在React中,处理组件数组的方式与之类似。

1013
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(三)innerText与innerHTML、自定义属性

743
来自专栏代码世界

jQuery

jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Docum...

3545
来自专栏有趣的django

20.DOM

定义 文档对象模型(Document Object Model)是一种用于HTML和XML文档的编程接口。 查找元素 1.直接查找 document.getEl...

3285
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式

1004

扫码关注云+社区