jQuery学习笔记02
2024-05-14 19:39:54
05_基本选择器.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>05_基本选择器</title>
</head><body>
<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span><br>
<ul><li>AAAAA</li><li title="hello">BBBBB(title="hello")</li><li class="box">CCCCC(class="box")</li><li title="hello">DDDDDD(title="hello")</li>
</ul><!--
1. 是什么?- 有特定格式的字符串
2. 作用- 用来查找特定页面元素
3. 基本选择器- #id : id选择器- element : 元素选择器- .class : 属性选择器- * : 任意标签- selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)- selector1selector2selectorN : 取多个选择器的交集(相交选择器)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">/*需求:1. 选择id为div1的元素2. 选择所有的div元素3. 选择所有class属性为box的元素4. 选择所有的div和span元素5. 选择所有class属性为box的div元素*/$(function () {// 1. 选择id为div1的元素$('#div1').css('background', 'red')
// 2. 选择所有的div元素$('div').css('background', 'red')
// 3. 选择所有class属性为box的元素$('.box').css('background', 'red')
// 4. 选择所有的div和span元素$('div,span').css('background', 'red')
// 5. 选择所有class属性为box的div元素$('div.box').css('background', 'red') //不能写.boxdiv})
</script>
</body></html>
06_层次选择器.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>06_层次选择器</title>
</head><body>
<ul><li>AAAAA</li><li class="box">CCCCC</li><li title="hello"><span>BBBBB</span></li><li title="hello"><span>DDDD</span></li><span>EEEEE</span>
</ul><!--
层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
1. ancestor descendant在给定的祖先元素下匹配所有的后代元素
2. parent>child在给定的父元素下匹配所有的子元素
3. prev+next匹配所有紧接在 prev 元素后的 next 元素
4. prev~siblings匹配 prev 元素之后的所有 siblings 元素
--><script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">/*需求:1. 选中ul下所有的的span2. 选中ul下所有的子元素span3. 选中class为box的下一个li4. 选中ul下的class为box的元素后面的所有兄弟元素*/$(function () {//1. 选中ul下所有的的span$('ul span').css('background', 'red')
//2. 选中ul下所有的子元素span$('ul>span').css('background', 'red')
//3. 选中class为box的下一个li$('.box+li').css('background', 'red')
//4. 选中ul下的class为box的元素后面的所有兄弟元素$('ul .box~*').css('background', 'red')})
</script>
</body>
</html>
07_过滤选择器.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>07_过滤选择器</title>
</head><body>
<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul><li>AAAAA</li><li title="hello">BBBBB</li><li class="box">CCCCC</li><li title="hello">DDDDDD</li><li title="two">BBBBB</li><li style="display:none">我本来是隐藏的</li>
</ul>
<!--
在原有选择器匹配的元素中进一步进行过滤的选择器* 基本* 内容* 可见性* 属性
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">/*需求:1. 选择第一个div2. 选择最后一个class为box的元素3. 选择所有class属性不为box的div4. 选择第二个和第三个li元素5. 选择内容为BBBBB的li6. 选择隐藏的li7. 选择有title属性的li元素8. 选择所有属性title为hello的li元素*/$(function () {//1. 选择第一个div$('div:first').css('background', 'red')
//2. 选择最后一个class为box的元素$('.box:last').css('background', 'red')
//3. 选择所有class属性不为box的div$('div:not(.box)').css('background', 'red')
//4. 选择第二个和第三个li元素$('li:gt(0):lt(2)').css('background', 'red') //索引起始位置发生变化，重新开始计算$('li:lt(3):gt(0)').css('background', 'red') //正确索引位置
//5. 选择内容为BBBBB的li$('li:contains(BBBBB)').css('background', 'red')
//6. 选择隐藏的li$('li:hidden ').show()
//7. 选择有title属性的li元素$('li[title]').css('background', 'red')
//8. 选择所有属性title为hello的li元素$('li[title=hello]').css('background', 'red')})
</script>
</body></html>
08_表单选择器.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>08_表单选择器</title>
</head><body>
<form>用户名: <input type="text"/><br>密 码: <input type="password"/><br>爱 好:<input type="checkbox" checked="checked"/>篮球<input type="checkbox" checked="checked"/>足球<input type="checkbox" checked="checked"/>羽毛球 <br>性 别:<input type="radio" name="sex" value='male'/>男<input type="radio" name="sex" value='female'/>女<br>邮 箱: <input type="text" name="email" disabled="disabled"/><br>所在地:<select><option value="1">北京</option><option value="2" selected="selected">天津</option><option value="3">河北</option></select><br><input type="submit" value="提交"/>
</form>
<!--
表单选择器1). 表单2). 表单对象属性
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">/*需求:1. 选择不可用的文本输入框2. 显示选择爱好 的个数3. 显示选择的城市名称*/$(function () {//1. 选择不可用的文本输入框$(':input:disabled').css('background', 'red')
//2. 显示选择爱好 的个数console.log($(':checkbox:checked').length)
//3. 显示选择的城市名称console.log($('select>option:selected').html())console.log($('select').val()) //得到的是选择的option的value})
</script>
</body>
</html>
09_$工具方法.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>09_$工具方法</title>
</head>
<body>
<!--
1. $.each(): 遍历数组或对象中的数据
2. $.trim(): 去除字符串两边的空格
3. $.type(obj): 得到数据的类型
4. $.isArray(obj): 判断是否是数组
5. $.isFunction(obj): 判断是否是函数
6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">//1. $.each(): 遍历数组或对象中的数据var person = {name: 'tom',age: 12}$.each(person, function (key, value) {console.log(key, value)})//2. $.trim(): 去除字符串两边的空格//3. $.type(obj): 得到数据的类型console.log($.type($) === "function")//4. $.isArray(obj): 判断是否是数组console.log($.isArray($())) //falseconsole.log($.isArray([])) //true//5. $.isFunction(obj): 判断是否是函数console.log($.isFunction($)) //trueconsole.log($.isFunction($())) //false//6. $.parseJSON(json) : 解析json字符串转换为js对象/数组/*json整体就2种类型:1.json对象 : {key1:value1 , key2:value2}2. json数组: [value1, value2]3. key只能是字符串4. value的类型:numberstringbooleannull[]{}*/var json = '{"username":"jack", "age" : 12}'console.log($.parseJSON(json)) //js对象json = '[{"username":"jack", "age" : 12},{"username":"Tom", "age" : 13}]'console.log($.parseJSON(json)) //js数组</script>
</body>
</html>
10_属性.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>10_属性</title>
</head>
<body><div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box" title="two">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul><li>AAAAA</li><li title="hello" class="box2">BBBBB</li><li class="box">CCCCC</li><li title="hello">DDDDDD</li><li title="two"><span>BBBBB</span></li>
</ul><input type="text" name="username" value="guiguClass"/>
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>选中</button>
<button>不选中</button><!--
1. 操作任意属性attr()removeAttr()prop()
2. 操作class属性addClass()removeClass()
3. 操作HTML代码/文本/值html()val()
--><script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">/*需求:1. 读取第一个div的title属性2. 给所有的div设置name属性(value为atguigu)3. 移除所有div的title属性4. 给所有的div设置class='guiguClass'5. 给所有的div添加class='abc'6. 移除所有div的guiguClass的class7. 得到最后一个li的标签体文本8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"9. 得到输入框中的value值10. 将输入框的值设置为atguigu11. 点击'全选'按钮实现全选12. 点击'全不选'按钮实现全不选*/$(function () {// 1. 读取第一个div的title属性console.log($('div:first').attr('title'))
// 2. 给所有的div设置name属性(value为atguigu)$('div').attr('name', 'atguigu')
// 3. 移除所有div的title属性$('div').removeAttr('title')
// 4. 给所有的div设置class='guiguClass'$('div').attr('class', 'guiguClass')
// 5. 给所有的div添加class值(abc)$('div').addClass('abc')
// 6. 移除所有div的guiguClass的class$('div').removeClass('guiguClass')
// 7. 得到最后一个li的标签体文本console.log($('li:last').html())
// 8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"$('li:first').html('<h1>mmmmmmmmm</h1>')
// 9. 得到输入框中的value值console.log($(':text').val())
// 10. 将输入框的值设置为atguigu$(':text').val('atguigu')
// 11. 点击'全选'按钮实现全选$('button:first').click(function () {$(':checkbox').prop('checked', true)})
// 12. 点击'全不选'按钮实现全不选$('button:last').click(function () {$(':checkbox').prop('checked', false)})})</script>
</body>
</html>
11_css.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>11_css</title>
</head>
<body>
<p style="color: blue;">尚硅谷的后裔</p>
<p style="color: green;">太阳的后裔</p><!--
设置css样式/读取css值css()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">/*1. 得到第一个p标签的颜色2. 设置所有p标签的文本颜色为red3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)*/$(function () {//1. 得到第一个p标签的颜色console.log($('p:first').css('color'))
//2. 设置所有p标签的文本颜色为red$('p').css('color', 'red')
//3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px) //对象$('p:eq(1)').css({color: '#ff0011',background: 'blue',width: 300,height: 30})})
</script>
</body>
</html>
12_offset和position.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>12_offset和position</title>
</head>
<style type="text/css">* {margin: 0px;}.div1 {position: absolute;width: 200px;height: 200px;top: 20px;left: 10px;background: blue;}.div2 {position: absolute;width: 100px;height: 100px;top: 50px;background: red;}.div3 {position: absolute;top: 250px;}
</style>
<body style="height: 2000px;"><div class="div1"><div class="div2">测试offset</div>
</div><div class='div3'><button id="btn1">读取offset和position</button><button id="btn2">设置offset</button>
</div><!--
获取/设置标签的位置数据* offset(): 相对页面左上角的坐标* position(): 相对于父元素左上角的坐标
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">/*需求:1. 点击 btn1打印 div1 相对于页面左上角的位置打印 div2 相对于页面左上角的位置打印 div1 相对于父元素左上角的位置打印 div2 相对于父元素左上角的位置2. 点击 btn2设置 div2 相对于页面的左上角的位置*/$(function () {// 读取offset和position$('#btn1').click(function () {var offset1 = $('.div1').offset()console.log(offset1.left, offset1.top)var offset2 = $('.div2').offset()console.log(offset2.left, offset2.top)var position1 = $('.div1').position()console.log(position1.left, position1.top)var position2 = $('.div2').position()console.log(position2.left, position2.top)})// 设置offset$('#btn2').click(function () {$('.div2').offset({left: 20,top: 40})})})
</script>
</body>
</html>
13_元素滚动.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>13_元素滚动</title>
</head>
<body style="height: 2000px;">
<div style="border:1px solid black;width:100px;height:150px;overflow:auto">This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text.his is some text.
</div>
<br>
<br>
<br>
<button id="btn1">得到scrollTop</button>
<button id="btn2">设置scrollTop</button><!--
1. scrollTop():读取/设置滚动条的Y坐标
2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()读取页面滚动条的Y坐标(兼容chrome和IE)
3. $('body,html').scrollTop(60);滚动到指定位置(兼容chrome和IE)
-->
<script src="js/jquery-1.10.1.js"></script>
<script>/*需求:1. 得到div或页面滚动条的坐标2. 让div或页面的滚动条滚动到指定位置*/$(function () {// 1. 得到div或页面滚动条的坐标$('#btn1').click(function () {console.log($('div').scrollTop())console.log($('body').scrollTop() + $('html').scrollTop())console.log($(document.body).scrollTop() + $(document.documentElement).scrollTop())})// 2. 让div或页面的滚动条滚动到指定位置$('#btn2').click(function () {$('div').scrollTop(150)$('body, html').scrollTop(200)})})
</script>
</body></html>
14_元素的尺寸.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>14_元素的尺寸</title>
</head>
<style>div {width: 100px;height: 150px;background: red;padding: 10px;border: 10px #fbd850 solid;margin: 10px;}
</style>
</head><body>
<div>div</div><!--
1. 内容尺寸height(): heightwidth(): width
2. 内部尺寸innerHeight(): height+paddinginnerWidth(): width+padding
3. 外部尺寸outerHeight(false/true): height+padding+border 如果是true, 加上marginouterWidth(false/true): width+padding+border 如果是true, 加上margin
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script>$(function () {var $div = $('div')// 内容尺寸console.log($div.width(), $div.height())// 内部尺寸console.log($div.innerWidth(), $div.innerHeight())//外部尺寸console.log($div.outerWidth(), $div.outerHeight())console.log($div.outerWidth(true), $div.outerHeight(true))})
</script>
</body></html>
15_筛选_过滤.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>15_筛选_过滤</title>
</head><body>
<ul><li>AAAAA</li><li title="hello" class="box2">BBBBB</li><li class="box">CCCCC</li><li title="hello">DDDDDD</li><li title="two"><span>BBBBB</span></li>
</ul>
<li>eeeee</li>
<li>EEEEE</li>
<br><!--
在jQuery对象中的元素对象数组中过滤出一部分元素来
1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)
--><script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">/*需求:1. ul下li标签第一个2. ul下li标签的最后一个3. ul下li标签的第二个4. ul下li标签中title属性为hello的5. ul下li标签中title属性不为hello的6. ul下li标签中有span子标签的*/$(function () {var $lis = $('ul>li');
//1. ul下li标签第一个$lis.first().css('background', 'red')
//2. ul下li标签的最后一个$lis.last().css('background', 'red')
//3. ul下li标签的第二个$lis.eq(1).css('background', 'red')
//4. ul下li标签中title属性为hello的$lis.filter('[title=hello]').css('background', 'red')
//5. ul下li标签中title属性不为hello的$lis.not('[title=hello]').css('background', 'red')$lis.filter('[title][title!=hello]').css('background', 'red')
//6. ul下li标签中有span子标签的$lis.has('span').css('background', 'red')})
</script>
</body>
</html>
jQuery学习笔记02相关推荐
- jQuery学习笔记02：核心部分
jQuery学习笔记:核心部分 一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素 参数:expr(字符串,一个查询表达式或一段html字符串 ...
- JavaWeb-综合案例(用户信息)-学习笔记02【登录功能】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...
- XML学习笔记02【xml_解析】
Java后端 学习路线 笔记汇总表[黑马程序员] XML学习笔记01[xml_基础.xml_约束][day01] XML学习笔记02[xml_解析][day01] 目录 03 xml_解析 xml_解 ...
- Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- JavaWeb黑马旅游网-学习笔记02【注册功能】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
- Servlet和HTTP请求协议-学习笔记02【Servlet_体系结构与urlpartten配置、HTTP请求协议】
Java后端 学习路线 笔记汇总表[黑马程序员] Servlet和HTTP请求协议-学习笔记01[Servlet_快速入门-生命周期方法.Servlet_3.0注解配置.IDEA与tomcat相关配置 ...
- Tomcat学习笔记02【Tomcat部署项目】
Java后端 学习路线 笔记汇总表[黑马程序员] Tomcat学习笔记01[Web相关概念.Tomcat基本操作][day01] Tomcat学习笔记02[Tomcat部署项目][day01] 目录 ...
- JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- JDBC学习笔记02【ResultSet类详解、JDBC登录案例练习、PreparedStatement类详解】
黑马程序员-JDBC文档(腾讯微云)JDBC笔记.pdf:https://share.weiyun.com/Kxy7LmRm JDBC学习笔记01[JDBC快速入门.JDBC各个类详解.JDBC之CR ...
最新文章
- 【PHPExcel】各种数据类型
- Spring 通过工厂方法(Factory Method)来配置bean
- rxjs里subscribeToArray的一个JavaScript模拟实现
- Neo4j：找到两个纬度/经度之间的中点
- java函数和构造函数_JAVA的构造器和C++的构造函数有什么区别？
- centos 6 mysql 5.7.13 编译安装_Centos 6.5 下面 源码编译 安装 Mysql 5.7.13
- ES6学习--Javascript中的那三个点（...）
- 美的董事长：数字化每年投几十亿，看不见结果我也焦虑
- Python pyserial 串口开发
- zigbee网关 CC2530 zstack用手机显示终端传来的lm75a温度传感器的值
- Linux 文件后面带星号
- matlab hanning和hann,哪位大侠能告知——为什么在MATLAB2012中不能调研（汉宁）窗函...
- 4330. 非传递骰子
- lets ok play_OK K.O.! Let’s Play Heroes
- 基于stm32的DHT11、光照强度、烟雾浓度、振动频率的proteus仿真（全网第一）
- 拉线位移编码器零线有电的原因
- 用Python给图片加水印
- 【微信小程序】云函数/云数据库 errMsg: parameter should be object instead of undefined
- 【STM32F4系列】【HAL库】【自制库】ps2手柄模块驱动
- 桌面程序加sql数据库服务器,在桌面上安装和部署 (SQL Server Compact)