jQuery 之 简要介绍 & 加载 & 选取器

jquery介绍

jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

jQuery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系列放弃支持低版本浏览器,目前使用最多的是1.x系列的。

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

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

简介

  • jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
  • jQuery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系列放弃支持低版本浏览器,目前使用最多的是1.x系列的。
  • jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。

    <script type="text/javascript" src="js/jquery-1.12.2.js"></script>
    
  • jquery的口号和愿望 Write Less, Do More(写得少,做得多)

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

学习目标

  1. 知道jQuery常用选择器的写法

  2. 知道jQuery如何操作元素样式

  3. 知道jquery的常用事件

  4. 知道选项卡的基本实现原理

  5. 知道如何制作基本的动画

  6. 了解表单验证的基本原理

jquery加载

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

<script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

可以简写为:

<script type="text/javascript">

$(function(){

     ......

});

</script>

jquery加载

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

    <script type="text/javascript">
    
    $(document).ready(function(){
         ......
    });
    
    </script>
    
  • 可以简写为:

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

03-jquery简介

从javascript语言诞生开始,大量的开发人员使用js来完成页面特效,于是有些人就把自己工作中常用的代码段进行封装成函数或者函数库并开源给所有开发者使用。所以javascript语言中拥有非常多,优秀的工具库。

目前全世界范围内使用最广泛的javascript函数库主要有:jQuery,Vue.js。

其中jQuery是2006年发布的工具库,jQuery简单易用,可以让开发者大量节省使用javscript开发特效的代码。

jquery
简称jQ,写jq代码,本质上就是写js代码。如果以后jQuery代码无法完成的事情,还是会使用js。

jquery的标语 Write Less, Do More有了它,可以用更少的js代码做更多事情。

官方网站:

jquery选择器

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

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

$(document) //选择整个文档对象
$('li') //选择所有的li元素
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素

对选择集进行修饰过滤(类似CSS伪类)

$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素

对选择集进行函数过滤

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

选择集转移

$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素

 

jquery选择器

  • jquery用法思想一

    • 选择某个网页元素,然后对它进行某种操作
  • jquery选择器

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

      $(document) //选择整个文档对象
      $('li') //选择所有的li元素
      $('#myId') //选择id为myId的网页元素
      $('.myClass') // 选择class为myClass的元素
      $('input[name=first]') // 选择name属性等于first的input元素
      $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
      
  • 对选择集进行修饰过滤(类似CSS伪类)

    $('#ul1 li:first') //选择id为ul1元素下的第一个li
    $('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
    $('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
    $('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
    $('#myForm :input') // 选择表单中的input元素
    $('div:visible') //选择可见的div元素
    
  • 对选择集进行函数过滤

    $('div').has('p'); // 选择包含p元素的div元素
    $('div').not('.myClass'); //选择class不等于myClass的div元素
    $('div').filter('.myClass'); //选择class等于myClass的div元素
    $('div').first(); //选择第1个div元素
    $('div').eq(5); //选择第6个div元素
    
  • 选择集转移

    $('div').prev('p'); //选择div元素前面的第一个p元素
    $('div').next('p'); //选择div元素后面的第一个p元素
    $('div').closest('form'); //选择离div最近的那个form父元素
    $('div').parent(); //选择div的父元素
    $('div').children(); //选择div的所有子元素
    $('div').siblings(); //选择div的同级元素
    $('div').find('.myClass'); //选择div内的class等于myClass的元素
    
03.1-jQuery的版本
1.x 系列   兼容低版本的浏览器
2.x 系列   放弃支持低版本浏览器
3.x 系列   放弃支持低版本浏览器
03.2-获取jQuery库

下载地址:

下载回来的jQuery版本文件有两个格式:

jquery-1.12.4.js   未压缩文件(uncompressed)  适用于开发和学习
jquery-1.12.4.min.js 压缩文件(minified)     适用于项目线上运营
03.3-在HTML网页中引入jQuery

jQuery本质上就是一个装满了javascript函数的文件,所以引入jQuery,还是使用script标签即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 把预先下载的jQuery库文件保存在项目根目录下js目录中 -->
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<script>
  // 通过在终端打印$,可以判断 jQuery是否成功引入到当前网页中。
  console.log( $ );
</script>
</body>
</html>
03.4- $的介绍

jQuery提供了大量的javascript操作函数给开发者使用,这些操作函数全部都被封装到了jQuery对象中了。

$则是jQuery的核心对象jQuery对象的缩写,开发中我们都会使用$来调用jQuery库提供的工具方法来完成特效。

总结:

1. jQuery目前我们使用1.x版本,
2. jQuery本质就是js本件,在HTML网页通过script标签的src属性来引入。
3. $是jQ的核心对象jQuery的简写,开发中一般通过$来调用jQuery对象的方法。

04-jQuery入口函数

让js代码可以在页面加载完成以后执行,在之前的学习中我们需要使用window.onload来完成。

在jQuery中,也提供了一个类似的页面加载函数给我们使用。这个函数在jQuery中也称之为”入口函数”。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 把预先下载的jQuery库文件保存在项目根目录下js目录中 -->
  <script src="js/jquery-1.12.4.js"></script>
  <script>
    // 使用jQuery提供的页面加载事件
    $(function(){
      // 获取Id元素
      var title = document.getElementById("title");
      console.log( title );
     });
  </script>
</head>
<body>
  <h1 id="title">大标题</h1>
</body>
</html>

jQuery的入口函数还有另一种写法:

$(document).ready(function(){
​
   ......
​
});
04.1-和window.onload的区别

$(function 和window.onload = function(){}
有点像,但是jq的页面加载函数一个js可以出现很多次,都会被执行(但一般也不会这么写),而如果window.onload在同一个js文件中出现两次或者以上,则只会执行最后一个。

总结:

1. 入口函数,声明格式:
  $(function(){
   // 编写js/jQ代码

  });

2. jQuery的入口函数就是用来替换window.onload=function(){};
  1. 代码更简短
  2. window.onload只能一次,而$(function;可以使用多次。 

05-jQuery获取标签元素

jQuery为了简化js获取元素的操作,参考了css选择器的规则,根据选择器设计了一套获取元素的方法。

05.1-jQuery常用选择器的写法
$('#test')       // 从文档中获取id为test的元素
$('.myClass')     // 从文档中获取所有class为myClass的元素
$('li')        // 从文档中获取所有的li元素
$('#ul1 li span')   // 从文档中获取id为为ul1元素下的所有li下的所有span元素
$('input[name=first]') // 从文档中获取所有name为first的input元素
$("p,h1")       // 从文档中获取所有p元素和h1元素
$(".list li:odd")   // 从文档中获取class为list的所有元素下所有下标为奇数的li
$(".list li:even")   // 从文档中获取class为list的所有元素下所有下标为偶数的li
$("input[name=fav]:checked"); // 获取name为fav的所有被选中状态的input元素,用于多选框

检测是否有获取到元素可以通过返回值[jQuery数组对象]的length属性来观察。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/jquery-1.12.4.js"></script>
  <script>
    $(function(){
      // 存在的元素
      console.log( $("#test") );
      console.log( $("#test").length ); // 1
      // 不存在的元素
      console.log( $("#tttt") );
      console.log( $("#tttt").length ); // 0 表示文档中不存在 id值为tttt的元素
     });
  </script>
</head>
<body>
  <div id="test"></div>
</body>
</html>

结果分析:

1. 使用jQuery获取元素,不管是否获取到元素,返回的都是 jQuery 对象,这个对象是一个类似数组的对象。
2. jQuery这样做的目的有两个:
     2.1 方便开发者获取元素以后直接继续使用jQuery的其他操作方法
     2.2 防止报错

总结:

1. 使用css的选择器,作为$()的参数,可以直接获取html元素,而且可以获取多个
  $   # id选择器
  $  # 类选择器
  $  # 层级选择器
  $  # 群组选择器
2. 不管jQuery使用选择器是否获取到元素,都会返回类似数组的jQuery对象。
​
3. 可以在获取元素以后,直接使用.html获取元素的内容
​
4. 可以在获取元素以后,直接使用.css()操作元素的属性。 
05.2-对选择元素的结果集进行过滤

jQuery还提供了允许我们过滤元素的方法,简化了获取元素的代码操作。

$('div').has('p'); // 选择包含p元素的所有div元素
$('div').not('.myClass'); //选择class不等于myClass的所有div元素
$('div').eq; //选择所有div元素中下标为5的div元素

总结:

1. 工作中最常用的就是通过下标从元素的结果集中过滤元素。
  $.eq
05.3-选择器的关系操作

jQuery中还提供了允许通过标签之间的关系,来选中目标的其他关系元素。

通过指定元素获取其所有子元素等。

在jQuery中除了可以使用选择器来获取元素以外,还可以利用标签之间的嵌套[父子]关系或者并列[兄弟]关系来操作元素

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

总结:

1. 根据元素之间的同级关系来获取元素
  prev();
  prevAll();
  next();
  nextAll();
  siblings();
2. 根据元素之间的嵌套关系来获取元素
  children();
  parent();
  parents();
  find();
3. 更多获取元素的方式:http://www.shouce.ren通过来了解。 

发表评论

电子邮件地址不会被公开。 必填项已用*标注