jQuery
0407--jQuery
1. jQuery是什么？
https://www.w3school.com.cn/jquery/index.asp
-- 是一个JavaScript的库
-- 极大的简化JavaScript编程
-- 选择器，常用方法
2. 主要内容
-- 主要选择器 ==》获取到DOM元素
-- 操纵DOM元素的主要方法
html() , text() , val() , attr() , removeAttr()
-- 操纵CSS的主要方法
css() , addClass() , removeClass()
-- 掌握 $.each() 与 $?.each()的使用
-- Ajax相关函数的使用
$.get() , $.post() , $.ajax()
3. jQuery的使用与语法
-- 页面需要引入jQuery库（js）
-- 基本语法
$(selector).action() ;
* selector 是选择器--查找dom元素
* action 是对所获取到dom元素要执行的操作方法。
【action() 无参写在=后面可以获取值，action(参数)更新值】
【action参数的描述方式 ：字符串、js对象、function】
-- 代码描述
以下两种方式都是指页面加载结束后回调函数中描述的逻辑
类似于 window.onload=function(){ .. }
不同之处，一个页面，window.onload 只能描述一次，但是以下jQuery描述的形式可以有多个
$(document).ready(function(){
// 代码描述
})
或者
$(function(){
// 代码描述
})
4. 选择器
【使用选择器获取到的页面元素是一个node节点数组【r.fn.init(元素个数)】
但是如果一旦加[]下标引用元素获取到的就不是节点对象了，而是页面元素对象（js），
如果使用$()引用节点数组元素 ，jQuery获取到的node节点数组】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../assets/js/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
/*
console.log($("div.pBox p")) ; // r.fn.init(2)
console.log("------------") ;
console.log(document.querySelectorAll("div.pBox p")) ; // NodeList(2)
*/
console.log( $("div.pBox p")[0] ) ;
console.log($($("div.pBox p")[0])) ;
$("div.pBox p")[0].innerHTML = '<b>Hello</b>' ;
$($("div.pBox p")[1]).html("<b>world</b>");
}) ;
</script>
</head>
<body>
<div class="pBox">
<p>这是第一个段落</p>
<p>这是第二个段落</p>
</div>
<div>
<p>这是另一个区域的段落</p>
</div>
</body>
</html>
5. HTML代码/文本/值
html([val|fn]) 【innerHTML】
text([val|fn]) 【innerText】
val([val|fn]) 【value】
6. HTML元素属性
attr(name|js对象) 【元素引用.属性 或者 元素引用.setAttribute()】
removeAttr(name)
7. CSS样式表
css(name|pro|[,val|fn]) 【style属性】
8. 类选择器
addClass("className")
removeClass()
toggleClass()
9. 显示/隐藏切换
-- 第一组
show()
hide()
toggle()
-- 第二组
slideDown() 显示
slideUp() 隐藏
slideToggle()
-- 第三组
fadeIn()
fadeOut()
fadeToggle()
10 . 事件处理
在javascipt中事件去掉on，比如 onclick == >click()
11. each()
$(jQuery选择器).each(function(index , item){})
$.each(数组名 , function(index , item){})
// $.each 与 $?.each()
var arr = ["rose" , 12 , true , "你好"] ; // 数据数组
var trs = $(".userTable tbody tr") ; // 页面元素数组
$.each(arr , function(index , item){
console.log(index + " , " + item) ;
})
console.log("---------") ;
$(".userTable tbody tr").each(function(index , item){
console.log(item) ; // item 是js中的页面元素表示
console.log($(item)) ; // $(item)是jQuery中选取的页面元素
})
浙公网安备 33010602011771号