jquery 简单归纳 -- 前端知识

xuxiaoyu

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>

或者：

百度压缩版引用地址:

微软压缩版引用地址:

官网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 || window.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>

　　

 

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode