jQuery这篇文章就够了

jQuery

• jQuery是js的一个函数库，就是用js写的一堆函数。

jQuery的优点

• 封装了各种DOM操作的API，简化了js的DOM开发。
• jQuery中有各种选择器，能够快速定位DOM。
• 解决了浏览器兼容问题。
• 使用链式编程，隐式迭代简化了js的开发。
• 简化了ajax的开发。
• jQuery有丰富的插件。

引入jQuery

<script src="jQuery文件所在的路径"></script>

window.onload和document.ready的区别

• 1.window.onload：
  整个页面加载完毕：包含音频、视频
  一个页面只能写一个window.onload，写多次，后写的会覆盖前面的，只显示最后写的。

• 2.document.ready：
  整个DOM树绘制/渲染完毕，节点加载完毕
  一个页面可以写多个，从上到下依次显示

    window.onload = function(){
    			alert("window.onload1");
    		}
  
    	window.onload = function(){
    		alert("window.onload2");
    	}
    	
    	$(function(){
    	alert("jq1");
    	});
  
    	$(function(){
    		alert("jq2");
    	});
  

jQuery编程风格

$.(document).ready(function(){
		//JQ代码,相当于原生js的：document.ready
})
简写：
$.(function(){
})

JQ对象和JS对象转化

JQ对象：通过jQuery选择器拿到DOM对象，然后对其封装，使其能够调用jQuery的API，
相当于把DOM对象重新包装了一下。

$("选择器"):JQ对象
JQ对象不等于JS对象JQ的函数不能和JS混用

JS对象转换为JQ对象：
var JQ对象 = $(JS对象)
JQ对象转JS对象：
var JS对象 = $("选择器")[0];

jQuery选择器

基本选择器

• id选择器

语法
$("#id")：获取对应id的JQ对象

<h1 id="col" onclick="change()">color</h1>
//页面加载完毕时点击时触发change函数修改样式
<script type="text/javascript">
		//document.ready:
		//DOM树绘制完毕，即页面所有节点加载完毕
		$(document).ready(
			function(){
				//注册方法
				$("#col").click(function(){
					//this:触发当前事件的节点
					$(this).css("background-color","red");
			});
		});
</script>

• 标签选择器：

$(“标签名”)

<style type="text/css">
	
    li{list-style: none; line-height: 22px; cursor: pointer;}
    .current{background: #6cf; font-weight: bold; color: #fff;}
</style>
<ul>
    <li id="current">jQuery简介</li>
    <li>jQuery语法</li>
    <li>jQuery选择器</li>
    <li>jQuery事件与动画</li>
    <li>jQuery方法</li>
</ul>

<script type="text/javascript">
   $(function(){
       //对该页面的所有li添加click事件
       //隐式迭代，隐式遍历
       $("li").click(function(){
           //给id为current添加
           $("#current").addClass("current");
       });
   });

• 类选择器：

$(".类名")

$(".cls").addClass("current");
给类名为cls的添加current样式

层次选择器

• 后代选择器：空格
  $(“选择器1 选择器2”);

• 子选择器：
  $(“选择器1>选择器2”)

• 邻兄选择器：>
  $(“选择器1+选择器2”)

• 后兄选择器：+
  $(“选择器1~选择器2”)
  只选中后面的兄弟

• .siblings(“选择器”)：
  选择满足选择器的所有兄弟

• 层次选择器API：

  JQ的方法可以使用链式编程：
  .next(“选择器”)：下一个兄弟

  .prev(“选择器”)：上一个兄弟

  .siblings(“选择器”):获取所有兄弟

  .children(“选择器”)：获取所有孩子，不包含孩子的后代

  .parent(“选择器”):获取父节点

  .parents(“选择器”)：获取所有祖先

属性选择器：

• $ ("[属性名]")：获取包含该属性的标签
  例如：$(“a[href]”)
• $("[属性名=‘属性值’]")：
  获取包含该属性，并且属性值=条件的标签
• $("[属性名！=‘属性值’]")：
  获取包含该属性，并且属性值!=条件的标签
• $("[属性名^=‘属性值’]")：
  获取包含该属性，并且属性值以条件值开头
• $ ("[属性名$=‘属性值’]")：
  获取包含该属性，并且属性值以条件值结尾
• $("[属性名*=‘属性值’]")：
  获取包含该属性，并且属性值包含条件值
• 属性选择器经常和其它选择器结合使用

过滤选择器

• 基本过滤选择器：从多个中选出一个或者多个
  ：eq(index):相等
  ：gt(index):大于
  ：lt(index):小于
  ：first:第一个
  ：last:最后一个
  ：even:偶数
  : odd:奇数
  下标从0开头

• 可见性过滤选择器：
  选择器：hidden :获取隐藏的元素
  选择器：show :获取显示的元素
  可见性过滤选择器：
  选择器：hidden :获取隐藏的元素
  选择器：show :获取显示的元素

绑定事件：

js和jQuery都是基于事件触发

• 1.直接通过事件名绑定
  • .click()
    点击事件
  • .mouseover()
    鼠标移入事件
  • .mouseout()
    鼠标移出事件

$().mouseover(function(){
     //移入后执行的操作
}).mouseout(function(){
    //移出后执行的操作
});
简化写法：
$().hover(function(){
    //移入后执行的操作
},function(){
    //移出后执行的操作
});
hover=mouseover+mouseout;

• .focus()
  focus:获取焦点事件
• .blur();
  blur:失去焦点事件
  失去鼠标光标
• 2.通过bind()进行绑定
  .bind():对节点绑定事件
  绑定一个事件：
  .bind(“事件名”,function(){})
  绑定多个事件：

.bind({
		事件名1：function(){},
		事件名2：function(){}
		...
});

• JQ如何获取一个元素的innerHTML/innerText和元素的value

  js	jQuery
  nnerHTML	.html()
  nnerText	.text()
  value	.val()

• JQ创建节点

	$(html字符串)：创建节点
	$("<li>承宗</li>")

• JQ插入节点
  • 往节点内部插：通过父节点插入
    插入到最后：
  • 父节点.append(要插入的节点)
    要插入的节点.appendTo(父节点)
  • 插入到头部：
    父节点.prepend(要插入的节点)
    要插入的节点.prependTo(父节点)
  • 往节点外部插入：通过同辈节点插入
  • 插如后为弟弟：
    节点.after(要插入的节点)
    要插入的节点.insertAfter(节点）
  • 插入后为哥哥节点：
    节点.before(要插入的节点);
    要插入的节点.insertBefore(节点);

注意：

JQ的insertBefore：插入同辈节点
JS的insertBefore：是插入子节点

• JQ删除节点
  • .remove(“选择器”):
    删除节点，同时删除该节点下的所有子节点，并且解除该节点绑定的所有事件
  • .detach(“选择器”)：返回值为删除的节点对象:JQ对象
    删除节点，同时删除该节点下的所有子节点，但会保留该节点绑定的所有事件和数据
  • .empty()：
    清空节点下的元素

注意：

empty()：只是清空子节点，但保留当前节点
remove()/detach()：删除该节点同时删除其子节点

• 删除一般都是先定位节点，再删除；
  但也可以通过使用有参函数添加选择器进行删除：删除多个

var $deletedLi = $("li").detach("li.xxoo");

• 替换节点
  老节点.replaceWith(新节点)
  新节点.replaceAll(老节点)
• 克隆节点
  节点.clone(true/false):
  返回值为克隆的新节点：JQ对象
  默认是false:不复制节点上绑定的事件
  true:会复制节点绑定的事件
• JQ：each():重点
• 遍历数组、集合

//function无参
$(选择器).each(function(){
	//$(this):获取当前元素：JQ对象
})

//function有参
$(选择器).each(function(index,data){
	//index:下标
	//data:当前元素：JS对象
})

$.each(要遍历的数组,function(index,data){});
一般用于遍历JS数组

$(选择器).each():遍历页面节点
$.each():遍历JS数组

总结：暂时总结下知识点，等以后有时间在加上案列