1, 什么是 jQuery?
jQuery 是一个快速, 小巧, 功能丰富的 JavaScript 库. 它通过易于使用的 API 在大量浏览器中运行, 使得 HTML 文档遍历和操作, 事件处理, 动画和 Ajax 变得更加简单. 具有多功能性和可扩展性的结合. jQuery 封装了我们开发过程中常用的一些功能, 方便我们调用, 提高开发效率. 就是把我们常用的功能放到一个单独的文件中, 我们用的时候, 直接引用到页面里即可.
jQuery 核心: write Less,do more
关于 jQuery 的相关资料:
官网: http://jquery.com/
官网 API 文档: http://api.jquery.com/
汉化 API 文档: http://www.css88.com/jqapi-1.9/
2, 为什么使用 jQuery
知道 jQuery 肯定会写 JS 代码, 但是在工作中, 老板相比于你的技术, 更加注重你的效率, jQuery 不仅能帮你提高效率, 还能解决一些这样那样的问题:
Windows.onload 事件有事件覆盖的问题, 因此只能写一个事件.
代码容错性差.
浏览器兼容性问题.
书写很繁琐, 代码量多.
代码很乱, 各个页面到处都是.
动画效果很难实现.
3,jQ 的特点
链式编程: 比如. show() 和. HTML() 可以连写成. show().HTML().
隐式迭代: 隐式 对应的是 显式. 隐式迭代的意思是: 在方法的内部进行循环遍历, 而不用我们自己再进行循环, 简化我们的操作, 方便我们调用.
4, 引入 jQ
首先, 想用 jQ 库, 你得下载一下吧? 不下载就想用? 哪来那种好事情.
先访问官网: https://jquery.com/ 或者是访问 www.bootcdn.cn
在这里我打开了 www.bootcdn.cn, 然后找到它.
我们只需要看这两个内容就可.
生产环境的模块大小比开发环境的模块小很多, 减少资源占用.
将链接复制, 在一个新的网页上打开, 就可以看到其中封装的全部内容.
最后, 在你的项目目录下创建一个 JS 文件或文件夹, 将网页上的内容全部复制进 JS 文件, 之后就可以在 HTML 页面通过如下代码将其引用并使用.
<script src="jquery.js 的文件路径" type="text/javascript" charset="utf-8"></script>
jQuery.JS 中将 jQuery 变量赋值给了 $ 符号.
可以用 console.dir($) 到网页上查看一下 [右键检查, 点击 Console]
- <script type="text/javascript">
- console.dir($);
- </script>
会有一堆这种东西, 说明导入成功:
ƒ jQuery( selector, context )
Animation: ƒ Animation( elem, properties, options )
Callbacks: ƒ ( options )
Deferred: ƒ ( func )
Event: ƒ ( src, props )
Tween: ƒ Tween( elem, options, prop, end, easing )
active: 0
Ajax: ƒ ( url, options )
ajaxPrefilter: ƒ ( dataTypeExpression, func )
ajaxSettings: {url: "file:///E:/%E8%80%81%E7%94%B7%E5%AD%A9py21%E6%9C%9...day49/03%20jquery%E7%9A%84%E4%BD%BF%E7%94%A8.html", type: "GET", isLocal: true, global: true, processData: true, ...}
ajaxSetup: ƒ ( target, settings )
ajaxTransport: ƒ ( dataTypeExpression, func )
attr: ƒ ( elem, name, value )
5,jq 对象和 JS 对象的互相转换
jq 转为 JS:
jq 中封装了大量的 JS 方法, 方便了我们的调用, 但是得到的是一个伪数组, 有数组的长度属性, 可以利用索引获得其中的内容.
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- </head>
- <body>
- <div id="box" class="box"> 小马过河 </div>
- <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
- <script type="text/javascript">
- console.log($('.box'));
- console.log($('#box')[0]);
- console.log($('.box')[0]);
- </script> </body> </HTML>
- $('.box') #jQuery 对象
- $('#box')[0] #jQuery 对象转换为 JS 对象, 通过 id 选择器获取
- $('.box')[0] #jQuery 对象转换为 JS 对象, 通过类选择器获取
JS 转为 jq:
jQuery 只是封装了一部分 JS 的 API, 有些没有封装的时候就要转换为 JS 对象, 用 JS 来写 jQuery 没有封装的模块
- <div id="box" class="box"> 小马过河 </div>
- <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
- <script type="text/javascript">
- // 通过 id 获取到 JS 对象
- var box=document.getElementById('box')
- console.log($(box));
- console.log(box);
- </script>
$(box) jQuery 对象
box JS 对象
6, 选择器
它提供了一组方法, 让我们更加方便的获取到页面中的元素.
基础选择器:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <div>
- </div>
- <div id="box">
- </div>
- <div class="box">
- </div>
- <div class="box">
- </div>
- <div>
- </div>
- <script type="text/javascript" src="jquery-3.3.1.js">
- </script>
- <script type="text/javascript">
- // 入口函数
- $(function() {
- // 三种方式获取 jQuery 对象
- var jqBox1 = $("#box"); // id 选择器
- var jqBox2 = $(".box"); // 类选择器
- var jqBox3 = $('div'); // 标签选择器
- // 操作标签选择器
- jqBox3.CSS('width', '100');
- jqBox3.CSS('height', 100);
- jqBox3.CSS('background-color', 'red');
- jqBox3.CSS('margin-top', 10);
- // 操作类选择器 (隐式迭代, 不用一个一个设置)
- jqBox2.CSS("background", "green");
- jqBox2.text('哈哈哈')
- // 操作 id 选择器
- jqBox1.CSS("background", "yellow");
- })
- </script>
- </body>
- </HTML>
高级选择器:
重点是 口袋选择器 和 子代选择器.
- <!DOCTYPE HTML>
- <HTML>
- <head lang="en">
- <meta charset="UTF-8">
- <title>
- </title>
- <script src="jquery-3.3.1.js">
- </script>
- <script>
- $(function() {
- // 获取 ul 中的 li 设置为粉色
- // 后代: 儿孙重孙曾孙玄孙....
- var jqLi = $("ul li");
- jqLi.CSS("margin", 5);
- jqLi.CSS("background", "pink");
- // 子代: 亲儿子
- var jqOtherLi = $("ul>li");
- jqOtherLi.CSS("background", "red");
- });
- </script>
- </head>
- <body>
- <ul>
- <li>
- 111
- </li>
- <li>
- 222
- </li>
- <li>
- 333
- </li>
- <ol>
- <li>
- aaa
- </li>
- <li>
- bbb
- </li>
- <li>
- ccc
- </li>
- </ol>
- </ul>
- </body>
- </HTML>
基本的过滤选择:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 基本过滤选择器
- </title>
- </head>
- <body>
- <ul>
- <li>
- 哈哈哈哈, 基本过滤选择器
- </li>
- <li>
- 嘿嘿嘿
- </li>
- <li>
- 天王盖地虎
- </li>
- <li>
- 小鸡炖蘑菇
- </li>
- </ul>
- </body>
- <script src="jquery-3.3.1.js">
- </script>
- <script type="text/javascript">
- $(function() {
- // 获取第一个 :first , 获取最后一个 :last
- // 奇数
- $('li:odd').CSS('color', 'red');
- // 偶数
- $('li:even').CSS('color', 'green');
- // 选中索引值为 1 的元素 *
- $('li:eq(1)').CSS('font-size', '30px');
- // 大于索引值 1
- $('li:gt(1)').CSS('font-size', '50px');
- // 小于索引值 1
- $('li:lt(1)').CSS('font-size', '12px');
- })
- </script>
- </HTML>
属性选择器:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <div id="box">
- <h2 class="title">
- 属性元素器
- </h2>
- <!--<p class="p1"> 我是一个段落 </p>-->
- <ul>
- <li id="li1">
- 分手应该体面
- </li>
- <li class="what" id="li2">
- 分手应该体面
- </li>
- <li class="what">
- 分手应该体面
- </li>
- <li class="heihei">
- 分手应该体面
- </li>
- </ul>
- <form action="" method="post">
- <input name="username" type='text' value="1" checked="checked" />
- <input name="username1111" type='text' value="1" />
- <input name="username2222" type='text' value="1" />
- <input name="username3333" type='text' value="1" />
- <button class="btn-default">
- 按钮 1
- </button>
- <button class="btn-info">
- 按钮 1
- </button>
- <button class="btn-success">
- 按钮 1
- </button>
- <button class="btn-danger">
- 按钮 1
- </button>
- </form>
- </div>
- </body>
- <script src="jquery-3.2.1.js">
- </script>
- <script type="text/javascript">
- $(function() {
- // 标签名 [属性名] 查找所有含有 id 属性的该标签名的元素
- $('li[id]').CSS('color', 'red');
- // 匹配给定的属性是 what 值得元素
- $('li[class=what]').CSS('font-size', '30px');
- //[attr!=value] 匹配所有不含有指定的属性, 或者属性不等于特定值的元素
- $('li[class!=what]').CSS('font-size', '50px');
- // 匹配给定的属性是以某些值开始的元素
- $('input[name^=username]').CSS('background', 'gray');
- // 匹配给定的属性是以某些值结尾的元素
- $('input[name$=222]').CSS('background', 'greenyellow');
- // 匹配给定的属性是以包含某些值的元素
- $('button[class*=btn]').CSS('background', 'red')
- })
- </script>
- </HTML>
筛选选择器:[对象调用方法]
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <div id="box">
- <p class="p1">
- <span>
- 我是第一个 span 标签
- </span>
- <span>
- 我是第二个 span 标签
- </span>
- <span>
- 我是第三个 span 标签
- </span>
- </p>
- <button>
- 按钮
- </button>
- </div>
- <ul>
- <li class="list">
- 2
- </li>
- <li>
- 3
- </li>
- <li>
- 4
- </li>
- <li>
- 5
- </li>
- </ul>
- </body>
- <script src="jquery-3.2.1.js">
- </script>
- <script type="text/javascript">
- // 获取第 n 个元素 数值从 0 开始
- $('span').eq(1).CSS('color', '#FF0000');
- // 获取第一个元素 :first :last 点语法 :get 方法 和 set 方法
- $('span').last().CSS('color', 'greenyellow');
- $('span').first().CSS('color', 'greenyellow');
- // 查找 span 标签的父元素 (亲的)
- $('span').parent('.p1').CSS({
- "width": '200px',
- 'height': '200px',
- "background": 'red'
- });
- // 选择所有的兄弟元素 (不包括自己)
- $('.list').siblings('li').CSS('color', 'red');
- // 查找所有的后代元素
- $('div').find('button').CSS('background', 'yellow');
- // 不写参数代表获取所有子元素.
- $('ul').children().CSS("background", "green");
- $('ul').children("li").CSS("margin-top", 10);
- </script>
- </HTML>
7, 简单的动画效果
显示和隐藏:
- // 方式一: 通过 show(时间, 回调函数) 显示, hide(时间, 回掉函数) 隐藏.
- <HTML>
- <head>
- <meta charset="utf-8">
- <title></title>
- <style>
- #box{
- width: 200px;
- height: 200px;
- background-color: red;
- display: none;
- }
- </style>
- </head>
- <body>
- <button id="btn"> 显示 </button>
- <div id="box"></div>
- <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript">
- $('#btn').click(function(){
- if($(this).text() === '显示'){
- $('#box').show(1000,function(){
- $('#btn').text('隐藏');
- });
- }else{
- $('#box').hide(1000,function(){
- $('#btn').text('显示');
- });
- }
- })
- </script>
- </body>
- </HTML>
- ----------------------------------------------------
- // 方式二: 开关式显示隐藏动画 toggle
- // 通过 toggle(2000) 进行切换操作
- <HTML>
- <head>
- <meta charset="utf-8">
- <title></title>
- <style>
- #box{
- width: 200px;
- height: 200px;
- background-color: red;
- display: none;
- }
- </style>
- </head>
- <body>
- <button id="btn"> 显示 </button>
- <div id="box"></div>
- <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript">
- $('#btn').click(function(){
- $('#box').stop().toggle(2000);
- })
- </script>
- </body>
- </HTML>
滑入滑出:
滑入动画效果:
下拉动画
$(selector).slideDown(speed, 回调函数);
滑出动画效果:
上拉动画
$(selector).slideUp(speed, 回调函数);
滑入滑出切换动画效果:
- $(selector).slideToggle(speed, 回调函数);
- ------------------------------------------------
- <!DOCTYPE HTML>
- <HTML>
- <head lang="en">
- <meta charset="UTF-8">
- <title>
- </title>
- <style>
- div { width: 300px; height: 300px; display: none; background-color: green;
- }
- </style>
- <script src="jquery-3.3.1.js">
- </script>
- <script>
- $(function() {
- // 点击按钮后产生动画
- $("button:eq(0)").click(function() {
- // 滑入动画: slideDown(毫秒值, 回调函数 [显示完毕执行什么]);
- $("div").slideDown(2000,
- function() {
- alert("动画执行完毕!");
- });
- })
- // 滑出动画
- $("button:eq(1)").click(function() {
- // 滑出动画: slideUp(毫秒值, 回调函数 [显示完毕后执行什么]);
- $("div").slideUp(2000,
- function() {
- alert("动画执行完毕!");
- });
- }) $("button:eq(2)").click(function() {
- // 滑入滑出切换 (同样有四种用法)
- $("div").slideToggle(1000);
- })
- })
- </script>
- </head>
- <body>
- <button>
- 滑入
- </button>
- <button>
- 滑出
- </button>
- <button>
- 切换
- </button>
- <div>
- </div>
- </body>
- </HTML>
淡入淡出:
淡入动画效果:
$(selector).fadeIn(speed, callback);
淡出动画效果:
$(selector).fadeOut(1000);
淡入淡出切换动画效果:
- $(selector).fadeToggle('fast', callback);
- -----------------------------------------------
- <!DOCTYPE HTML>
- <HTML>
- <head lang="en">
- <meta charset="UTF-8">
- <title>
- </title>
- <style>
- div { width: 300px; height: 300px; display: none; /* 透明度 */ opacity: 0.5;
- background-color: red; }
- </style>
- <script src="jquery-3.3.1.js">
- </script>
- <script>
- $(function() {
- // 点击按钮后产生动画
- $("button:eq(0)").click(function() {
- // // 淡入动画用法 1: fadeIn(); 不加参数
- $("div").fadeIn();
- // // 淡入动画用法 2: fadeIn(2000); 毫秒值
- // $("div").fadeIn(2000);
- // // 通过控制 透明度和 display
- // 淡入动画用法 3: fadeIn(字符串); slow 慢: 600ms normal 正常: 400ms fast 快: 200ms
- // $("div").fadeIn("slow");
- // $("div").fadeIn("fast");
- // $("div").fadeIn("normal");
- // 淡入动画用法 4: fadeIn(毫秒值, 回调函数 [显示完毕执行什么]);
- // $("div").fadeIn(5000,function () {
- // alert("动画执行完毕!");
- // });
- })
- // 滑出动画
- $("button:eq(1)").click(function() {
- // // 滑出动画用法 1: fadeOut(); 不加参数
- $("div").fadeOut();
- // // 滑出动画用法 2: fadeOut(2000); 毫秒值
- // $("div").fadeOut(2000); // 通过这个方法实现的: display: none;
- // // 通过控制 透明度和 display
- // 滑出动画用法 3: fadeOut(字符串); slow 慢: 600ms normal 正常: 400ms fast 快: 200ms
- // $("div").fadeOut("slow");
- // $("div").fadeOut("fast");
- // $("div").fadeOut("normal");
- // 滑出动画用法 1: fadeOut(毫秒值, 回调函数 [显示完毕执行什么]);
- // $("div").fadeOut(2000,function () {
- // alert("动画执行完毕!");
- // });
- }) $("button:eq(2)").click(function() {
- // 滑入滑出切换
- // 同样有四种用法
- $("div").fadeToggle(1000);
- }) $("button:eq(3)").click(function() {
- // 改透明度
- // 同样有四种用法
- $("div").fadeTo(1000, 0.5,
- function() {
- alert(1);
- });
- })
- })
- </script>
- </head>
- <body>
- <button>
- 淡入
- </button>
- <button>
- 淡出
- </button>
- <button>
- 切换
- </button>
- <button>
- 改透明度为 0.5
- </button>
- <div>
- </div>
- </body>
- </HTML>
自定义动画:
语法:
$(selector).animate({params}, speed, callback);
作用: 执行一组 CSS 属性的自定义动画.
第一个参数表示: 要执行动画的 CSS 属性 (必选)
第二个参数表示: 执行动画时长 (可选)
第三个参数表示: 动画执行完后, 立即执行的回调函数 (可选)
- <!DOCTYPE HTML>
- <HTML>
- <head lang="en">
- <meta charset="UTF-8">
- <title>
- </title>
- <style>
- div { position: absolute; left: 20px; top: 30px; width: 100px; height:
- 100px; background-color: green; }
- </style>
- <script src="jquery-3.3.1.js">
- </script>
- <script>
- jQuery(function() {
- $("button").click(function() {
- var JSON = {
- "width": 500,
- "height": 500,
- "left": 300,
- "top": 300,
- "border-radius": 100
- };
- var json2 = {
- "width": 100,
- "height": 100,
- "left": 100,
- "top": 100,
- "border-radius": 100,
- "background-color": "red"
- };
- // 自定义动画
- $("div").animate(JSON, 1000,
- function() {
- $("div").animate(json2, 1000,
- function() {
- alert("动画执行完毕!");
- });
- });
- })
- })
- </script>
- </head>
- <body>
- <button>
- 自定义动画
- </button>
- <div>
- </div>
- </body>
- </HTML>
8,jq 对属性的操作
attr() 添加
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title></title>
- <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript">
- // $(function(){}) 此段代码中, 将 jq 引入以及其代码放在了 head 中, 默认情况
下, 代码从上到下进行执行, 这样会存在问题, 而这段代码就是解决这个问题, 意思是 等待 body 中的文档全部加载完成后再
加载这个函数中的内容
- $(function(){
- // attr 给 p 标签添加一个属性
- $('p').attr('title','mjj');
- // attr 给 p 标签添加多个属性
- $('p').attr({'a':1,'b':2});
- // 获取 p 标签中的 id 值
- console.log($('p').attr('id'));
- </script>
- </head>
- <body>
- <p id="box">mjj</p>
- </body>
- </HTML>
removeAttr() 删除
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <script src="js/jquery.js" type="text/javascript" charset="utf-8">
- </script>
- <script type="text/javascript">
- $(function() {
- // attr 给 p 标签添加一个属性
- $('p').attr('title', 'mjj');
- // attr 给 p 标签添加多个属性
- $('p').attr({
- 'a': 1,
- 'b': 2
- });
- // removeAttr 删除一个标签
- $('p').removeAttr('title');
- // removeAttr 删除多个标签
- $('p').removeAttr('title id a');
- })
- </script>
- </head>
- <body>
- <p id="box">
- mjj
- </p>
- </body>
- </HTML>
-----------------------------------------------------------------------------------
prop 获取当前节点对象的属性, 和 attr 相比, 在使用 checked[默认] 时, prop 能显示出当前的默认值, 而 attr 不能:[prop 能看到所有的属性, attr 查看的属性是对象的本身属性时, 有时查看有问题]
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <script src="js/jquery.js" type="text/javascript" charset="utf-8">
- </script>
- <script type="text/javascript">
- $(function() {
- // 获取到的 chcked 的值为 chcked
- console.log($('input[type=radio]').eq(0).attr('checked'));
- // 获取当前对象的所有属性
- console.log($('input[type=radio]').eq(0));
- // 通过 prop 查看 checked 的属性值为 true
- console.log($('input[type=radio]').eq(0).prop('checked'));
- console.log($('input[type=radio]').eq(0).prop('formAction'));
- console.log($('input[type=radio]').eq(0).attr('type'));
- $('input[type=radio]').eq(0).attr('a', 1);
- console.log($('input[type=radio]').eq(0));
- })
- </script>
- </head>
- <body>
- <input type="radio" name='sex' checked='checked'>
- 男
- <input type="radio" name='sex'>
- 女
- </body>
- </HTML>
9, 文档的操作
增:
语法一: 父元素. append(子元素)------ 后置追加
子元素可以是标签, 也可以是文本, JS 节点对象
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- </head>
- <body>
- <div id="box">
- <h4>
- 太白
- </h4>
- </div>
- <button id="btn">
- 按钮
- </button>
- <script src="js/jquery.js" type="text/javascript" charset="utf-8">
- </script>
- <script type="text/javascript">
- $(function() {
- // 插入文本
- $('#box').append('mjj');
- // 插入标签
- $('#box').append('<h2>wusir</h2>');
- // 插入 JS 节点对象 [需要先创建对象]
- var oH3 = document.createElement('h3');
- oH3.innerText = '女神';
- $('#box').append(oH3);
- // 插入 jq 对象, append 方法插入 jq 对象, 相当于移动操作, 会把 jq 对象移动到插入的地方, 比如创建一个对象 <h4 > 太白 </h4> 放在最前面, 使用 append 会将其放在 女神下面
- $('#box').append($('h4')); --------------------------------------------------------------------------
- // 对追加的内容添加 CSS 样式时, 需要再写一句:
- $('h2').CSS('color', 'red');
- })
- </script>
- </body>
- </HTML>
语法二: 子元素. appendTo(父元素) ------ 后置追加
子元素可以是标签, 也可以是文本, JS 节点对象
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- </head>
- <body>
- <div id="box">
- <h4>
- 太白
- </h4>
- </div>
- <button id="btn">
- 按钮
- </button>
- <script src="js/jquery.js" type="text/javascript" charset="utf-8">
- </script>
- <script type="text/javascript">
- $(function() {
- $('<a href="#"> 百度一下 </a>').appendTo('#box'); ----------------------------------------------------------------------
- // 对追加的子元素进行 CSS 样式设置时:
- $('<a href="#"> 百度一下 </a>').appendTo('#box').CSS('color', 'yellow');
- })
- </script>
- </body>
- </HTML>
前置追加: 父. prepend(子)
子元素可以是标签, 也可以是文本, JS 节点对象
$('#box').prepend('<p>hello world</p>');
插入:
兄弟元素. after(要插入的兄弟元素);
要插入的兄弟元素. inserAfter(兄弟元素);
- $('ul').after('<h4 > 我是一个 h3 标题 </h4>')
- $('<h5 > 我是一个 h2 标题 </h5>').insertAfter('ul')
兄弟元素. before(要插入的兄弟元素);
要插入的兄弟元素. inserBefore(兄弟元素);
- $('h2').before('mjj2');
- $('<h3 > 女神 </h3>').insertBefore('h2');
替换:
- $(要被替换的元素).replaceWith(新的元素);
- $('h3').replaceWith('000000');
删:
$(selector).remove(); 删除节点后, 事件也会删除 (简言之, 删除了整个标签)
- // 点击 button 按钮, 则触发这个事件:
- $('#btn').click(function(){
- // 点击事件触发, 就有弹窗提示
- alert(1);
- // 移除这个按钮, 且有返回值
- $(this).remove();
- // 获取到删除的内容的返回值
- console.log($(this).remove());
- ---------------------------------------------
- // 验证事件也随之删除: 将按钮删除后, 再次插入, 再点击时, 不会有弹窗 1 的出现
- $('#box').after($(this).remove());
$(selector).detach(); 删除节点后, 事件会保留
- // 点击 button 按钮, 则触发这个事件:
- $('#btn').click(function(){
- // 点击事件触发, 就有弹窗提示
- alert(1);
- // 移除这个按钮,
- $(this).detach();
- ---------------------------------------------
- // 验证事件不删除: 将按钮删除后, 再次插入, 再点击时, 会有弹窗 1 的出现
- $('#box').after($(this).detach());
$(selector).empty(); 清空选中元素中的所有后代节点
- // 点击 button 按钮, 则触发这个事件:
- $('#btn').click(function(){
- // 点击事件触发, 就有弹窗提示
- alert(1);
- // 清空这个标签中的所有内容
- $('#box').HTML(' ');
- // 清空这个标签中的所有内容
- $('#box').empty();
10, 事件
事件有传播性, 从父级别传播到子级别
鼠标事件:
鼠标移动:
.mouseover[移入] 鼠标穿过父级元素和子元素都会调用方法
.mouseout[移出]
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <style type="text/css">
- #box{ width: 100px; height: 40px; background-color: red; position: relative;
- } #child{ width: 400px; height: 100px; background-color: #000; position:
- absolute; top: 40px; display: none; }
- </style>
- </head>
- <body>
- <div id="box">
- <div id="child">
- </div>
- </div>
- <input type="text">
- <script src="js/jquery.js" type="text/javascript" charset="utf-8">
- </script>
- <script type="text/javascript">
- $('#box').mouseover(function() {
- console.log('移入进来了');
- $('#child').slideDown(1000); // 显示子元素
- }) $('#box').mouseout(function() {
- console.log('移除了');
- $('#child').slideUp(1000); // 隐藏子元素
- })
- </script>
- </body>
- </HTML>
.mouseenter 移入鼠标穿过父级元素才会调用方法
.mouseleave 移出
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <style type="text/css">
- #box{ width: 100px; height: 40px; background-color: red; position: relative;
- } #child{ width: 400px; height: 100px; background-color: #000; position:
- absolute; top: 40px; display: none; }
- </style>
- </head>
- <body>
- <div id="box">
- <div id="child">
- </div>
- </div>
- <input type="text">
- <script src="js/jquery.js" type="text/javascript" charset="utf-8">
- </script>
- <script type="text/javascript">
- $('#box').mouseenter(function() {
- console.log('进来了');
- $('#child').stop().slideDown(1000);
- }) $('#box').mouseleave(function() {
- console.log('离开了');
- $('#child').stop().slideUp(1000);
- })
- </script>
- </body>
- </HTML>
jq 中的 hover:
$().hover(function(){},function(){}) 需要两个回掉函数, 第一个是显示, 第二个是隐藏
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <style type="text/css">
- #box{ width: 100px; height: 40px; background-color: red; position: relative;
- } #child{ width: 400px; height: 100px; background-color: #000; position:
- absolute; top: 40px; display: none; }
- </style>
- </head>
- <body>
- <div id="box">
- <div id="child">
- </div>
- </div>
- <input type="text">
- <script src="js/jquery.js" type="text/javascript" charset="utf-8">
- </script>
- <script type="text/javascript">
- $('#box').hover(function() {
- $('#child').stop().slideDown(1000);
- },
- function() {
- $('#child').stop().slideUp(1000);
- })
- </script>
- </body>
- </HTML>
鼠标点击:
聚焦和失焦:
$('input[type=text]').focus(function(){}) 聚焦
$('input[type=text]').blur(function(){}) 失焦
- // 默认加载页面聚焦行为
- $('input[type=text]').focus();
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <style type="text/css">
- #box{ width: 100px; height: 40px; background-color: red; position: relative;
- } #child{ width: 400px; height: 100px; background-color: #000; position:
- absolute; top: 40px; display: none; }
- </style>
- </head>
- <body>
- <div id="box">
- <div id="child">
- </div>
- </div>
- <input type="text">
- <script src="js/jquery.js" type="text/javascript" charset="utf-8">
- </script>
- <script type="text/javascript">
- $('input[type=text]').focus(function() {
- // 聚焦
- console.log('聚焦了');
- }) $('input[type=text]').blur(function() {
- // 聚焦
- console.log('失去焦点了');
- })
- </script>
- </body>
- </HTML>
键盘操作
键盘按下和弹起:
在这里, 介绍一个方法, 输入的字符转为 ascii 码, 这样能做判断, 在按下回车时, 提交 input 中的内容.
e.keyCode
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <style type="text/css">
- #box{ width: 100px; height: 40px; background-color: red; position: relative;
- } #child{ width: 400px; height: 100px; background-color: #000; position:
- absolute; top: 40px; display: none; }
- </style>
- </head>
- <body>
- <div id="box">
- <div id="child">
- </div>
- </div>
- <input type="text">
- <script src="js/jquery.js" type="text/javascript" charset="utf-8">
- </script>
- <script type="text/javascript">
- $('input[type=text]').keydown(function(e) {
- console.log(e.keyCode);
- switch (e.keyCode) {
- case 8:
- $(this).val(' ') break;
- default:
- break;
- }
- })
- </script>
- </body>
- </HTML>
表单功能:
阻止当前 from 表单的默认行为:
- <from action="javascript:void(0);">
- ------------------------------------
jq 中有一个阻止方法, 是
- $('from')(function(e){
- e.preventDefault();
- })
阻止 a 标签的默认跳转:
- <a href="javascript:void(0);">
- 百度游戏啊
- </a>
- <a href="javascript:;">
- 百度游戏啊
- </a>
- 11,Ajax
什么是 Ajax:
Ajax = 异步的 JavaScript 和 xml(Asynchronous JavaScript and xml)
简言之, 在不重载整个网页的情况下, Ajax 通过后台加载数据, 并在网页上进行显示.
通过 jQuery Ajax 方法, 您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本, HTML,xml 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中.
示例:
参数如下:
url: 要求为 String 类型的参数,(默认为当前页地址) 发送请求的地址.
success:
要求为 Function 类型的参数, 请求成功后调用的回调函数, 有两个参数.
(1) 由服务器返回, 并根据 dataType 参数进行处理后的数据.
(2) 描述状态的字符串. function(data, textStatus){ //data 可能是 xmlDoc,jsonObj,HTML,text 等等
error: 要求为 Function 类型的参数, 请求失败时被调用的函数. 该函数有 3 个参数, 即 XMLHttpRequest 对象, 错误信息, 捕获的错误对象 (可选).Ajax 事件函数如下: function(XMLHttpRequest, textStatus, errorThrown){ // 通常情况下 textStatus 和 errorThrown 只有其中一个包含信息 this; // 调用本次 Ajax 请求时传递的 options 参数 }
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- </head>
- <body>
- <div id="box">
- </div>
- <script src="js/jquery.js" type="text/javascript" charset="utf-8">
- </script>
- <script type="text/javascript">
- $(function() {
- // 获取首页的数据
- $.Ajax({
- url: 'https://api.apeland.cn/api/banner/',
- methods: 'get',
- success: function(res) {
- console.log(res);
- if (res.code === 0) {
- var cover = res.data[0].cover;
- var name = res.data[0].name;
- console.log(cover);
- $('#box').append(` < img src = $ {
- cover
- }
- alt = $ {
- name
- } > `)
- }
- },
- error: function(err) {
- console.log(err);
- }
- })
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3086908.html