过滤选择器
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>07_过滤选择器</title> 7 </head> 8 9 <body> 10 11 <div id="div1" class="box">class为box的div1</div> 12 <div id="div2" class="box">class为box的div2</div> 13 <div id="div3">div3</div> 14 <span class="box">class为box的span</span> 15 <br/> 16 <ul> 17 <li>AAAAA</li> 18 <li title="hello">BBBBB</li> 19 <li class="box">CCCCC</li> 20 <li title="hello">DDDDDD</li> 21 <li title="two">BBBBB</li> 22 <li style="display:none">我本来是隐藏的</li> 23 </ul> 24 <!-- 25 在原有选择器匹配的元素中进一步进行过滤的选择器 26 * 基本 27 * 内容 28 * 可见性 29 * 属性 30 --> 31 <script src="js/jquery-1.10.1.js" type="text/javascript"></script> 32 <script type="text/javascript"> 33 34 /* 35 需求: 36 1. 选择第一个div 37 2. 选择最后一个class为box的元素 38 3. 选择所有class属性不为box的div 39 4. 选择第二个和第三个li元素 40 5. 选择内容为BBBBB的li 41 6. 选择隐藏的li 42 7. 选择有title属性的li元素 43 8. 选择所有属性title为hello的li元素 44 */ 45 //1. 选择第一个div 46 // $('div:first').css('background', 'red') 47 48 //2. 选择最后一个class为box的元素 49 //$('.box:last').css('background', 'red') 50 51 //3. 选择所有class属性不为box的div 52 // $('div:not(.box)').css('background', 'red') //没有class属性也可以 53 54 //4. 选择第二个和第三个li元素，lt（）小于， gt()大于，从前到后执行 55 // $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次 56 //$('li:lt(3):gt(0)').css('background', 'red') 57 // console.log($('li:lt(3):gt(0)').length, $('li:lt(3):gt(0)')[0]) 58 59 //5. 选择内容为BBBBB的li 60 // $('li:contains("BBBBB")').css('background', 'red')//"BBBBB" 必须为双引号 61 62 //6. 选择隐藏的li 63 // console.log($('li:hidden').length, $('li:hidden')[0]) 64 65 //7. 选择有title属性的li元素 66 // $('li[title]').css('background', 'red') 67 // console.log($('li')[1].title) 68 //8. 选择所有属性title为hello的li元素 69 $('li[title="hello"]').css('background', 'red') 70 71 </script> 72 </body> 73 74 </html>
表单选择器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>08_表单选择器</title> 6 </head> 7 8 <body> 9 <form> 10 用户名: <input type="text"/><br> 11 密 码: <input type="password"/><br> 12 爱 好: 13 <input type="checkbox" checked="checked"/>篮球 14 <input type="checkbox"/>足球 15 <input type="checkbox" checked="checked"/>羽毛球 <br> 16 性 别: 17 <input type="radio" name="sex" value='male'/>男 18 <input type="radio" name="sex" value='female'/>女<br> 19 邮 箱: <input type="text" name="email" disabled="disabled"/><br> 20 所在地: 21 <select> 22 <option value="1">北京</option> 23 <option value="2" selected="selected">天津</option> 24 <option value="3">河北</option> 25 </select><br> 26 <input type="submit" value="提交"/> 27 </form> 28 <!-- 29 表单选择器 30 1). 表单 31 2). 表单对象属性 32 --> 33 <script src="js/jquery-1.10.1.js" type="text/javascript"></script> 34 <script type="text/javascript"> 35 /* 36 需求: 37 1. 选择不可用的文本输入框 38 2. 显示选择爱好 的个数 39 3. 显示选择的城市名称 40 */ 41 42 // 通过type类型寻找 43 //1. 选择不可用的文本输入框 44 // $(':text:disabled').css('background', 'red') 45 // $(':password').css('background','red') 46 47 //2. 显示选择爱好 的个数 48 // 通过type类型寻找 49 console.log($(':checkbox:checked').length) 50 //通过标签名寻找 51 // console.log($('input:checked').length) 52 53 //3. 显示选择的城市名称 54 $(':submit').click(function () { 55 //通过标签名寻找 56 var city = $('select>option:selected').html() // 选择的option的标签体文本 57 city = $('select').val() // 选择的option的value属性值 58 alert(city) 59 console.log($('select>option')[0]) 60 61 }) 62 63 </script> 64 </body> 65 </html>
$工具方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>09_$工具方法</title> 6 </head> 7 <body> 8 <!-- 9 1. $.each(): 遍历数组或对象中的数据 10 2. $.trim(): 去除字符串两边的空格 11 3. $.type(obj): 得到数据的类型 12 4. $.isArray(obj): 判断是否是数组 13 5. $.isFunction(obj): 判断是否是函数 14 6. $.parseJSON(json) : 解析json字符串转换为js对象/数组 15 --> 16 <script src="js/jquery-1.10.1.js" type="text/javascript"></script> 17 <script type="text/javascript"> 18 //1. $.each(): 遍历数组或对象中的数据 19 var obj = { 20 name: 'Tom', 21 setName: function (name) { 22 this.name = name 23 } 24 } 25 $.each(obj, function (key, value) { 26 console.log(key, value) 27 }) 28 29 //2. $.trim(): 去除字符串两边的空格 30 //3. $.type(obj): 得到数据的类型 31 console.log($.type($)) // 'function' 32 33 //4. $.isArray(obj): 判断是否是数组 34 console.log($.isArray($('body')), $.isArray([])) // false true 35 //5. $.isFunction(obj): 判断是否是函数 36 console.log($.isFunction($)) // true 37 //6. $.parseJSON(json) : 解析json字符串转换为js对象/数组 38 var json = '{"name":"Tom", "age":12}' // json对象: {} 39 // json对象===>JS对象 40 console.log($.parseJSON(json)) 41 json = '[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: [] 42 // json数组===>JS数组 43 console.log($.parseJSON(json)) 44 /* 45 JSON.parse(jsonString) json字符串--->js对象/数组 46 JSON.stringify(jsObj/jsArr) js对象/数组--->json字符串 47 48 var arr=[5,7,9,08,45,9]; 49 var result=JSON.stringify(arr)//js数组转换成json 50 console.log(result) 51 var k=JSON.parse(result) 52 console.log(k) 53 */ 54 </script> 55 </body> 56 </html>
属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>10_属性</title> 6 </head> 7 <body> 8 9 <div id="div1" class="box" title="one">class为box的div1</div> 10 <div id="div2" class="box" title="two">class为box的div2</div> 11 <div id="div3">div3</div> 12 <span class="box">class为box的span</span> 13 <br/> 14 <ul> 15 <li>AAAAA</li> 16 <li title="hello" class="box2">BBBBB</li> 17 <li class="box">CCCCC</li> 18 <li title="hello">DDDDDD</li> 19 <li title="two"><span>BBBBB</span></li> 20 </ul> 21 22 <input type="text" name="username" value="guiguClass"/> 23 <br> 24 <input type="checkbox"> 25 <input type="checkbox"> 26 <br> 27 <button>选中</button> 28 <button>不选中</button> 29 30 <!-- 31 1. 操作任意属性 32 attr() 33 removeAttr() 34 prop() 35 2. 操作class属性 36 addClass() 37 removeClass() 38 3. 操作HTML代码/文本/值 39 html() 40 val() 41 --> 42 43 <script src="js/jquery-1.10.1.js" type="text/javascript"></script> 44 <script type="text/javascript"> 45 /* 46 需求: 47 1. 读取第一个div的title属性 48 2. 给所有的div设置name属性(value为atguigu) 49 3. 移除所有div的title属性 50 4. 给所有的div设置class='guiguClass' 51 5. 给所有的div添加class='abc' 52 6. 移除所有div的guiguClass的class 53 7. 得到最后一个li的标签体文本 54 8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>" 55 9. 得到输入框中的value值 56 10. 将输入框的值设置为atguigu 57 11. 点击'全选'按钮实现全选 58 12. 点击'全不选'按钮实现全不选 59 */ 60 //1. 读取第一个div的title属性 61 // console.log($('div:first').attr('title')) // one 62 63 //2. 给所有的div设置name属性(value为atguigu) 64 // $('div').attr('name', 'atguigu') 65 66 //3. 移除所有div的title属性 67 // $('div').removeAttr('title') 68 69 //4. 给所有的div设置class='guiguClass' 70 //$('div').attr('class', 'guiguClass') //重置了原来的内联样式 71 72 //5. 给所有的div添加class='abc' 73 //$('div').addClass('abc') //保留原来的内联样式 74 75 //6. 移除所有div的guiguClass的class 76 //$('div').removeClass('guiguClass') 77 78 //7. 得到最后一个li的标签体文本 79 //console.log($('li:last').html()) 80 81 //8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>" 82 //$('li:first').html('<h1>mmmmmmmmm</h1>') 83 84 //9. 得到输入框中的value值 85 //console.log($(':text').val()) // 读取, jq的方法获取value 86 87 //10. 将输入框的值设置为atguigu 88 //$(':text').val('atguigu') // 设置 读写合一 89 //11. 点击'全选'按钮实现全选 90 // attr(): 操作属性值为非布尔值的属性 91 // prop(): 专门操作属性值为布尔值的属性 92 var $checkboxs = $(':checkbox') 93 $('button:first').click(function () { 94 $checkboxs.prop('checked', true) 95 }) 96 97 // 方法二； 98 $($('button')[0]).click(function(){ 99 // alert('dni') 100 $checkboxs.prop('checked',true) 101 102 }) 103 //12. 点击'全不选'按钮实现全不选 104 $('button:last').click(function () { 105 $checkboxs.prop('checked', false) 106 }) 107 108 // 方法二 109 $($('button')[1]).click(function(){ 110 $checkboxs.prop('checked', false) 111 }) 112 </script> 113 </body> 114 </html>
css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>11_css</title> 6 </head> 7 <body> 8 <p style="color: blue;">尚硅谷的后裔</p> 9 <p style="color: green;">太阳的后裔</p> 10 11 <!-- 12 设置css样式/读取css值 13 css() 14 --> 15 <script src="js/jquery-1.10.1.js" type="text/javascript"></script> 16 <script type="text/javascript"> 17 /* 18 1. 得到第一个p标签的颜色 19 2. 设置所有p标签的文本颜色为red 20 3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px) 21 */ 22 //1. 得到第一个p标签的颜色 23 //console.log($('p:first').css('color')) 24 25 //2. 设置所有p标签的文本颜色为red 26 //$('p').css('color', 'red') 27 28 //3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px) 29 $('p:eq(1)').css({ 30 color: '#ff0011', 31 background: 'blue', 32 300, 33 height: 30 34 }) 35 36 // 方法二； 37 $($('p')[1]).css({ 38 color:'#ff0011', 39 background:'blue', 40 '300px', 41 height:'30px' 42 43 }) 44 45 </script> 46 </body> 47 </html>
offset和position
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>12_offset和position</title> 6 </head> 7 <style type="text/css"> 8 * { 9 margin: 0px; 10 } 11 12 .div1 { 13 position: absolute; 14 width: 200px; 15 height: 200px; 16 top: 20px; 17 left: 10px; 18 background: blue; 19 } 20 21 .div2 { 22 position: absolute; 23 width: 100px; 24 height: 100px; 25 top: 50px; 26 background: red; 27 } 28 29 .div3 { 30 position: absolute; 31 top: 250px; 32 } 33 </style> 34 <body style="height: 2000px;"> 35 36 <div class="div1"> 37 <div class="div2">测试offset</div> 38 </div> 39 40 <div class='div3'> 41 <button id="btn1">读取offset和position</button> 42 <button id="btn2">设置offset</button> 43 </div> 44 45 <!-- 46 获取/设置标签的位置数据 47 * offset(): 相对页面左上角的坐标 48 * position(): 相对于父元素左上角的坐标 49 --> 50 <script src="js/jquery-1.10.1.js" type="text/javascript"></script> 51 <script type="text/javascript"> 52 /* 53 需求: 54 1. 点击 btn1 55 打印 div1 相对于页面左上角的位置 56 打印 div2 相对于页面左上角的位置 57 打印 div1 相对于父元素左上角的位置 58 打印 div2 相对于父元素左上角的位置 59 2. 点击 btn2 60 设置 div2 相对于页面的左上角的位置 61 */ 62 $('#btn1').click(function () { 63 // 打印 div1 相对于页面左上角的位置 64 var offset = $('.div1').offset() 65 console.log(offset.left, offset.top) // 10 20 66 // 打印 div2 相对于页面左上角的位置 67 offset = $('.div2').offset() 68 console.log(offset.left, offset.top) // 10 70 69 // 打印 div1 相对于父元素左上角的位置 70 var position = $('.div1').position() 71 console.log(position.left, position.top) // 10 20 72 // 打印 div2 相对于父元素左上角的位置 73 position = $('.div2').position() 74 console.log(position.left, position.top) // 0 50 75 console.log(position) //{top: 50, left: 0} 76 }) 77 78 $('#btn2').click(function () { //offset()可以设置参数 79 $('.div2').offset({ 80 left: 50, 81 top: 100 82 }) 83 }) 84 </script> 85 </body> 86 </html>
元素滚动
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>13_元素滚动</title> 7 </head> 8 <body style="height: 2000px;"> 9 <div style="border:1px solid black;100px;height:150px;overflow:auto"> 10 This is some text. This is some text. This is some text. This is some text. 11 This is some text. This is some text. This is some text. This is some text. 12 This is some text. This is some text. This is some text. This is some text. 13 This is some text. This is some text. This is some text. This is some text. 14 This is some text. This is some text. This is some text. This is some text. 15 This is some text. This is some text. This is some text. This is some text. 16 his is some text. 17 </div> 18 <br> 19 <br> 20 <br> 21 <button id="btn1">得到scrollTop</button> 22 <button id="btn2">设置scrollTop</button> 23 24 <!-- 25 1. scrollTop(): 26 读取/设置滚动条的Y坐标 27 2. $(document.body).scrollTop()+$(document.documentElement).scrollTop() 28 读取页面滚动条的Y坐标(兼容chrome和IE) 29 3. $('body,html').scrollTop(60); 30 滚动到指定位置(兼容chrome和IE) 31 --> 32 <script src="js/jquery-1.10.1.js"></script> 33 <script> 34 /* 35 需求: 36 1. 得到div或页面滚动条的坐标 37 2. 让div或页面的滚动条滚动到指定位置 38 */ 39 //1. 得到div或页面滚动条的坐标 40 $('#btn1').click(function () { 41 console.log($('div').scrollTop()) 42 // console.log($('html').scrollTop()+$('body').scrollTop()) 43 console.log($('body,html').scrollTop()) //兼容ie 44 console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop()) // 兼容IE/Chrome 45 }) 46 //2. 让div或页面的滚动条滚动到指定位置 47 $('#btn2').click(function () { //scrollTop(200), 可以设置参数 48 $('div').scrollTop(200) 49 $('html,body').scrollTop(300) 50 }) 51 </script> 52 </body> 53 54 </html>