Web前端基础回顾（JQuery）

介绍

JQuery是JS的工具，对原生JS的方法进行封装，提供更为便捷、简易的方法。

• 官网：http://jquery.com
• 中文API：http://jquery123.com

使用

1. 先引入jquery文件，后使用jquery的语法
2. 工厂函数 – $()

• 用于获取元素，创建元素节点或转换对象类型
  例：根据选择器获取元素，返回jquery对象
  $(“h1”)、 $("#id")、 $(".class")、 $("#d1 h1")

//jquery获取元素
console.log($("h1"))

//操作元素内容，jquery对象会内部遍历所有元素，统一修改
$("h1").html("动态修改")

//获取原生JS对象
console.log($("h1")[0]) // <h1></h1>
$("h1")[0].innerHTML = "哈哈"
$("h1").get(1).innerHTML = "get(index)转原生"

// JS原生对象转换jquery对象
var h1 = $("h1")[0] //原生对象
console.log($(h1)) // jquery对象

//jquery提供eq(index)从元素列表中获取指定元素，返回jquery对象
$("h1").eq(2).html("eq(index)返回jquery对象") // jquery对象

3. DOM操作

1）获取元素：jquery中使用选择器获取元素
选择器分类：

• 基础选择器
  $(“div”)、 $("#d1")、 $(".c1")、 $(“ul, ol”)

console.log($("h1"))
$("#d1").html("对原生innerHTML方法的封装")
$(".c1").text("对原生innerText方法的封装")
//操作行内样式
$("#d1,.c1").css("color","red")

• 层级选择器

  • 后代选择器 $("div h3")
  • 子代选择器 $("div>h3")
  • 相邻兄弟选择器：查找h1后面相邻的兄弟元素，要求必须满足指定选择器h2，若满足条件只返回一个元素 $("h1+h2")
  • 通用兄弟选择器：查找h1后面所有满足选择器h2的兄弟元素 $("h1~h2")

• 过滤选择器：过滤选择器与伪类选择器类似，必须与基础选择器结合使用

  • 查找第一个元素 :first
  • 查找最后一个元素 :last
  • 查找奇数下标对应的元素 :odd
  • 查找偶数下标对应的元素 :even
  • 查找指定下标对应的元素 :eq(index)
  • 查找大于指定下标的元素 :gt(index)
  • 查找小于指定下标的元素 :lt(index)
  • 否定筛选 :not(selector1,selector2)：匹配除了指定selector1，selector2之外剩下的元素

//匹配第一个h1
$("h1:first").css("color","red")
//匹配最后一个h1
$("h1:last").css("color","green")
//奇数下标
$("h1:odd").css("background","orange")
//偶数下标
$("h1:even").css("background","cyan")
// 下标等于5
$("h1:eq(5)").css("color","#64a131")
// 下标大于5
$("h1:gt(5)").css("color","gray")
// 下标小于5
$("h1:lt(5)").css("color","blue")
// 匹配h1中除了id为d1和class为c1之外剩下的元素
$("h1:not(#d1,.c1)").html("剩下的都是精华")
// 匹配除了下标为5和下标为偶数之外的剩下的元素
$("h1:not(:eq(5),:even)").css("color","green")

• 属性选择器：根据标签属性匹配元素
  • 匹配包含指定属性的元素 [attrName]
  • 匹配属性名=属性值的元素 [attrName=value]
  • 匹配属性值以指定字符开头的元素 [attrName^=value]
  • 匹配以指定字符结尾的元素 [attrName$=value]
  • 匹配包含指定字符的元素 [attrName*=value]

console.log( $("[id]") ) //匹配包含id的元素
console.log( $("[id=d1]") ) //匹配id="d1"的元素
console.log( $("[id^=d]") ) //匹配id以d开头的元素
console.log( $("[id$=d]") ) //匹配id以d结尾的元素
console.log( $("[id*=1]") ) //匹配id任意位置出现1的元素

• 子元素过滤选择器
  • 匹配第一个作为子元素存在的元素 :first-child
  • 匹配最后一个作为子元素存在的元素 :last-child
  • 匹配第i个作为子元素存在的元素 :nth-child(i)

$("li:first-child").css("background","orange")
$("li:last-child").css("background","cyan")
$("li:nth-child(3)").css("text-align","center")

2）操作元素内容

• html(" ")：同原生innerHTML属性，读取或设置标签内容，可以识别标签语法
• text(" ")：同原生innerText属性，读取或设置标签内容，不能识别标签语法
• val(" ")：同原生value属性，读取或设置表单控件的值
  练习：创建输入框，按钮和div，点击按钮时将输入框中的内容以一级标题的形式显示在div中

<input type="text">
<button onclick="show()">显示</button>
<div></div>

function.show(){
	$("div").html("<h1>"+ $("input").val() +"</h1>")
}

3）操作元素属性

• attr(“attrName”, “value”) 设置或读取元素属性
• prop(“attrName”, “value”) 设置或读取元素属性，如果操作用于标记元素状态的属性（例如：checked属性），只能使用prop()方法
• removeAttr(“attrName”) 移除指定的标签属性

<h1>标题</h1>
<input type="checkbox">
<button onclick="show()">显示</button>

// 链式调用
$("h1").attr("id","d1").prop("class","c1 c2").html().css(); //set方法
console.log( $("h1").attr("id"), $("h1").attr("class") ); //get方法 d1 c1 c2

function show(){
	console.log($("input").attr("checked")) // undefined
	console.log($("input").prop("checked")) // false/true
	
	//点击按钮修改checked状态
	var isChecked = $("input").prop("checked") // 获取当前按钮的状态
	$("input").prop("checked", !isChecked ) // 修改元素状态
	console.log($("input").prop("checked")) // 输出状态	
}

// $("h1").removeAttr("id") // 移除h1的id属性

4）操作元素样式

• 为元素添加id或class属性，对应选择器的样式
• 针对class属性可以取多个值的情况，提供专门操作类名的方法
  • addClass(“className”) 添加指定的类名
  • removeClass(“className”) 移除指定类名
  • toggleClass(“className”) 借助用户行为动态修改类名，有则删除，无则添加
• 操作行内样式
  • css(“attrName”,“value”)
  • css(JSON对象)

JSON格式：

{
	"width": "200px",
	"height":"200px"
}

css

#d1{
	font-size:32px
}
.c1{
	font-weight:700
}
.c2{
	color:red
}

html

<p>段落</p>
<span>操作类名</span>
<label>label</label>
<button onclick="show()">show</button>
<div></div>

javascript

$("p").attr("id","d1").prop("class","c1 c2")

$("span").attr("class","c1").addClass("c2")

$("label").addClass("c1").addClass("c2").remove("c1 c2")

function show(){
	$("label").toggleClass("c2") //有则删除，无则添加
}

//操作行内样式
$("div").css("height","200px").css("border","1px solid red").css({
	"width":"200px",
	"background-color":"green"
})

5）根据层级结构获取元素

• 获取父元素 parent()
• 获取祖先元素 / 满足选择器的祖先元素 parents() / parents("selector")
• 获取直接子元素列表 / 满足选择器的子元素列表 children() / children("selector")
• 获取指定的后代元素（参数不能省略） find("selector")
• 获取下一个兄弟元素 / 获取下一个兄弟，必须满足选择器，否则查找失败 next() / next("selector")
• 获取上一个兄弟元素 / 获取上一个兄弟，必须满足选择器，否则查找失败 prev() / prev("selector")
• 获取所有的兄弟元素 / 获取所有满足选择器的兄弟元素 siblings() / siblings("selector")

<div id="box">
	<h1>超哥哥</h1>
	<div class="left">
		<h1>标题</h1>
	</div>
	<h1>隔壁老王</h1>
</div>

console.log("parent:", $("h1").parent()) //获取h1的父元素
console.log("parents:", $("h1").parents()) //获取h1的祖先元素
console.log("指定查找：",$("h1").parents("#box")) //获取h1的祖先元素中所有id为box的元素
console.log("children:",$("#box").children()) //获取div#box的直接子元素：h1(超哥哥)、div#left、h1(隔壁老王)
console.log("children('h1'):",$("#box").children("h1")) //获取div#box的指定子元素：h1(超哥哥)、h1(隔壁老王)
console.log($("#box").find("h1")) // h1(超哥哥)、h1(标题)、h1(隔壁老王)

//查找兄弟元素
console.log($(".left").next().css("color","pink")) //隔壁老王（粉色）
console.log($(".left").prev().css("color","green")) //超哥哥（绿色）
console.log($(".left").siblings()) //div.left 所有兄弟元素
console.log($(".left").siblings('p')) //div.left 所有兄弟元素中的p标签元素

6）元素的创建，添加和删除

• 创建元素 $("<h1 id='d1'>老王</h1>")
• 添加元素
  • 作为子元素添加
    • 将新创建的元素添加至父元素的末尾：$parent.append(elem)
    • 将新创建的元素添加至父元素的开头：$parent.prepend(elem)
  • 作为兄弟元素添加
    • 在obj元素之前添加新元素：$obj.before(elem)
    • 在obj元素之后添加新元素：$obj.after(elem)
• 删除元素 $obj.remove()

//创建元素
var elem1 = $("<h1 id="d1" style="color:orange;">QTX</h1>")
var elem2 = $("<h1></h1>")
elem2.html("小泽").attr("id","d2").css("color","green")
var elem3 = $("<h1>老王</h1>")
var elem4 = $("<h1>老魏</h1>")

//添加元素
$("body").append(elem1).prepend(elem2)
elem2.after(elem3)
elem1.before(elem4)
/*
小泽
老王
老魏
QTX
*/

//移除元素
elem2.remove()

7）事件处理

• 窗口加载完毕
  原生JS使用onload事件
  jQuery使用ready()表示：

语法一：

$(document).ready(function(){
	// 文档加载完毕后执行
})

语法二：

$().ready(function(){
	// 文档加载完毕后执行
})

语法三：

$(function(){
	// 文档加载完毕后执行
})

onload与ready的区别：

/*1.onload方法*/
window.onload = function(){
	alert("1")
}
window.onload = function(){
	alert("2")//覆盖上面弹框，即只有这条语句可以弹出
}

// 改进
window.onload = function(){
	alert("1")
}
if(window.onload){
	var fn = window.onload
	fn()
}
if(window.onload){
	window.onload = function(){
		alert("2")
	}
}

/*2.ready方法*/
// 三个弹框依次弹出
$(document).ready(function(){
	alert("1")
})

$().ready(function(){
	alert("2")
})

$(function(){
	alert("3")
})

区别：onload重复书写会造成覆盖问题，需要手动检测；ready方法可以重复输写，不需要考虑覆盖问题。

• 绑定方式
  • 使用on()绑定：$("h1").on("click",function(){ })
  • 使用bind()绑定：$("h1").bind("click",function(){ })
  • 将省略“on”前缀的事件名称作为方法名直接绑定：$("h1").click(function(){ })

$("div").on("click",function(){
	alert("div被点击")
})
.bind("mouseover",function(){
	console.log("鼠标移入")
})
.mouseout(function(){
	console.log("鼠标移出")
})

练习：点击ul中的li元素，将内容传入h1标签中

$("li").click(function(){
	//this 指代事件的触发对象，原生JS对象
	console.log(this.innerHTML)
	//转换jquery对象，调用jquery方法
	console.log($(this).html())
	//传值
	$("h1").html($(this).html())
})

• this关键字：直接使用this关键字，表示原生的对象，需要转换为jquery对象才能使用jquery方法
• 事件对象的获取和使用同原生JS