02day
目录
jQuery核心对象
理解：1、即执行jQuery核心函数返回的对象
2、jQuery对象内部包含的dom元素对象的伪数组（可能只有一个元素）
3、jQuery 对象拥有很多有用的属性和方法，能让程序员更方便的操作dom
使用jQuery核心函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
</head>
<!-- 需求：
1、统计按钮个数
2、取出第二个按钮的文本
3、输出所有按钮标签的文本
4、输出'测试三'按钮是所有按钮的第几个
-->
<body>
<button>测试一</button>
<button>测试二</button>
<button id="bt3">测试三</button>
<button>测试四</button>
<!--
jQuery基本行为
size()/length:包含的DOM元素个数
[index]/get(index):得到对应位置的DOM元素
each():遍历包含的多有的DOM元素
index():得到所在兄弟元素中的下标
-->
<script>
// 1、统计按钮个数
$(function() {
// $(function() { }这个可以不写 因为现在这个的js是写在底部 浏览器会从上而下解析
// size()/length:包含的DOM元素个数
var buttons = $('button')
// alert(buttons.size())
// alert(buttons.length)
// 2、取出第二个按钮的文本
// var value = buttons[1].innerHTML
// var value = buttons.get(1).innerHTML
// alert(value)
// 3、输出所有按钮标签的文本
// index指的是下标,domEle指的是dom对象
// buttons.each(function(index, domEle) {
// alert(index + domEle.innerHTML)
// })
// 获取dom元素更直接方法是
// buttons.each(function() {
// console.log(this)
// })
// 4、输出'测试三'按钮是所有按钮的第几个
// alert($('#bt3').index())
// 自定义伪数组
//伪数组没有数组的特别方法 ：forEach() push() splice()
var weiArr = {}
weiArr.length = 0
weiArr[0] = "564564"
weiArr.length = 1
weiArr[1] = "helloword"
weiArr.length = 2
weiArr[2] = "你好"
weiArr.length = 3
for (var i = 0; i < weiArr.length; i++) {
var obj = weiArr[i];
alert(obj)
}
})
</script>
</body>
</html>选择器
-
选择器本身只是一个由特定语法规则的字符串，没有实质用处
-
它的基本语法规则使用的就是css的选择器语法，并对基进行了扩展
-
只有调用$,并将选择器作为参数传入才能起作用
-
$(selector)作用：
根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成为jQuery返回
分类：
-
基本选择器
-
层次选择器
-
过滤选择器
-
表单选择器
1、基本选择器：
最基本最常用的选择器
-
#id 例$('#id')
-
element(元素) 例$('button')
-
*
-
.class 例$('.class')
-
selector1,selector2,selectorN（并集选择器）
例$('.class,div') 意思是选择class为class或者元素为div的对象
-
selector1selector2selectorN（交集选择器）
例$('div.box') 意思是选择class为box且元素为div的对象
2、层次选择器：
查找子元素，后代元素，兄弟元素的选择器
-
ancestor descendant(找的是后代)
-
parent>child(找的是子元素)
-
prev+next
-
prev~siblings
3、过滤选择器：
在原有选择器匹配的元素值进行进一步过滤的选择器
基本
内容
可见性
属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> </head> <body> <div id="div1" class="box1">div1,box1</div> <div id="div2" class="box1">div2,box1</div> <div id="div3">div3</div> <span class="box2">span box2</span> <ul> <li class="box1">AAA</li> <li title="L">BBB</li> <li title="L">CCC</li> <li title="t">DDD</li> <li style="display: none;">隐藏的EEE</li> </ul> <!-- 要求： 1、选择第一个div 2、选择class不为box的div 3、选择第二个与第三的li 4、选择隐藏的li 5、选择title为l的li --> <script> $(function() { // 1、选择第一个div // $('div:first').css('background', 'red') // 2、选择class不为box的div // $('div:not(.box)').css('background', 'red') // 3、选择第二个与第三的li // :gt(index)在index索引之后 :lt(index)在index索引之前 // $('li:gt(0):lt(2)').css('background', 'red') // 4、选择隐藏的li // $('li:hidden').css({ // background: 'red', // display: '' // }) // 5、选择title为l的li $('li[title="L"]').css('background', 'red') // L的双引号可以不加 }) </script> </body> </html> -
-
4、表格选择器
表单
表单对象属性
:odd
概述
匹配所有索引值为奇数的元素，从 0 开始计数
查找表格的2、4、6行（即索引值1、3、5...）
HTML 代码:
<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>jQuery 代码:
$("tr:odd")结果:
[ <tr><td>Value 1</td></tr> ]:even
匹配所有索引值为偶数的元素，从 0 开始计数
描述:
查找表格的1、3、5...行（即索引值0、2、4...）
HTML 代码:
<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>jQuery 代码:
$("tr:even")结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ] -
案例：表格隔行变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <style> table { font-family: verdana, arial, sans-serif; font-size: 20px; color: #333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } thead td { background-color: sandybrown; } td { border-width: 1px; border-style: solid; border-color: #666666; width: 200px; height: 60px; text-align: center; } </style> </head> <body> <table id="table1"> <thead> <td>姓名</td> <td>年龄</td> <td>性别</td> <td>tel</td> </thead> <tbody> <tr> <td>张三1</td> <td>18</td> <td>男</td> <td>13027512079</td> </tr> <tr> <td>张三2</td> <td>18</td> <td>男</td> <td>13027512079</td> </tr> <tr> <td>张三3</td> <td>18</td> <td>男</td> <td>13027512079</td> </tr> <tr> <td>张三4</td> <td>18</td> <td>男</td> <td>13027512079</td> <tr> <td>张三5</td> <td>18</td> <td>男</td> <td>13027512079</td> </tr> </tbody> </table> <script> $(function() { $('#table1>tbody>tr:odd').css({ background: 'blue' }) }) </script> </body> </html>5、表单选择器
:type 选择对应类型的表单例：$(':text')
:disabled 查找所有不可用的input元素
:enabled 查找所有可用的input元素
:checked 匹配所有选中的被选中元素(复选框、单选框等， select中的option)，
对于select元素来说，获取选中推荐使用 :selected
:selected 匹配所有选中的option元素
.html()获取元素内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action=" "> 姓名： <input type="text"></br><br> 年龄： <input type="text"></br><br> 性别： <input type="radio" name="sex">男 <input type="radio" name="sex">女 <br><br> 爱好： <input type="checkbox">吉他 <input type="checkbox">钢琴 <input type="checkbox">竖笛 <input type="checkbox">其它 <br><br> 电子邮箱 <input type="text" disabled="disabled" placeholder="邮箱"> <br><br> 所在城市 <select name=" " id=" "> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广东</option> <option value="4" selected="selected ">深圳</option> </select> <br><br> <input type="submit" value="提交" id="sub"> </form> <!-- :disabled 查找所有不可用的input元素 :enabled 查找所有可用的input元素 :checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)， 对于select元素来说，获取选中推荐使用 :selected :selected 匹配所有选中的option元素 .html()获取元素内容 --> <script src="js/jquery-1.12.4.min.js"></script> <script> // 查找所有不可用text的input元素 $(':text:disabled').css('background', 'red') // 显示选择爱好的个数 $('#sub').click(function() { alert($(':checkbox:checked').length) // 显示所在城市的名字 var city = $('select>option:selected').html() alert(city) }) </script> </body> </html>
1487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
