一, 简介:
1 关于 jQuery
jQuery 是一个轻量的 js 库, 提供了 dom 选择, 操作, 兼容完善的事件机制和 Ajax 的封装, 使之有更为简便和简捷的去开发 js 程序. JQuery 的底层是 JavaScript, 由于 JavaScript 操作不太方便, 选择器较少, 浏览器兼容是个问题, JavaScript 原生的 Ajax 交互比较繁琐. jQuery 是 JavaScript 众多框架之一.
2 关于 JavaScript
其实 JavaScript 非常强大, 作为后台开发, 我的理解是这样的. JavaScript 由三部分组成: ECMAScript,Bom,DOM.ECMAScript 是原生的基于对象语言, BOM 是浏览器的处理, DOM 是一套接口, JavaScript 支持, 同样 DOM 同样可以被 xml 等使用, 是一套标准接口而已, 不能说就是 JavaScript 的一部分. jQuery 是前端框架, 主要运用了 DOM 和 BOM. 而 ECMAScript 相关的框架包括 node.js, 这是后台语言. 所以很多资料介绍 JavaScript 说是支持前后台的语言, 嗯, 的确是这样子的!
很多前端学习者在纠结到底先学习 JavaScript, 还是直接 jQuery? 这就像后台学习者问道: 跳过 servlet, 直接学习框架怎么样? 我认为学习应该循序渐进, 看完以上介绍, 不妨先学习 JavaScript.
接着, 我们一起来学习 jQuery 怎么样(我也不太会)!
jQuery 参考文档: http://tool.oschina.net/apidocs/apidoc?api=jquery
二, JQuery 的使用
1, 前端编辑器
前端开发工具真不少, 下面推荐几款. Visual Studio Code: https://code.visualstudio.com/ ,webStorm,HBuilder; 支持国产, 用 HBulider 吧.
2,jQuery 库
先要使用 jQuery, 必须要有库文件才能使用. 下载 JQuery 开发库文件到本地, 直接引用(推荐); 或者使用在线库文件.
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
通过前面的介绍, 我们了解了 JQuery 和 JavaScript, 也准备了库和开发工具. 到了学习 jQuery 的时候了, 先要说明: 我不是纯正的前端开发者, 我只负责介绍总结基本的知识, 方便日后继续和深度学习.
三, JQuery 和 JavaScript 对象
很多后台人员傻傻分不清 JavaScript 和 jQuery 对象, JavaScript 对象: var divElement = document.getElementById("a");
jquery 对象: var e=$("#a") --- 按照 id 查询 jQuery 的选择器都有一个明显的标志 "$". 对象转换.
- //1,jQuery 对象 ->JavaScript 对象
- var $div = $("#divID");//jquery 对象(注意这是一个数组, 尽管是通过 id 获取的)
- var divElement = $div[0];//js 对象(方式一)
- var divElement 2= $div.get(0);//js 对象(方式二)
- //2,JavaScript 对象 ->jQuery 对象
- var inputElement = document.getElementById("inputID");//js 对象
- var $input = $(inputElement);//jquery 对象
四, 强大的 JQuery 选择器
通过选择器, 能定位 web 页面中的任何标签. jQuery 有丰富的选择器(9 共类)
1, 基本选择器
也就是最常用的 id 或者 class 或者标签等选择器, 类似 JavaScript 选择器.
"#" 代表 ID 查询,"." 代表 class 查询,"标签名" 代表标签查询.
- //1)查找 ID 为 "div1ID" 的元素
- $("#div1ID"); //"#" 代表 ID 查询
- //2)查找 DIV 元素的个数
- $("div").size() ; //div 元素查询
- //3)查找所有样式是 "myClass" 的元素
- $(".myClass"); //class 查询
- //4)查找所有 ID 为 div1ID,CLASS 为 myClass,P 元素的
- $('#div1ID,.myClass,p'); // 综合查询
通过基本选择器查询不是可以找所有的元素了吗, 为什么还需要其他选择器? 是的, 理论上只要给一个元素 ID, 都可以定位到元素, 那如果我要选择表格中 1,3,5 行呢? 继续.
2, 层次选择器
父子, 兄弟关系的选择器
(1)ancestor descendant 在给定的祖先元素下匹配所有的后代元素(子孙)
(2)parent> child 在给定的父元素下匹配所有的子元素(子)
(3)prev + next 匹配所有紧接在 prev 元素后的 next 元素
(4)prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素
- <form>
- <label>Name:</label>
- <input name="name" />
- <fieldset>
- <label>Newsletter:</label>
- <input name="newsletter" />
- </fieldset>
- </form>
- <input name="none" />
- $("form input"); // 选择 form 中所有 input 子元素(包括孙子)
- // 结果[ <input name="name" />, <input name="newsletter" /> ]
- $("form> input"); // 选择子元素 [ <input name="name" /> ]
- $("label + input") ; // 匹配所有跟在 label 后面的 next input 元素 name="name" />, <input name="newsletter" /> ]
- $("form ~ input"); // 匹配所有跟在 form 后面的所有 input 元素[ <input name="none" /> ]
3, 加强的基本选择器
处理前后左右关系的选择器.
- :first // 获取第一个元素
- :last // 获取最后个元素
- :not(selector) // 去除所有与给定选择器匹配的元素
- :even // 匹配所有索引值为偶数的元素, 从 0 开始计数
- :odd // 匹配所有索引值为奇数的元素, 从 0 开始计数
- :eq(index) // 匹配一个给定索引值的元素
- :gt(index) // 匹配所有大于给定索引值的元素
- :lt(index) // 匹配所有小于给定索引值的元素
- :header // 匹配如 h1, h2, h3 之类的标题元素
- :animated // 匹配所有正在执行动画效果的元素
- <ul>
- <li>list item 1</li>
- <li>list item 2</li>
- <li>list item 3</li>
- <li>list item 4</li>
- <li>list item 5</li>
- </ul>
- $('li:first'); //[ <li>list item 1</li> ]
- <input name="apple" />
- <input name="flower" checked="checked" />
- $("input:not(:checked)")
4, 内容选择器
按照内容选择元素.
- :contains(text) // 内容中包含 text 的元素
- :empty // 内容为空的元素
- :has(selector) // 具有 selector 选择器的元素
- :parent // 父母节点
- <div>John Resig</div>
- <div>George Martin</div>
- <div>Malcom John Sinclair</div>
- <div>J. Ohn
- $("div:contains('John')");//[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]
5, 属性选择器
根据 style 属性选择元素.
- [attribute] // 匹配包含给定属性的元素. 比如 id
- [attribute=value] // 匹配包含给定属性值的元素. 比如 $("input[id='div']");
- [attribute!=value] // 匹配所有不含有指定的属性
- [attribute^=value] // 匹配给定的属性是以某些值开始的元素
- [attribute$=value] // 匹配给定的属性是以某些值结尾的元素
- [attribute*=value] // 匹配给定的属性是以包含某些值的元素
- <input type="checkbox" name="newsletter" value="Hot Fuzz" />
- <input type="checkbox" name="newsletter" value="Cold Fusion" />
- <input type="checkbox" name="accept" value="Evil Plans" />
- $("input[name='accept']");//<input type="checkbox" name="accept" value="Evil Plans" />
- "$(input[name^='newsletter']");//[<input type="checkbox" name="accept" value="Evil Plans" />]
这里就介绍以上 5 种选择器, 这样你就知道接着应该怎么学习剩下的 . 查看文档 "选择器" 内容 http://tool.oschina.net/apidocs/apidoc?api=jquery
好的, 恭喜你. 你学完了 jQuery 最常用, 很重要的一个部分.
五, 文档处理 - DOM
对 JavaScript-DOM 部分的进一步封装, 进而对功能增强和简化操作. 学会看着文档学习, 文章下面实例都是最常见, 使用的方法.
1, 内部插入
append(content)经常用于 ajax 中处理数据使用.
- <!DOCTYPE html>
- <html>
- <head>
- <!-- 声明当前页面的编码集: charset=gbk,gbk2312(中文编码),utf-8(国际编码)-->
- <meta http-equiv="Content-Type" content="text/html; charset=GBK">
- <title>Jquery-DOM 演示</title>
- <!-- 引入 jQuery 在线库 -->
- <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
- <!--
- 作者: 972606984@qq.com
- 时间: 2018-07-15
- 描述: JavaScript 代码块 - JQueryDOM 演示
- -->
- <script type="application/javascript">
- //$(function(){}); 页面初始化
- $(function(){
- var str="<a id='baidu'href='http://www.baidu.com'>百度</a>"
- // 内部追加内容
- $("#a").append(str);
- });
- </script>
- </head>
- <body>
- <div id='a'>
- <!--<a id="baidu" href='http://www.baidu.com'>百度</a>-->
- </div>
- </body>
- </html>
2, 外部插入
方法有这几个, after(content|fn),before(content|fn),insertAfter(content),insertBefore(content). 演示:
- <!DOCTYPE html>
- <html>
- <head>
- <!-- 声明当前页面的编码集: charset=gbk,gbk2312(中文编码),utf-8(国际编码)-->
- <meta http-equiv="Content-Type" content="text/html; charset=GBK">
- <title>Jquery-DOM 演示</title>
- <!-- 引入 jQuery 在线库 -->
- <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
- <!--
- 作者: 972606984@qq.com
- 时间: 2018-07-15
- 描述: JavaScript 代码块 - JQueryDOM 演示
- -->
- <script type="application/javascript">
- //$(function(){}); 页面初始化
- $(function(){
- var str="<a id='baidu'href='http://www.baidu.com'>百度</a>"
- //1, 内部追加内容
- $("#a").append(str);
- //2, 外部插入
- var htmlstr="<p>hello 我在你下面</p>";
- var str2="hello 我在你上面!"
- $("#a").after(htmlstr);
- $("#a").before(str2);
- });
- </script>
- </head>
- <body>
- <div id='a'>
- <!--<a id="baidu" href='http://www.baidu.com'>百度</a>-->
- </div>
- </body>
- </html>
3, 删除节点
删除方法 empty(): 清空指定元素的内容, 彻底删除, 不能恢复.
remove([expr]): 这个方法不会把匹配的元素从 jQuery 对象中删除, 因而可以在将来再使用这些匹配的元素. 但是在 HTML 中不可见.
detach([expr]): 这个方法不会把匹配的元素从 jQuery 对象中删除, 因而可以在将来再使用这些匹配的元素. 与 remove()不同的是, 所有绑定的事件, 附加的数据等都会保留下来.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <!-- 引入 jQuery 在线库 -->
- <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
- </head>
- <script type="application/javascript">
- // 初始化
- $(function(){
- // 清空 u1
- $("#u1").empty();
- // 删除 u2 的第一个元素, 加强的基本选择器
- $("#u2 li:first-child").remove();
- });
- </script>
- <body>
- <ul id="u1">
- <li>live1-1</li>
- <li>live1-2</li>
- </ul>
- <ul id="u2">
- <li id="li1">live2-1</li>
- <li>live2-2</li>
- </ul>
- </body>
- </html>
该部分剩下的内容还有包裹, 替换, 复制, 不一一测试. 到这里, 你已经学完了 jQuery 的选择器和 DOM 操作. 剩下的重点还有: 属性操作, CSS 操作, 事件, AJax(动画方面简单介绍)
六, 属性操作
使用最多的有 attr(), 特别注意这个方法添加的是 HTML 标签属性, 如 img 的 src,a 标签的 href, 不能是 style 属性. removeAttr(), 对应的删除属性. addClass()/removeClass() 添加 / 删除 class 属性
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <!-- 引入 jQuery 在线库 -->
- <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
- <script type="application/javascript">
- $(function(){
- // 给 a 标签添加 HTML 熟悉
- $("#baidu")
- .attr("href","www.baidu.com");
- //$("#baidu").attr("class","baidu"); 也是一样子的.
- $("#baidu").addClass("baidu");
- });
- </script>
- </head>
- <body>
- <a id="baidu">baidu</a>
- </body>
- </html>
七, CSS 操作
css() 获取或者添加 css 属性, height()设置 height 或者获取 height 值. width() 获取或者设置 width 的值.
- $('#a').css('fontSize',"14px");// 设置属性 $('#a').css('fontSize') // 获取 font-size 属性. css 的大部分方法都是同时具有 "获取" 和 "设置" 性质的.
- <!DOCTYPE html>
- <html>
- <meta charset="UTF-8">
- <title></title>
- <!-- 引入 jQuery 在线库 -->
- <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
- <script type="application/javascript">
- $(function(){
- // 给 div 添加内容
- $('#dx').text("1234abcd");
- // 给 div 添加 color 属性
- $('#dx').css("color","chocolate");
- // 控制台打印 width 和 heigth,color
- console.info("heigth:"+ $('#dx').height()+"width:"+$('#dx').width());
- console.info($('#dx').css("fontSize"));//font-size 或者 fontSize 都是可以的
- });
- </script>
- <!--
- 描述: 引入 css 片段
- -->
- <style type="text/css">
- #dx{
- background: blueviolet;
- width: 100px;
- height: 200px;
- font-size: 14px;
- }
- </style>
- </head>
- <body>
- <div id="dx"></div>
- </body>
- </html>
八, JQuery 事件
事件大概可以分为几种. jQuery 事件, 所有标签都有的事件, 标签特定的事件. 举例
(1)ready 要在 DOM 就绪时执行的函数
- $(document).ready(function(){
- // 在这里写你的代码...
- });
(2)bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数.
- $("p").bind("click", function(){
- alert( $(this).text() );
- });
(3)bind()的反向操作, 从每一个匹配的元素中删除绑定的事件.
$("p").unbind();// 把所有段落的所有事件取消绑定
九, Ajax 交互
我们都知道 ajax 用于前后台交互, 相比 JavaScript 原生的 ajax 操作更加简单. ajax 相关的方法有如下. 其中 $.ajax()最底层, 其他函数都是给予它改造.
- $.ajax(url,[settings])
- load(url,[data],[callback])
- $.get(url,[data],[fn],[type])
- $.getJSON(url,[data],[fn])
- $.getScript(url,[callback])
- $.post(url,[data],[fn],[type])
这里来讲解 $.ajax()
API 的解释: 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现. 简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象. 大多数情况下你无需直接操作该函数, 除非你需要操作不常用的选项, 以获得更多的灵活性.
关于回调函数
如果要处理 $.ajax()得到的数据, 则需要使用回调函数. beforeSend,error,dataFilter,success,complete.
beforeSend 在发送请求之前调用, 并且传入一个 XMLHttpRequest 作为参数.
error 在请求出错时调用. 传入 XMLHttpRequest 对象, 描述错误类型的字符串以及一个异常对象(如果有的话)
dataFilter 在请求成功之后调用. 传入返回的数据以及 "dataType" 参数的值. 并且必须返回新的数据 (可能是处理过的) 传递给 success 回调函数.
success 当请求之后调用. 传入返回后的数据, 以及包含成功代码的字符串.
complete 当请求完成之后调用这个函数, 无论成功或失败. 传入 XMLHttpRequest 对象, 以及一个包含成功或错误代码的字符串.
数据类型
通过 dataType 选项还可以指定其他不同数据处理方式. 除了单纯的 XML, 还可以指定 html,json,jsonp,script 或者 text. 其中 JSON 数据使用最为广泛.
个人非常喜欢用 $.ajax(), 他可以实现其他函数的所有功能, 只不过有时操作比较繁琐一点.
- <form>
- <span class="teach_word">Schools list:</span>
- <select id="region" name="region" onchange="ajax_index_Upload(this.value);">
- <option value="Eastern China" selected>Eastern China</option>
- <option value="Southwestern China">Southwestern China</option>
- <option value="North & NW China">North & NW China</option>
- <option value="Southern & Central">Southern & Central</option>
- <option value="Northeastern China">Northeastern China</option>
- <option value="Others">Others</option>
- </select>
- <select name="provinces" id="provinces" onchange="get_linkage_val()">
- <!--<option value="zhejiang">Anhui</option>-->
- </select>
- <a href="/dede/a/Teach_in_China" style="margin-left:370px;">
- <input class="teach_sub" type="button" value="search">
- </a>
- </form>
- function ajax_index_Upload( val )
- {
- var $region = $( "#region" );
- var $provinces = $( "#provinces" );
- $.ajax( {
- type: "POST", // 请求类型 Get 或者 Post 二种
- dataType: "json", // 请求数据类型 json, 另外也支持 jsonp,xml,html
- url: "/dede/templets/default/china_city.php", // 请求路径, 服务器路径
- data: {
- "region": val // 请求数据, json
- },
- success: function( data ){// 数据处理}, //success 回调函数
- error: function( XMLHttpRequest, textStatus ) // 异常回调函数
- {
- alert( XMLHttpRequest.status );
- alert( XMLHttpRequest.readyState );
- alert( textStatus );
- }
- } );
- }
尾声: 本文章介绍了 jQuery 的大部分重要知识, 应该根据 API 文档进行细化学习.
来源: https://www.cnblogs.com/achievement-active/p/9313646.html