jQuery DOM、jQuery 对象、jQuery筛选器

<!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>jquery DOM</title>
<style>
.red-div{
background-color: red;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div id="box" name="boxName" class="red-div"></div>
<div></div>
<script src="jquery.js"></script>
<script>
// 得到的是HTMLElement对象
// var box = document.getElementById('box')
// box.innerText ='getElementById'
// jQuery对象是一个标签元素的盒子是一个类似数组的对象
// $相当于jQuery
// jQuery('#box').text('jQuery #ID')
// box.innerText = '111'
// 不使用getElementById就可以直接使用id变量
// 得到HTMLCollection
// var boxTag = document.getElementsByTagName('div')[0]
// console.log(boxTag)
// 得到jquery对象
// $('div').text('jquery div')
// 得到的是NodeList对象
// boxTag = document.querySelectorAll('div')[0]
// getElementsClassName
// $('.red-div') 得到的是jquery对象
// getElementsByName
// $('[name=boxName]') 得到的是Jquery对象
// HTMLAllCollection
// var all = document.all
// // NodeList
// all = document.querySelectorAll('*')
// // 得到的是jQuery对象
// all = $('*')
// console.log($('div')[1])
</script>
</body>
</html>

<!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">
<script src="jquery.js"></script>
<title>jquery 对象</title>
<style>
li{
font-size: 2rem;
color: blue;
}
.ul li{
font-size: 1.5rem;
color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="ul">
<li>21</li>
<li>22</li>
<li>23</li>
<li id="ff">24</li>
</ul>
<script>
// $('筛选器')是最常用的jQuery对象的方法
// $()创建一个没有标签元素的jquery对象
// console.dir($())
// 会将两个筛选器合并
// console.log($('li','.ul',document.body))
// 將标签元素转换成jQuery对象
// var li = document.querySelector('li')
// console.dir($(li).text())
// 将NodeList\HTMLCollection 转换成jquery对象
// var li = document.querySelectorAll('li')
// console.log($(li).text())
// jquery对象的大部分方法会在内部循环处理每一个元素少部分只处理
// jQuery对象中的第一个元素
// jQuery对象的属性
// console.log($('li').size()) 已被废弃
// console.log($('li').length)
// console.log($('li:nth-child(2)').length)
console.log($('li:gt(1)').get(0))
var li3 = $('li:nth-child(3)')
// 得到的是jquery对象
var a = li3.get(0)
console.log(a)
// 得到的是标签元素
console.log($('li:gt(1)').index(a))
// jQuery对象是jQuery('筛选器')方法的返回值
// 这个返回值是一个对象
// jQuery对象相当于一个容器或盒子
// 内部存放的时候通过筛选器找到的标签元素
// 它是一个【类似数组的结构】
// jQuery对象提供了循环处理内部每一个标签元素的方法
// .each方法规定为每个匹配元素规定运行的函数
$('li:odd').each(function(i){
console.log(i)
console.log($(this).text())
})
</script>
</body>
</html>

<body>
<ul>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
<li>第5项</li>
<li>第6项</li>
<li>第7项</li>
</ul>
<hr>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<script src="jquery.js"></script>
<script>
// 整个页面上第一个li标签
// $('li:first').css({'color':'blue','font-size':'24px'})
// 全局索引是偶数
// $('li:even').css('color','red')
// // 全局索引是奇数
// $('li:odd').css('color','blue')
// 全局索引大于3
// $('li:gt(3)').css('color','yellow')
// 索引值为4 从0开始
$('li:eq(4)').css('color','red')
// 任意标签的倒数第x个子标签
$('li:nth-last-child(1)').css('color','blue')
</script>
</body>

jQuery DOM

jQuery 对象

jQuery筛选器

发送评论 编辑评论

推荐文章

发送评论编辑评论