* jquery 简单归纳 -- 前端知识

程序员文章站 2022-03-24 12:41:36

jquery 什么是jQuery？ jquery是轻量级的JavaScript库，核心是javascript，兼容css和各种浏览器，核心理念是写得少做得多（write less do more）。为什么要学习jQuery? 因为它有很多优势：容易上手，强大的选择器，节约开发时间，丰富的UI，完善 ......

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=""></script>

微软压缩版引用地址:

<script src=""></script>

官网jquery压缩版引用地址:

<script src=""></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>

　　结果如下： * jquery 简单归纳 -- 前端知识

最后呐，做了一个手风琴效果

代码如下 :

<!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>

上一篇： LAMP 环境搭建备忘 -- Linux的安装（一）

下一篇： H5新标签(适合新手入门)