04 . 前端之JQuery

前端之家收集整理的这篇文章主要介绍了04 . 前端之JQuery前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

JQuery简介

# 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
# 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,
# 能够极大地简化JavaScript编程。它的宗旨就是:“Write less,do more.“
@H_502_20@什么是JQuery?
# JQuery是一个JavaScript函数
# JQuery是一个轻量级的"写的少,做的多"的JavaScript库.可以通过一行简单的标记添加到网页中.

# JQuery库包含以下功能:

# 1. HTML元素选取
# 2. HTML元素操作
# 3. CSS操作
# 4. HTML事件函数
# 5. JavaScript特效和动画
# 6. HTML DOM遍历和修改
# 7. AJAX(不刷新页面同时修改页面内容)
# 8. Utilities

# 除此之外,JQuery还提供了大量的插件
@H_502_20@为什么使用JQuery?
# 目前网络上有大量开源的JS框架,但是JQuery是目前最流行的JS框架,而且提供了大量的扩展.
# 很多大公司都在使用JQuery,例如:
# Google,Microsoft,IBM,Netflix

# JQuery是否适用于所有浏览器
# jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题,目前jQuery兼容于所有主流浏览器,包括Internet Explorer 6!
@H_502_20@JQuery版本

1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)

 

2.x:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)

 

3.x:不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

 

维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持*

@H_502_20@JQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。

 

$(“#i1”).html()的意思是:获取id值为 i1的元素的HTML代码。其中 html()是jQuery里的方法 相当于: document.getElementById(“i1”).innerHTML;

 

虽然 jQuery对象是包装 DOM对象后产生的,但是 jQuery对象无法使用 DOM对象的任何方法,同理 DOM对象也没不能使用 jQuery里的方法

 

一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$:

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例,jQuery对象和DOM对象的使用:

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

Example DOM和JQuery对象的转换

<!DOCTYPE html>
<html lang="en">
<head>
   <Meta charset="UTF-8">
   <title>Title</title>
</head>
   <link rel="stylesheet" href="csswenjian"/>
   <style>

   </style>
<body>
   <div id="i1">123</div>

   <script src="jquery-1.12.4.js"></script>
   <script>
       $("#i1")
   </script>
</body>
</html>
# 打开浏览器访问这个html的console
document.getElementById('i1')
<div id="i1">•123</div>

$('#i1')          
jQuery.fn.init [div#i1,context: document,selector: "#i1"]

$('#i1')[0]
<div id="i1">•123</div>

# JQuery对象[0] => DOM对象
# Dom对象   => $(Dom对象)
@H_502_20@JQuery安装

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法

 

jquery.com 下载 jQuery 库

 

从 CDN 中载入 jQuery,如从 Google 中加载 jQuery

@H_502_20@HTML标签引用JQuery
有两个版本的 jQuery 可供下载:

* Production version - 用于实际的网站中,已被精简和压缩。
* Development version - 用于测试和开发(未压缩,是可读的代码

以上两个版本都可以从 [jquery.com](http://jquery.com/download/) 中下载。

jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
<!DOCTYPE html>
<html lang="en">
<head>
   <Meta charset="UTF-8">
   <title>Title</title>
</head>
   <link rel="stylesheet" href="csswenjian"/>
   <style>

   </style>
<body>
   <div id="i1">123</div>

   <script src="jquery-1.12.4.js"></script>
   <script>
       $("#i1")
   </script>
</body>
</html>

# 将下载的文件放在网页的同一目录下,就可以使用JQuery
@H_502_20@CDN引用JQuery

如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。

 

Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

 

如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你站点用户是国外的可以使用谷歌和微软。 如需从Staticfile CDN、又拍云、新浪、谷歌或微软引用 jQuery,请使用以下代码之一:

Staticfile CDN:

<head>  
<script  src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">  </script>  
</head>

百度CDN

<head>  
<script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">  </script>  
</head>

新浪CDN

<head>  
<script  src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">  </script>
</head>

Google CDN

<head>  
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script>  
</head>
# Google产品在中国很不稳定

Microsoft CDN

<head>  
<script  src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>  
</head>

 

# 使用CDN的JQuery,有一个很大的优势:
# 许多用户访问其他站点时,已经从上面各种CDN加载过JQuery,所以结果是,他们访问你站点时,
# 会从缓存中加载JQuery,这样可以减少加载时间,同时,大多数CDN都可以确保当用户向其请求文件时,
# 会从离最近的服务器上返回响应,这样也可以提高加载速度.

# 在浏览器Console输入 $.fn.jquery可以查看使用的什么版本.

JQuery基础语法

# 通过JQuery,可以选取(查询,query)HTML元素,并对他们执行"操作"(actions).

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <Meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<script>
   $(document).ready(function () {
       // alert("文档加载完毕");
       // 当前函数执行完执行alert弹出框
       $("p").click(function () {
           $(this).hide();
       // 隐藏p元素  
      })
  });
</script>
</body>
</html>
@H_502_20@查找标签

1. 基本选择器 id选择器:

$("#id")

标签选择器

$("tagName")

Class选择器

$(".className")

配合使用

$("div.c1")
// 找到c1 class类的div标签

所有元素选择器

$("*")

组合选择器

$("#id,.className,tagName")

层级选择器 x和y可以为任何选择器

$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

Example1

<!DOCTYPE html>
<html lang="en">
<head>
   <Meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
   <p class="pclass">p1</p>
   <p id="pid">p2</p>
   <button>
       click
   </button>
   <script>
       $(document).ready(function () {
           $("button").click(function () {
               $("p").text("p元素被修改了");
               $(".pclass").text("p元素通过class被修改了");
               $("#pid").text("p元素通过pid被修改了");
          });
      });
   </script>
</body>
</html>

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkBox">
$("input[type='checkBox']");// 取到checkBox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

 

@H_502_20@事件
<!DOCTYPE html>
<html lang="en">
<head>
   <Meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button>Click</button>
<script>
   $(document).ready(function () {
       // $("button").click(function () {
       //     $(this).hide();
           // 单击事件
       // });

       // $("button").dblclick(function () {
           // $(this).hide();
           // 双击事件
       // });

       $("button").mouseenter(function () {
           $(this).hide();
           // 当鼠标放到按钮上触发此事件,
           // mouseleave是鼠标移开按钮触发的事件
      });
  })
</script>
</body>
</html>
@H_502_20@事件之绑定,解除绑定
<!DOCTYPE html>
<html lang="en">
<head>
   <Meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button id="clickBind">ClickBind</button>
<script>
   $(document).ready(function () {
       // $("#clickBind").click(function () {
           // alert("hello")
           // 当我们的事件很多时,这样写非常消耗内存
       // });

       $("#clickBind").bind("click",clickHandler1);
       $("#clickBind").bind("click",clickHandler2);
       // $("#clickBind").unbind("click"); //这种解除绑定会解除所有
       $("#clickBind").unbind("click",clickHandler1()); //解除单一绑定


       $("#clickBind").on("click",clickHandler1);  // bind底层都是使用on,off实现
       $("#clickBind").off("click",clickHandler2);
  });

   function clickHandler1(e) {
       console.log("clickHandler1")
  }
   function clickHandler2(e) {
       console.log("clickHandler2")
  }
</script>
</body>
</html>
@H_502_20@自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
   <Meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
   <button id="ClickMeBtn">Click</button>
   <script>
       var ClickMeBtn
       $(document).ready(function () {
           ClickMeBtn = $("#ClickMeBtn");
           ClickMeBtn.click(function () {
               var e = jQuery.Event("MyEvent");
               ClickMeBtn.trigger(e);
          });

           ClickMeBtn.bind("MyEvent",function(event) {
               console.log(event);
          })
      })
   </script>
</body>
</html>

Example2

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

Example3 多选,全选,反选

<!DOCTYPE html>
<html lang="en">
<head>
   <Meta charset="UTF-8">
   <title>Title</title>
</head>
<body>

   <input type="button" value="全选" onclick="ChackAll()" />
   <input type="button" value="反选" onclick="ReverseAll()" />
   <input type="button" value="取消" onclick="CancleAll()" />


   <table border="1">
       <thead>
           <tr>
               <th>选项</th>
               <th>IP</th>
               <th>Port</th>
           </tr>
       </thead>

       <tbody >
           <tr>
               <td><input type="checkBox"></td>
               <td>1.1.1.1</td>
               <td>80</td>
           </tr>

           <tr>
               <td><input type="checkBox"></td>
               <td>1.1.1.2</td>
               <td>3306</td>
           </tr>
       </tbody>
   </table>

   <script src="jquery-1.12.4.js"></script>
   <script>
       function ChackAll() {
           $(':checkBox').prop('checked',true);
      }

       function CancleAll() {
           $(':checkBox').prop('checked',false);
      }

       function ReverseAll() {
           $(':checkBox').each(function (k) {
               // this代表当前循环的每一个元素
               // 反选,循环出来每个元素,
               //     console.log(k,this)

猜你在找的程序笔记相关文章