Jquery01_jquery入门

Jquery本身就是js——对js的简单封装。其实跟原本js还是很像的。

js和jquery一般都是混用。

js的封装：

获取对象：$(“选择器”)——内部封装了一个js数组，但是它是一个对象，所以有自己的函数——可以直接操作：取值是第一个 赋值是整体。

和js对象可以互相转换 ：下标取出来的就是js对象 $()转换的就是jquery对象

jquery对象.事件名(function(){})

jquery对象.on(“事件名”,function(){})

jquery对象.on(“事件名”,“选择器”,function(){})——绑定给中间选择器：事件绑定给父亲，发生事件的时候判定是不是指定的儿子，如果是则触发事件。

一. 本章内容

jQuery简介

搭建jQuery开发环境

jQuery简单入门

jquery的选择器

二. 内容

2.1 jquery简介

JS:获取对象 操作对象 创建标签 删除标签等——集中在DOM

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

    * HTML 元素选取
    * HTML 元素操作
    * CSS 操作
    * HTML 事件函数
    * JavaScript 特效和动画
    * HTML DOM 遍历和修改
    * AJAX——JSP

2.2 搭建jQuery开发环境

<script src="jquery-1.8.3.js" type="text/javascript"></script>

2.3 简单使用jquery

2.3.1. 通过选择器获取对象

 <input type="button" value="点击1" />
<input type="button" value="点击2"/>
<input type="button" value="点击3"/>

<script>
	//封装了对象的获取：
	console.log(document.querySelector("input[value='点击1']"))
	console.log(document.querySelectorAll("input"))
	// $就是jqueyr提供的一个系统函数，用来获取对象的——中间写选择器--querySelectorAll
	// 返回的不是常规数组，是一个jquery对象，可以直接操作的，里边封装了一个数组
	console.log($("input[value='点击1']"))
	console.log($("input"))
	
	// document.querySelectorAll("input").value---数组就不具备value属性——循环便利来操作
	
	// 封装了对象的操作
	console.log($("input").val())//取value默认取的是对象中封装数组的第一个的value。——操作第一个的属性：value  innerHTML
	
	$("input").css("backgroundColor","red")//操作赋值：css className等都是一组直接操作的，取值都是第一个
</script>

2.3.2. 元素操作的相关函数

**val()😗*获取value的属性值-----value：默认操作第一个

html():获取标签体----innerHtml：默认操作第一个

size():获取对象的个数-----数组的length（jquery对象就有这个属性）

addClass();追加class属性值

removeClass():移除class的属性值

attr()：操作所有属性

2.3.3. 事件绑定

1.  **对象.事件名（function(){**

// 对象的获取   对象操作   事件的绑定  函数定义——没有区别
//事件的绑定：
// jquery对象.事件名(function(){});---如果jquery对象中是一个数组，那么将绑定给数组中的每一个
//js对象.事件名=function(){}//如果js对象都是一个数组需要循环便利进行对象的事件绑定。
/* var pobj=document.querySelectorAll("p");
for(var i=0;i<pobj.length;i++){
  pobj[i].οnclick=function(){		alert(1);		}
} */
$("p").click(function(){
  console.log(this);
});
$("input[value='点击1']").click(function(){
  // var obj=document.createElement("h1")				// obj.innerHTML=''
  // document.getElementById("father").appendchild(obj)
  $("#father").append("<h1 class='a'>这是一个h1</h1>");
})
			

b.on绑定

 // 第二种事件绑定：动态生成的绑定形式
/* document.getElementById("father").οnclick=function(e){
  var yuan=e.target; 		if(yuan.className=="a"){	alert(yuan);	}
} */
// on绑定：jquery对象.on(事件名，【事件发生的时候判定是不是指定子选择器】，匿名函数)
// 如果jquery对象触发指定的事件，会去判定是不是第二个选择器触发——真正的事件源是否符合第二个参数的规则，如果符合才会触发匿名函数的执行
//如果第二个参数不写，那么事件就是直接绑定给了father，不进行第二层判断
$("#father").on("click",".a",function(){
   alert(this);
})

2.3.4. jquery对象的循环

 <script>
var jqueryP=$("p");
//each是jquery提供的一个遍历函数_index是索引下标  obj：当前对象——jqueryP[index]
jqueryP.each(function(index,obj){
  console.log(obj);//遍历出来的对象都是js对象
})
</script>

var ps=$("p");//jquery对象
for(var i=0;i<ps.length;i++){
  var obj=ps[i];//封装的是一个js数组——obj对象：js对象——对jqueyr对象使用数组下标取到的是js对象
  console.log(obj.innerHTML);
}

2.3.5**. jquery对象和js对象的区别**

    * 使用document对象的相关方法来获取HTML元素——js的dom对象
    * 通过jQuery对DOM对象进行封装后产生的对象——jquery对象
    * js它不能调用jQuery中的html()和val()方法；
    * jquery它不能调用DOM中的innerHTML和value属性。 

2.3.6**. jquery对象和js对象的互相转换**

    * jQuery提供了两种方式来实现jQuery对象转换成DOM对象，分别是[下标] 和get(索引)方法。 
    * 对于一个DOM对象，只需要使用$( )把它包裹起来即可转换成jQuery对象，即$(DOM对象)。
   小案例：

js对象是原始对象：操作的形式：都是原始js的形式：value innerHTML querySelecotor

		jquery对象：是将js对象进行了封装，可以直接操作jqueyr对象可以取值可以赋值

			其中取值取的是第一个的值——val()   html()    find()

			赋值赋的是整体所有_val(写内容) html(赋值) 

		jquery遍历的话，里边取出来的每一个对象都是js对象——jquery对象如果想转换成js对象——直接通过下标读取即可。	

//后去所有p标签：相当于docuemnt.querySelectAll("p")——直接就是一个数组，只能当做一个数组来处理
//jquery取到的是jquery对象，里边封装的是一个js数组
console.log($("p").html())//innerHTML——当做对象处理——取值只取第一个
//如果想取出来所有值，只能循环遍历
var ps=$("p");//jquery对象
for(var i=0;i<ps.length;i++){
  var obj=ps[i];//封装的是一个js数组——obj对象：js对象——对jqueyr对象使用数组下标取到的是js对象
  console.log(obj.innerHTML);
}
//
console.log($("input[value='点击1']").val());
console.log($("input[value='点击1']")[0].value);//通过数组下标将jquery对象转换成了js对象
console.log($("input[value='点击1']").get(0).value);//get是一个系统函数，相当于读取指定下标的内容

var jsobj=document.querySelector("input[value='点击2']")
var jqueryObj=$(jsobj);//js对象转换成jquery对象
console.log(jqueryObj.val());

2.4 选择器获取对象

获取对象 操作对象 js对象和jquery对象的区别 事件的绑定——

js：获取对象：

——a.document获取的都是当前页的对象

document.getElementById document.querySelectorAll()

$(“选择器”)——id 类 后代 兄弟 相邻 属性：针对选择器选中当前页面的内容

——b.对象.形式获取的都是和当前对象有关的

obj.querySelecotor:当前对象的后代

obj.next

obj.prev

obj.parent

2.4.1 基本选择器——掌握

$(“td”)

2.4.2 层次选择器——掌握

//层次选择器：后代  儿子  相邻兄弟  所有的兄弟
			console.log($("#two tr"));
			console.log($("#two>tbody>tr"));
			console.log($("#tdxx+td"));
			console.log($("#tdxx~td"));

2.4.3 属性选择器——掌握

2.4.4 表单选择器图片:

console.log($("#regForm :input"));
console.log($(":text"));

2.4.5 表单属性选择器——掌握

//表单属性选择器
			console.log($(".a:checked"));

2.4.6 内容选择器

//内容选贼器
			console.log($("td:contains(1)"));
			console.log($("td:empty"));
			console.log($("tr:has(#tdxx)"));

2.4.7 过滤选择器——掌握 $(“tr:first”)

过滤选择器是针对已经存在的选择内容进行过滤——都是配合其他选择器一起存在
//过滤选择器
console.log($("td:first"));

2.4.8 可见性选择器—掌握

---------------------------查找函数：找和当前对象有关的：后代 兄弟 父亲
$("#father").find(“a”)

2.5 节点过滤函数获取对象

//过滤选择器
console.log($("td:first"));

console.log("---------上边选择器的话：当前页直接操作-----------");
console.log("----函数中：this通过当前获取父亲 儿子  兄弟：中的第几个---------");
var tds=$("td");
console.log(tds.first());

2.6 节点查找函数获取对象

非常重要：如果是动态表格的时候，选择器没法用----层级选择器

//查找函数：
var trxx=$("#trxx");
console.log(trxx.find("#tdxx"));//trxx.querySelector("#tdxx")
console.log(trxx.prev());
console.log(trxx.next());
console.log(trxx.siblings());//所有兄弟，不论前后