jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

松鼠MaSaKi

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量550

点赞数

分类专栏： JAVA Basics 文章标签： java web jQuery

本文链接：https://blog.csdn.net/qq_45337431/article/details/100607274

版权

第一节 jQuery概述

1.1 jQuery简介

jQuery是一个快速、简洁的JavaScript库，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

目前jQuery有三个大版本：

1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：2013年2.0版本发布，不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
1.X大版本下，细分版本非常多，各个版本的函数都会有一定的差异。网上看到的很多教程大多是1.x版本的。jquery官方手册

参考文档jQuery中文网、菜鸟教程

1.2 什么是jQuery

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

1.3 为什么要用jQuery

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
很多大公司都在使用 jQuery，例如:

Google
Microsoft
IBM
Netflix

第二节 jQuery安装

2.1 网页中添加 jQuery

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

(1)从 jquery.com 下载 jQuery 最新版本，或从GitHub下载其他版本，下载以后，在web目录下新建js文件夹，然后将两个文件【jquery-1.12.4.js】和【jquery-1.12.4.min.js】导入即可
(2)从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 jquery.com 中下载。
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的

<head>
	<script src="jquery-1.10.2.min.js"></script>
</head>

当然你也可以使用其它网站的CDN：

2.2 百度 CDN

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

2.3 新浪 CDN

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

2.4 Google CDN

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

2.5 Microsoft CDN

<head>
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>

第三节 jQuery语法

jQuery 语法是通过$()核心函数选取 HTML 元素，并对选取的元素执行某些操作。

使用语法1 ： $(selector).action()

美元符号定义 jQuery==$
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

 举例:
 $(this).hide() - 隐藏当前元素
 $("p").hide() - 隐藏所有 <p> 元素
 $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
 $("#test").hide() - 隐藏所有 id="test" 的元素

使用语法2： $(匿名函数)

表示页面dom加载完毕，就执行，比onload事件要早，并且可以写多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery入门</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body onload="doload()">
    <h1>赠汪伦</h1>
    <p>李白乘舟将欲行</p>
    <p>忽闻岸上踏歌声</p>
    <script type="text/javascript">
        function doload(){
    
            alert("onload"); //最后才输出打印
        }
        /*jquery语法*/
        /*语法1*/
        $("p").hide();
        /*语法2*/
        $(function () {
    
           // document.write("hello jQuery!")
            alert("hello jQuery");
        });

        $(function () {
    
            alert("hello jQuery2");
        })

        $(document).ready(function () {
    
            alert("hello jQuery3");
        });
    </script>
</body>
</html>

3.1 jQuery选择器

3.1.1 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>

<h1 id="poemtitle">赠汪伦</h1>
<p>李白乘舟将欲行</p>
<p>忽闻岸上踏歌声</p>
<p class="class2">桃花潭水深千尺</p>
<p class="class2">不及汪伦送我情</p>

<input type="button" onclick="click1()" value="标签选择器">
<input type="button" onclick="click2()" value="id选择器">
<input type="button" onclick="click3()" value="clss选择器">
<script type="text/javascript">
    //标签元素选取
    function click1() {
    
        $("p").hide();
    }
    
    //通过id选取
    function click2() {
    
        $("#poemtitle").css("background-color","skyblue");
    }
    
    //通过类选取
    function click3() {
    
        $(".class2").css("color","blue");
    }
</script>
</body>
</html>

属性选择器 input[type] input[type=‘text’]

结构伪类选择 a:link a:hover

层次选择器空格—— 后代 > 子代

详见《HTML之CSS层叠样式表》

3.2 jQuery事件

3.2.1 什么是事件？

页面访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：

在元素上移动鼠标。
选取单选按钮
点击元素

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseover	keyup	focus	scroll
mouseout		blur	unload

3.2.2 jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：

$("p").click();

下一步是定义触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
   
    // 动作触发后执行的代码!!
});

也就是说，不传参数是点击，传参数是设置事件。

click()
当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个

元素上触发时，隐藏当前的

元素：

$("p").click(function(){
   
  $(this).hide();
});

dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

$("p").dblclick(function(){
   
  $(this).hide();
});

mouseover()
当鼠标指针穿过元素时，会发生 mouseover 事件。
mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数：

$("#p1").mouseover(function(){
   
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

mouseout()
当鼠标指针离开元素时，会发生 mouseout 事件。
mouseout() 方法触发 mouseout 事件，或规定当发生 mouseout 事件时运行的函数：

$("#p1").mouseout(function(){
   
    alert("再见，您的鼠标离开了该段落。");
});

mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

$("#p1").mousedown(function(){
   
    alert("鼠标在该段落上按下！");
});

mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

$("#p1").mouseup(function(){
   
    alert("鼠标在段落上松开。");
});

hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseover);当鼠标移出这个元素时，会触发指定的第二个函数(mouseout)。

$("#p1").hover(
    function(){
   
        alert("你进入了 p1!");
    },
    function(){
   
        alert("拜拜! 现在你离开了 p1!");
    }
);

focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$("input").focus(function(){
   
  $(this).css("background-color","#cccccc");
});

blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$("input").blur(function(){
   
  $(this).css("background-color","#ffffff");
});

3.2.3 案例——鼠标经过表格变色

该案例体现了jQuery的一大特点——（1）链式编程链式调用,（2）隐式迭代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的鼠标经过变色</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
..表格省略
    <script type="text/javascript">
        //（1）链式编程 链式调用,（2）隐式迭代
        // $("#tab1 tr").mouseover(function () {
    
        //     $(this).css("background-color","skyblue");
        // }).mouseout(function () {
    
        //     $(this).css("background-color","white");
        // });
        //hover中有两个属性，一个是mouseover，一个是mouseout，这里可以将两个函数都写进去
        $("#tab1 tr").hover(function () {
    
            $(this).css("background-color","skyblue");
        },function () {
    
            $(this).css("background-color","white");
        });
    </script>
</body>
</html>

第四节 jQuery 效果

4.1 隐藏显示

hide()
您可以使用 hide() 将元素隐藏

$("#hide").click(function(){
   
  $("p").hide();
});

show()
您可以使用show()将元素显示

$("#show").click(function(){
   
  $("p").show();
});

toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){
   
  $("p").toggle();
});

事实上，这三种方法都是有两个参数的：

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback

最低0.47元/天解锁文章

松鼠MaSaKi

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery的使用和语法规则，包括ajax请求
复制链接

扫一扫

专栏目录