jQuery基本介绍

什么是jQuery?

jQuery是一个快速的、轻量的、功能丰富的js库。

jQuery的官网 http://jquery.com/

jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）。

jquey和js的关系

1 就jq底层是计算，就是把js进行了封装。

2jq能够很方便获取节点，发送ajax。

为什么要学jQuery

使用JS操作DOM的时候，会遇到以下的一些缺点：

1. 获取元素的方法太少且长，麻烦。
2. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。
3. 注册的事件会覆盖。
4. 有兼容性问题。
5. 实现动画很麻烦

伪数组：拥有length，可以通过下表获取元素，但是不能使用数组的方法。

使用jQuery的优点

1. 获取元素的方式非常的简单，而且非常的丰富
2. jQuery的隐式迭代特性，不再需要书写for循环语句。
3. 使用jQuery完全不用考虑兼容性问题。
4. jQuery提供了一系列动画相关的函数，使用非常方便。

没有对比，就没有伤害，有了对比，处处戳中要害。

版本介绍

官网下载地址：http://jquery.com/download/

jQuery版本有很多，分为1.x 2.x 3.x

大版本分类：

1.x版本：能够兼容IE678浏览器（最终版本2.2.4）
2.x版本：不兼容IE678浏览器（最终版本2.2.4）

//jQuery目前正在更新的版本
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）,3.x版本只是在原来的基础上增加了一些新的特性。

关于压缩版和未压缩版

jquery-2.2.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有可阅读性。
jquery-2.2.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

Jquery的引入

引入本地jquery包

入口函数

入口函数的好处：

1. 等待文档加载完成，保证能够获取到元素
2. 形成了一个沙箱，防止全局变量污染。

两种写法：

//第一种写法
$(document).ready(function() {
    
    
	
});
//第二种写法
$(function() {
    
    
	
});

jQuery入口函数与js入口函数的对比

1.JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2.jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

jQuery对象与DOM对象

基本概念：

1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象
3. jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））

jQuery对象与DOM对象的区别：

1. DOM对象与jQuery对象的方法不能混用。
2. DOM对象可以和jQuery对象相互转化

DOM对象转换成jQuery对象

// 将dom对象放入,$()中,既可以进行转化
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象：

var $li = $(“li”);
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)

准备:html代码

    <ul>
        <li id="cloth">衣服</li>
        <li>裤子</li>
        <li>裤衩子</li>
        <li>袜子</li>
      </ul>

第一步: 使用js获取id,且修改背景颜色

    //   1. 什么是DOM对象(js对象):使用js的方式获取到的元素就是js对象（DOM对象）
     var cloth = document.getElementById("cloth");
     cloth.style.backgroundColor = "pink";

第二步:使用jquery获取li,使用text()修改文本内容

     //2. 什么是jq对象：使用jq的方式获取到的元素就是jq对象
      var $li = $("li");
      console.log($li);
       $li.text("我改了内容");

第三步: 使用js对象调用jquery的text方法

    //js对象对象不能调用jq对象的方法
     var cloth = document.getElementById("cloth");
   cloth.text("呵呵");

第四步:jquery对象也不能直接调用js的方法:setAttribute()

 var $li = $("li");
 $li[0].setAttribute("name","hehe");

总结:

    DOM无法调用jQuery对象的方法：为什么：因为是两个不同对象
    DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。
    jq对象与js对象的联系（jq对象其实就是js对象的一个集合，伪数组，里面存放了一大堆的js对象）（宏观上）

第五步:将js对象转化为Jquery对象

 var cloth = document.getElementById("cloth");
    
    //DOM对象就变成jQuery对象
 $(cloth).text("呵呵");

第六步:将jquey对象转化为js

 //jQuery对象怎么转换成DOM对象（取出来）
    var $li = $("li");
    $li[1].style.backgroundColor = "red";
    $li[2].style.backgroundColor = "yellow";

$的本质

$其实就是一个函数，以后用$ 的时候，记得跟小括号 $();

有三种用法:

  //$其实就是一个函数，以后用$的时候，记得跟小括号 $();
  //参数不同，功能就不同
  //3种用法
  //1. 参数是一个function, 入口函数
  $(function () {
    
    
    
  });
  console.log(typeof $);
  
  //2. $(domobj)  把dom对象转换成jquery对象
//  $(document).ready(function () {
    
    
//
//  });
  
  //3. 参数是一个字符串,用来找对象
  //$("div") $("div ul")   $(".current")

选择器

什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

css选择器

jQuery完全兼容css选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，全部获取
交集选择器	$(“div.redClass”);	获取class为redClass的div元素
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

跟CSS的选择器一模一样。

过滤选择器【记住】

这类选择器都带冒号:

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素
:first	$(“li:first”).css(“color”, ”red”);	获取到的li元素中的第一个
:last	$(“li:last”).css(“color”, ”red”);	获取到的li元素中的最后一个

筛选选择器(方法)[记住]

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	获取当前元素的所有子元素中的li元素
find(selector)	$(“ul”).find(“li”);	获取当前元素中的后代元素中的li元素
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于`$(“li:eq(2)”)`,index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
     
     height: 10px;}
			.top{
     
     width: 100px;height: 100px;}
			.one{
     
     background: red;}
		</style>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="点击试试" />
		<div class="top"></div>
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<input type="text" id="search" value="" />
		<p>p1</p>
		<p></p>
		<p>p3</p>
		<ul class="list ul" id="">
			<li>html</li>
			<li>php</li>
			<li class="red">mysql</li>
			<li>ajax</li>
			<li>python</li>
			<li>javascript</li>
		</ul>
		<ul class="list" id="list">
			<li>html</li>
			<li>php</li>
			<li>mysql</li>
			<li>ajax</li>
			<li>python</li>
			<li>javascript</li>
		</ul>
		<!--<div id="cont">4</div>
		<div id="cont">5</div>
		<div id="cont">6</div>-->
		<span>7</span>
		<span>8</span>
		<span>9</span>
		<div class="msg">
			<h3>三级标题</h3>
			<h3>三级标题</h3>
			<div class="xbox">
				<h3>三级标题</h3>
				<h3>三级标题</h3>
			</div>
		</div>
		<input type="text" name="user" id="a" value="" />
		<input type="password" name="user" id="b" />
		<input type="tel" id="c" value="" name="tel" />
	</body>
	<script src="../jquery.2.2.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
//		$("#cont").css({background:"red"})
		
//		$(".box").css({background:"red"})
		
//		$("span").css({background:"red"})
         // 包含的节点
//		$(".msg h3").css({background:"red"})
//		$(".msg").find("h3").css({background:"red"})
		// 子节点
//		$(".msg>h3").css({background:"red"})
//		$(".msg").children("h3").css({background:"red"})
		// 后代选择
//		$(".msg .xbox h3").css({background:"red"})
//		$(".msg").children(".xbox").children("h3").css({background:"red"})
		
		// 下一个兄弟节点
//		$(".msg+input").css({background:"red"})
//		$(".msg").next("input").css({background:"red"})
		// 选中后面所有符合条件的节点
//		$(".msg~input").css({background:"red"})
//		$(".msg").nextAll("input").css({background:"red"})
        
        // 选中拥有指定属性的节点
//		$("input").css({background:"red"})
//		$("input[value]").css({background:"red"})
//		$("input[name=user]").css({background:"red"})
//		$("input[name=user][value]").css({background:"red"})
		// 选中第一个,和最后一个元素
//		$(".list li:first").css({background:"red"})
//		$(".list li").first().css({background:"red"})

//		$(".list li:last").css({background:"red"})
//		$(".list li").last().css({background:"red"})
		// 选中子元素中除了class=red之外的元素
//		$(".list li:not(.red)").css({background:"red"})
//		$(".list li").not(".red").css({background:"red"})
        //
//		$(".list li:even").css({background:"red"})
//		$(".list li:odd").css({background:"red"})

//		$(".list li:eq(2)").css({background:"red"})
//		$(".list li").eq(2).css({background:"red"})
		
//		$(".list li:contains(h)").css({background:"red"})
		
		
		

		// 是否存在class=red,指定条件存在,就设置样式
//		$(".list:has(.red)").css({border:"solid 1px black"})
		// .is()判断某一个class/id/tagName是否存在
//		console.log($(".list").eq(1).is(".ul"))
//		console.log($(".list").eq(0).is("#list"))	
//		console.log($(".list").eq(1).hasClass("ul")
		
		
	</script>
</html>

jquery事件用法

js中原有的事件,在js中都是支持的,但是都变成了方法,注意jquery中要去掉on

注：在jquery中事件都是不要加on前缀，原生js需要加on

①通过事件名直接绑定

语法：jquery对象.事件名( function(){
    
    } )   
如单击事件：$(‘div’).click( function(){
    
    } )

②在jq中可以使用bind方法进行事件的绑定：

1, bind(type,callback) ：对事件进行绑定 只能绑定一个事件
参数说明：
type：指事件名  但是这里的事件名不要带on前缀。
fn：匿名函数,事件的处理程序 
2, bind({
    
    type:fn,type:fn})：对事件进行绑定  可以绑定多个事件
参数说明：
要求是一个JSON对象
type：指事件名,注事件名不带on前缀
fn：匿名函数  事件的处理程序 
        
1, unbind([type]) ：对事件进行解绑  
参数说明：
		type：可缺省,type指解绑的事件名。如果没有指定事件名，则表示将所有的事	件都解绑！
③在jq中可以使用on方法进行事件的绑定：

③ 在jq中可以使用on方法进行事件的绑定：

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。

1,  on(type,callback) 只能给页面已有的元素的绑定事件。
 参数说明:
type：事件名
callback：事件的处理程序
    
  给未来创建的元素绑定事件  
2,  on( type,selector,callback) 在已有的元素上绑定代理的事件。（事件委托的方式）
参数说明：
type ：事件名
selector:选择器
callback：事件的处理程序
委托的调用形式：父选择器.on(type,子选择器,callback);

例1: 直接绑定方式

格式：jquery对象.事件名(function(event){ });

    //简单事件，给自己注册的事件
    $("div").click(function () {
    
    
      alert("哈哈");
    });

例2:使用bind方式绑定

    $("div").bind('click',function () {
    
    
      alert("哈哈");
    });

例3:使用on给原有和新增的元素绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery-2.2.4.js"></script>
</head>
<body>
    <input type="button" value="点我新增">
    <ul>
        <li>哪吒</li>
        <li>我是小妖怪</li>
        <li>杀人不眨眼</li>
        <li>吃人不放盐</li>
        <li>一口气八个</li>
    </ul>
    <script>
      // on 不仅可以给页面中存在的元素绑定事件
      //   还可以个给新增的元素绑定事件
    //   $('ul').on('click',function(){
     
     
    //       console.log('哈哈')
    //   });
      
    //  $('li').on('click',function(){
     
     
    //      console.log('嘿嘿')
    //  })

      /// 点击之后新增一个li
      $('input').on('click',function(){
     
     
          var liObj = $('<li></li>');
              liObj.text('肚皮要撑破');
              liObj.appendTo('ul')
      });

      // 给新增的li邦定事件
      // $('父级元素').on(事件类型,指定元素,回调函数)
      $('ul').on('click','li',()=>{
     
     
          console.log('新增的也有事件')
      });
    </script>
</body>
</html>