jQuery
什么是 jQuery?
jQuery 是轻量级的 JavaScript 库, 核心是 JavaScript, 兼容 CSS 和各种浏览器, 核心理念是写得少做得多(write Less do more).
为什么要学习 jQuery?
因为它有很多优势: 容易上手, 强大的选择器, 节约开发时间, 丰富的 UI, 完善的事件机制, Ajax 的封装.
此外, 补充 jQuery 的一些特性和方法: 链式操作, 回调函数, 迭代器, 延迟对象, 队列.
带 min 与不带 min 两个版本的区别:
a. jQuery-1.11.3.JS --- 开发版: 编写代码的时候可能会出现一些问题, 去看源码的设计思路, 让自己的问题得到解决, 切记: 只是参考, 看看就够了, 千万不要修改.
b. jQuery-1.11.3.min.JS --- 生产版: 当我们的编码全部完成, 测试通过, 要上线, 此时, 换成该版本.
内容和功能全都是相同的, 只是文件大小的问题, 带 min 的是经过压缩以后的, 去掉了所有的空格和换行, 主要是减小占用的空间, 形参进行了更改, 通过工具进行的压缩.
jQuery 版本
1.x.x 兼容性最好的
2.x.x 抛弃了 IE9 以下
3.x.x 浓缩的 2.0 的版本
jQuery 属于说是企业的标准了
jQuery 的插件非常多, 很多的动画都是依赖于 jQuery 完成的
jQuery 库下载网站 --- http://www.jq22.com (免费的)
(注! jQuery-2.0 以上版本不再支持 IE 6/7/8) 并不是最新的版本就最好的, 而是根据您项目需求所适合的版本!)
引入 jQuery 文件:
<script type="text/javascript" src="jquery-1.11.3.js"></script>
或者:
百度压缩版引用地址:
- <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js">
- </script>
微软压缩版引用地址:
- <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js">
- </script>
官网 jQuery 压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
jQuery 的核心函数是: $ === jQuery
函数 | 说明 |
---|---|
jQuery() | 主要用于获取 html DOM 元素并将其封装为 jQuery 对象 |
函数说明
jQuery():
jQuery()函数是 jQuery 库的最核心函数, jQuery 的一切都是基于此函数的. 该函数主要用于获取 HTML DOM 元素并将其封装为 jQuery 对象, 以便于使用 jQuery 对象提供的其他属性和方法对 DOM 元素进行操作.
jQuery()函数的功能非常强大, 它可以将各种类型的参数智能地封装为 jQuery 对象.
- var username = document.getElementsByClassName("username")[0];
- console.log(username) // 输出的是一个 DOM 对象
- username.style.backgroundColor = "#f00";
- var $username = $(".username");
- console.log($username) // 输出的是 jQuery 对象, 是类数组.
- // 不管你用什么方式获取过来的全都是类数组, jQuery 操作也是操作这个类数组
- $username.CSS("color","#fff")
jQuery 对象与 DOM 对象的区别, 联系
DOM 对象: 使用 JavaScript 的方法获取的对象就是 DOM 对象.
jQuery 对象: 使用 jQuery 的方法获取的对象就是 jQuery 对象.
jQuery 对象其实就是 DOM 对象的包装集(包装了 DOM 对象的集合(伪数组))
区别
DOM 对象与 jQuery 对象的方法不能混用.
联系
jQuery 对象与 DOM 对象可以互相转换.
DOM --> jQuery $( domobj)
jQuery --> DOM $li [ 0 ] 或 $li.get( 0 )
- //jQuery 对象 -> dom 对象
- var $username = $("#username"); //jQuery 对象
- //var username = $username[0]; //jQuery 对象就是一个类数组, 里面所放的每一个元素都是 dom 对象
- //console.log(username)
- //dom 对象 -> jQuery 对象
- var username = document.getElementById("username"); //dom 对象
- //var $username = $(username); // 直接把 dom 对象放到 $()中进行包装即可
- //console.log($username)
- //console.log(username.value)
- console.log($username.val())
- //jQuery 是会去尽量减少报错, 不报错真的不一定是好事
- // 不报错你可能永远不知道错在啥地方
先推荐一个很实用的参考手册噢 --- jQuery1.11.3_20150618.CHM(我想一般你们都有吧), 或者 w3c......
多库共存
多库共存: jQuery 占用了 $ 和 jQuery 这两个变量. 当在同一个页面中引用了 jQuery 这个 JS 库, 并且引用的其他库 (或者其他版本的 jQuery 库) 中也用到了 $ 或者 jQuery 这两个变量, 那么, 要保证每个库都能正常使用, 这时候就有了多库共存的问题.
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <script src="jquery-1.8.2.min.js">
- </script>
- <script src="jquery-1.11.1.js">
- </script>
- <script>
- jQuery(function() {
- // 打印版本号.
- console.log($.fn.jQuery); //1.11.1
- $.noConflict(); // 让 1.11.1 放弃 $ 的使用权, 这样 1.8.2 就会获得对 $ 的使用权
- console.log($.fn.jQuery); //1.8.2
- console.log(jQuery.fn.jQuery); //1.11.1
- })
- </script>
- </head>
- <body>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <script src="jquery-1.8.2.min.js">
- </script>
- <script src="jquery-1.11.1.js">
- </script>
- <script>
- jQuery(function() {
- console.log($.fn.jQuery); //1.11.1
- var MrLv = $.noConflict(true); // 让 1.11.1 放弃两个符号的使用权, 同时定义一个新的使用权
- console.log($.fn.jQuery); //1.8.2
- console.log(jQuery.fn.jQuery); //1.8.2
- console.log(MrLv.fn.jQuery); //1.11.1
- })
- </script>
- </head>
- <body>
- </body>
- </HTML>
事件委托 - 原生
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 事件委托 - 原生
- </title>
- </head>
- <body>
- <ul>
- <li>
- 0
- </li>
- <li>
- 1
- </li>
- <li>
- 2
- </li>
- <li>
- 3
- </li>
- <li>
- 4
- </li>
- <li>
- 5
- </li>
- </ul>
- <script type="text/javascript">
- // 普通的写法 绑定了六次
- // var lis = document.getElementsByTagName("li");
- // for(var i = 0;i<lis.length;i++){
- // lis[i].onclick = function(){
- // console.log(this.innerHTML)
- // }
- // }
- // 把自己要做的事情委托给父元素来做, 事件只需要绑定一次就够了
- var ul = document.getElementsByTagName("ul")[0];
- ul.onclick = function(event) {
- event = event || Windows.event;
- var target = event.target || event.srcElement;
- // console.log(target)
- console.log(target.innerHTML)
- }
- </script>
- </body>
- </HTML>
jQuery 中的事件绑定
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- jQuery 中的事件绑定
- </title>
- <script src="jquery-1.11.3.min.js">
- </script>
- <style type="text/css">
- div{ width: 200px; height: 200px; background-color: #f00; display: none;
- }
- </style>
- </head>
- <body>
- <button>
- 事件绑定
- </button>
- <div>
- </div>
- <script type="text/javascript">
- // $("button").click(function(){
- // if($("div").CSS("display") == "none"){
- // $("div").show()
- // }else{
- // $("div").hide()
- // }
- // })
- $("button").bind("click",
- function() {
- if ($("div").CSS("display") == "none") {
- $("div").show()
- } else {
- $("div").hide()
- }
- })
- </script>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- jQuery 中的事件绑定
- </title>
- <script src="jquery-1.11.3.min.js">
- </script>
- <style type="text/css">
- div{ width: 200px; height: 200px; background-color: #f00; display: none;
- }
- </style>
- </head>
- <body>
- <button>
- 事件绑定
- </button>
- <div>
- </div>
- <script type="text/javascript">
- // 鼠标移入 btn 是显示,
- // 移出 btn 是隐藏
- // 移入 mouseover
- // 移出 mouseout
- // jQuery 属于链式调用
- // $("button").mouseover(function(){
- // $("div").show()
- // }).mouseout(function(){
- // $("div").hide()
- // })
- $("button").bind("mouseover mouseout",
- function() { // 事件绑定是可以绑定多个事件的
- if ($("div").CSS("display") == "none") {
- $("div").show()
- } else {
- $("div").hide()
- }
- })
- // 事件的解绑
- // $("button").unbind() /// 如果不写就是解绑所有事件
- $("button").unbind("mouseout") // 写指定的事件就是解绑指定的事件
- </script>
- </body>
- </HTML>
自定义动画
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 自定义动画
- </title>
- <script type="text/javascript" src="jquery-1.11.3.min.js">
- </script>
- <style type="text/css">
- div{ width: 200px; height: 200px; background-color: #f00; position: relative;
- display: none; }
- </style>
- </head>
- <body>
- <div>
- </div>
- <script type="text/javascript">
- // 链式写法
- // $("div").show().animate({
- // "width" : "100px",
- // "height" : "100px",
- // "top" : "100px",
- // "left" : "100px"
- // },3000)
- $("div").show().animate({
- "width": "50px",
- "height": "50px"
- },
- 3000).animate({
- "left": "500px"
- },
- 3000)
- </script>
- </body>
- </HTML>
jQuery 遍历 - each
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- jQuery 遍历 - each
- </title>
- <script src="jquery-1.11.3.min.js">
- </script>
- </head>
- <body>
- <ul>
- <li>
- 0
- </li>
- <li>
- 1
- </li>
- <li>
- 2
- </li>
- <li>
- 3
- </li>
- <li>
- 4
- </li>
- <li>
- 5
- </li>
- <li>
- 6
- </li>
- <li>
- 7
- </li>
- <li>
- 8
- </li>
- <li>
- 9
- </li>
- </ul>
- <script type="text/javascript">
- // var lis = document.getElementsByTagName("li");
- // for(var i = 0;i <lis.length;i++){
- // console.log(lis[i].innerHTML)
- // }
- var $lis = $("li");
- $lis.each(function(index, domElement) {
- console.log(index);
- console.log(domElement) console.log(domElement.innerHTML) console.log($(domElement).HTML())
- })
- </script>
- </body>
- </HTML>
结果如下:
最后呐, 做了一个手风琴效果
代码如下 :
- <!DOCTYPE HTML>
- <HTML>
- <head lang="en">
- <meta charset="UTF-8">
- <title>
- </title>
- <style type="text/css">
- * {padding: 0;margin: 0;} ul { list-style-type: none;} .parentWrap { width:
- 200px; text-align:center; } .menuGroup { border:1px solid #999; background-color:#e0ecff;
- } .groupTitle { display:block; height:20px; line-height:20px; font-size:
- 16px; border-bottom:1px solid #ccc; cursor:pointer; } .menuGroup> div {
- height: 200px; background-color:#fff; display:none; }
- </style>
- <script src="jquery-1.11.3.min.js">
- </script>
- <script>
- $(function() {
- // 思路分析:
- //1. 给所有的 span 注册点击事件, 让当前 span 的兄弟 div 显示出来
- $(".groupTitle").click(function() {
- // 下一个兄弟: nextElementSibling
- // 链式编程: 在 jQuery 里面, 方法可以一直调用下去.
- $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
- });
- });
- </script>
- </head>
- <body>
- <ul class="parentWrap">
- <li class="menuGroup">
- <span class="groupTitle">
- 标题 1
- </span>
- <div>
- 我是弹出来的 div1
- </div>
- </li>
- <li class="menuGroup">
- <span class="groupTitle">
- 标题 2
- </span>
- <div>
- 我是弹出来的 div2
- </div>
- </li>
- <li class="menuGroup">
- <span class="groupTitle">
- 标题 3
- </span>
- <div>
- 我是弹出来的 div3
- </div>
- </li>
- <li class="menuGroup">
- <span class="groupTitle">
- 标题 4
- </span>
- <div>
- 我是弹出来的 div4
- </div>
- </li>
- </ul>
- </body>
- </HTML>
来源: https://www.cnblogs.com/xuxiaoyu/p/10177309.html