伪类选择器 未访问a:link 访问过 a:visited 悬停 a:hover 点击时 a:active
####常用样式属性
-
color 字体颜色
-
border 边框
-
background-color 背景颜色
#####颜色的赋值方式
-
通过颜色名称赋值 red blue pink yellow green …
-
通过6位的16进制赋值 ，每两位表示一个颜色每个颜色的取值为0-255 三原色 rgb redgreenblue红绿蓝（了解）
举例：红色 #ff0000 蓝色 #0000ff 绿色 #00ff00
黄色 #ffff00 黑色 #000000 白色 #ffffff
-
通过3位的16进制赋值 #0f0 等效 #00ff00
-
通过三位10进制赋值 rgb(0-255,0-255,0-255); 红色 rgb(255,0,0);
-
通过四位10进制赋值 alpha：透明度 rgba(0-255,0-255,0-255,0-1); 透明度值越小越透明 background-color: rgba(255,0,0,0.2)
#####设置背景图片
/设置图片/
background-image:url(“…/imgs/a.jpg”)
控制属性背景图片的平铺效果:
background-repeat:repeat;
-repeat; 在垂直方向和水平方向重复，为重复值
-repeat-x; 仅在水平方向重复
· -repeat-y；仅在垂直方向重复
· -no-repeat；仅显示一次
/* 设置元素的宽高 _/
width: 500px;
height: 500px;
background-color: yellow;
/_ 设置背景图片 _/
background-image: url(“…/imgs/k.jpg”);
/_ 设置背景图片的尺寸
如果图片尺寸小于元素的尺寸
则会自动重复平铺 _/
background-size: 300px 300px;
/_ 禁止重复 _/
background-repeat: no-repeat;
/_ 控制背景图片的位置
1.横向位置 left/center/right左中右
2.纵向位置 top/center/bottom上中下
可以实现9宫格的9个位置
_/
/_ background-position: center center; _/
/_ 通过百分比控制位置
第一个参数0代表左边缘 100%代表右边缘
第二个参数0代表上边缘 100%代表下边缘
_/
background-position: 80% 80%;
####练习 创建demo10 页面中添加三个div 第一个div尺寸300_300 设置背景图片正好填充，要求图片全部显示，第二个div尺寸500_500，背景颜色为红色 背景图片尺寸100_100 要求图片只显示一张显示在正中间，第三个div尺寸200_200背景绿色 图片100_100显示在div的左下角的位置（要求使用百分比方式控制位置）
———————————————————————————————————
###布局相关的样式
####盒子模型
- 盒子模型包括元素的宽高，外边距，内边距和边框。
#####元素的宽高
-
width/height 通过该属性设置元素的宽高
-
只能对块级元素设置宽高，行内元素的宽高只能受内容影响
#####外边距
-
指元素距离上级元素边框或相邻兄弟元素边框
-
如何设置外边距：
/* 给某个方向外边距单独赋值 */
/* margin-top: 20px; 上
margin-left: 20px; 右
margin-bottom: 10px; 下
margin-right: 20px; */ 左
/* 批量赋值外边距 */
/* margin: 30px; // 四个方向全是30 */
/* margin: 10px 30px; // 上下10 左右30 */
/* margin: 0 auto; // 水平居中 */
margin: 10px 20px 30px 40px;/* 上右下左 */
-
如果元素的上边缘和上级元素的上边缘重叠此时添加上外边距会出现粘连效果，通过给上级元素添加overflow:hidden解决
-
如果上下相邻两元素同时添加了下外边距和上外边距，取最大值。
####行内元素外边距相关
-
行内元素左右外边距生效，上下不生效
-
左右相邻两个元素 同时存在右外边距和左外边距时取两个值相加之和
上下取最大，左右相加
#####边框
/1.粗细 2.样式 3.颜色/
/border: 19px solid blue;实线/
/border: 10px dashed read;虚线/
/border: 10px groove green;凹槽线/
/border: 10px inset yellow;嵌入式线/
/* 单独给元素的某一个方向添加边框 _/
border-top: 12px solid green; 上
border-left: 12px solid blue; 右
border-bottom: 12px solid pink; 下
border-right: 12px solid yellow; 左
/_ 值越大越圆 */
border-radius: 4px;
-
块级元素：四个边加边框全部生效并且全部影响元素所占宽高
-
行内元素：四个边加边框全部生效 ，但是左右边框会影响元素所占宽度上下边框不影响元素所占高度
#####内边距
- 什么是内边距：元素边框距内容的距离
/* 内边距会影响元素的宽高 _/
/_ padding-left: 20px;
padding-top: 20px; _/
padding: 10px; /_ 四个边的内边距都是10px _/
padding: 10px 20px; /_ 上下10 左右20 _/
padding: 10px 20px 30px 40px; /_ 上右下左 */
-
块级元素：内边距全部生效并且会影响元素的所占宽高
-
行内元素：内边距全部生效但是左右内边距会影响元素所占宽度上下内边距不影响元素所占高度
#####块级元素和行内元素关于盒子模型的总结
-
块级元素：可以设置宽高，外边距全部生效，边框全部生效并且全部影响宽高，内边距全部生效并且全部影响宽高
-
行内元素：不可以设置宽高，外边距左右生效上下不生效，边框全部生效但是左右影响宽，上下不影响高，内边距全部生效但是左右影响宽上下不影响高
####文本相关属性
/* 文本对齐方式 left/center/right 左中右*/
text-align: center;
/* 文本修饰
underline下划线
overline上划线
line-through删除线
none 无
删除线使用
text-decoration: line-through;*/
/*去掉ul的点
ul{list-style:none;*/
/*去掉超链接的下划线 指向a
text-decoration: none;*/
/* 文本颜色 */
color: green;
/* 文本阴影
1 阴影颜色
2和3 代表阴影偏移坐标
4 阴影模糊程度值越大越模糊
*/
text-shadow: red 5px 5px 5px;
/* 行高 用于实现上下居中 */
line-height: 50px;
####字体相关属性
/* 字体大小 单位像素*/
font-size: 10px;
/* 字体粗细 bold加粗
normal 默认效果 */
font-weight: bold;
/* 斜体 */
font-style: italic;
/* 字体名称 可以赋值多个 依次检测
哪个可用用哪个 */
font-family: Microsoft YaHei, Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
###课程回顾：
-
盒子模型： 外边距 内边距 边框 宽高
-
宽度计算公式：左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距
####学子商城首页练习：
-
段落标签p自带上下外边距，如果不需要可以设置成margin：0;
-
display：block;是把行内元素改成块级元素
-
float:left/right; 浮动元素 明天会细讲
####溢出设置 overflow
-
超出范围隐藏 overflow:hidden;
-
超出范围显示 overflow:visible;
-
超出范围滚动显示 overflow:scroll;
4.解决粘连问题:
####显示方式 display
-
block：块级元素的默认值，可以设置宽高 盒子模型相关没有任何限制，但是元素必须独占一行
-
inline: 行内元素的默认值，可以和多个行内元素共占一行，不能修改宽高，而且盒子模型相关的上下(外边距，内边距，边框)不能赋值或没有效果
-
inline-block: 行内块，可以修改宽高 也可以共占一行
———————————————————————————————————
浮动:float: left;左浮动 float:right; 右浮动
###定位
####position定位
#####文档流定位（静态定位）
-
默认是文档流定位 元素如果是文档流定位则显示的位置会从上到下 从左向右排列
-
设置方式： position:static；
#####相对定位
-
相对定位元素不会脱离文档流，不影响其它元素的位置，相对定位通过上右下左让元素相对于元素初始位置做偏移
-
设置方式： position：relative；
直接top,right,left,bottom上右左下调位置 left:10px;(右移用左，下移用上)
-
应用场景：存在于页面中的元素如果需要做位置移动，但是不希望页面中的其它元素跟着移动，此时使用相对定位
-
总结：不脱离文档流，相对于初始位置
#####绝对定位
-
元素脱离文档流，后面的元素会往上顶，上下左右的值相对于窗口或相对于做了非static定位(推荐相对定位)的祖先元素，如果多个祖先元素做了相对定位则就近原则。
-
设置方式： position：absolute；
直接top,right,left,bottom上右左下调位置 top:10px;(右移用左，下移用上)
-
应用场景：当元素需要层叠显示并且不希望元素存在于文档流中时使用
-
总结： 脱离文档流，相对于窗口或相对定位的祖先元素
#####固定定位
-
元素固定在窗口的某个位置，不会因为内容位置的改变改变自身位置
-
设置方式： position:fixed;
-
总结：脱离文档流，相对于窗口
####浮动定位
元素脱离文档流，元素可以在当前所在行左侧或右侧浮动，当撞到父元素边框或行内其他浮动元素时停止
-
如果一行浮动元素装不下会自动换行，换行时有可能会被卡住
-
如果元素上面的元素浮动了则元素会往上顶，如果不希望元素往上顶可以设置元素两侧不允许有浮动 clear:both
-
当元素的所有子元素全部浮动时此时自动识别的高度为0，
通过overflow：hidden解决
- 应用场景：把纵向排列的元素改成横向时使用
####行内元素的垂直对齐方式
vertical-align:默认baseline/top/middle/bottom
###CSS的三大特性
- 继承性：子元素可以继承祖先元素中的部分样式，只能继承color/font-开头/text-开头的属性
- 有个别标签自带效果，不能继承自带效果的样式 比如： 超链接，h1-h6
-
层叠性：通过不同的选择器可以多次指向同一个元素 如果设置的属性不一样则所有的效果全部生效,如果作用相同的属性 则根据选择器的优先级决定
-
优先级：当多个选择器选择同一个元素并且设置相同的属性时会根据以下规则
-
直接选中优先级高于间接选中(继承)
-
如果是相同选择器：后执行的覆盖前面执行的
-
如果是不同选择器：根据选择器的作用范围决定优先级，范围(id<class<标签名<继承<元素默认样式)越小优先级越高 (id>class>标签名>继承>元素默认样式 )
———————————————————————————————————
###JavaScript 简称JS
-
用于给页面添加动态效果或动态内容的
-
JS历史：1995年由网景(NetScape)公司发布 LiveScript 同年改名为JavaScript，和Java没有关系，为了蹭热度。
-
语音特点： 属于脚本语言不需要编译，由浏览器解析执行，JavaScript可以嵌套在html中 ，基于面向对象，弱类型的语言, 交互性：可以用户直接交换，安全性：该语言只能访问浏览器里面的内容
###如何在html页面中引入JavaScript
- 在元素的事件属性中，如按钮的点击事件
<input type=“button” value=“点我试试！”
οnclick=“alert(‘试试就试试！’)”>
- 在script标签中写js代表 script标签可以写在页面的任何位置 推荐写在head里面
- 在单独的js文件中写js代码 通过script标签中的src属性引入，引入过文件的script标签不能在标签体中 继续写js代码
###JavaScript语法
数据类型，变量，运算符，语句，方法（函数）
####数据类型
- 数值类型(number)
NaN (Not a Number) isNaN(18)= false isNaN(“abc”)=true
-
字符串类型(string)
-
布尔值类型(boolean)
-
未定义类型(undefined)
-
对象类型(object)
####变量的声明和赋值
var x = 18; //类型为number 值 18
var name = “张三”; //类型string 值 张三
var b = true/false; //类型Boolean 值 true/false
var y; //类型是undefined 值 undefined
var p = new Person();
####数据类型之间的隐式转换
- js中数据类型会根据不同的场景进行自动类型转换
- 数值类型
-
转字符串： 直接转 18->“18” “abc”+18 = “abc18” （只有加法会把数值转字符串）
-
转布尔值: 0和NaN转false 非0即真(true)
- 字符串类型
-
转数值: 能转直接转 不能转则转成NaN； （NaN和任何数值进行任何运算结果都是NaN） “35”->35 “abc”->NaN
-
转布尔值: 只有空字符串(“”) 转false 其它true “”->false, “a”->true
- 布尔值类型
-
转数值： true=1 false=0 30+true=31 30+false=30
-
转字符串： 直接转 “abc”+true = “abctrue”
- undefined类型
-
转数值： NaN
-
转字符串： “undefined”
-
转布尔值： false
- null
-
转数值：0 28+null=28
-
转字符串： “null” “abc”+null = “abcnull”
-
转布尔值： false
###运算符
-
JS语言中的运算符和Java中大致相同
-
和，==会先将等号两端的类型统一然后再比较值，===先判断类型是否相等如果不等则直接false如果相等再比较值是否相等
-
typeof typeof 66+6 =“number6”
-
两数相除 结果会自动生成整数或小数 5/2=2.5 4/2=2
###语句 if else while do while for switch case
-
JS语言中的语句和Java中大致相同
-
- 语句中写条件的括号中如果不是布尔值类型会自动转成布尔值
-
- for循环中 int i 改成 var i 不支持增强for循环（foreach)
###函数(方法)声明
Java中声明函数的写法
public String run(int age,String name){
return “abc”;
}
- JS中写法
function run(age,name){
return “abc”;
}
-
格式一： function 方法名(参数列表){ return xxx; }
-
格式二： var 方法名 = function(参数列表){ return xxx; }
###和页面相关的函数
- 通过id得到页面中元素的函数
var input = document.getElementById(“myinput”);
- 从文本框中获取内容和设置内容
input.value = “abc”;
alert(input.value);
- 给div设置文本内容
d.innerText=“abc”;
- 给div设置html内容
d.innerHTML+= “
abc
”;———————————————————————————————————
String 数组 日期对象 正则
###String相关内容
- 创建字符串的两种方式
var s1 = “abc”; //单引号和双引号都可以
var s2 = new String(“abc”);
- 把字符串转成数值
parseInt(str)//把字符串转成整数，还可以把小数转成整数
parseFloat(str)//把字符串转成小数
Number(str)//等效parseFloat
- 字符串转大小写
str.toUpperCase()//转大写 str.toLowerCase()//转小写
- 获取字符串出现的位置 从0开始
var str = “abcdefgem”;
-从前面找
str.indexOf(“e”);
-从后面找
str.lastIndexOf(“e”);
- 截取字符串 从0开始
str.substring(start,[end]);
- 替换字符串
str.replace(old,new);
color
var x = “
”;x.replace(“[c]”,color);
- 拆分字符串
str.split(“.”); //返回值是个数组
####数值相关：四舍五入
18.23456.toFixed(4); // 18.2346
###数组相关
- 创建数组 数组内部可以添加任意类型的数据
var arr1 = [“小明”,18,true];
var arr2 = new Array();
- 往数组中添加内容
arr2.push(“张学友”);
arr2.push(28);
arr2.push(true);
- 修改数组的长度
arr1.length = 2;
- 遍历数组
for(var i=0;i<arr1.length;i++){
alert(arr1[i]);
}
- 数组反转
arr.reverse();
- 数组排序 默认排序方式是以字符串的形式进行排序 排序规则是通过Unicode编码进行排序
arr.sort();
- 自定义排序：
//自定义排序需要准备一个自定义的排序方法
function sortfn(a,b){
return a-b;//升序
//return b-a;//降序
}
alert(arr.sort(sortfn));
###日期相关函数
- 服务器时间和客户端时间
- 获取客户端时间
var d1 = new Date();
- 2018/9/30 14:35:32 把字符串时间转成时间对象
var d2 = new Date(“2018/9/30 14:35:32”);
- 从时间对象中获取和设置时间戳（距离1970年1月1日 08：00：00）
d2.getTime();
d2.setTime(1000); 1970/1/1 08:00:01
- 获取时间分量 单独的年 月 日 时 分 秒 星期几
d1.getFullYear();
d1.getMonth();//从0开始
d1.getDate();
d1.getDay();//星期
d1.getHours();
d1.getMinutes();
d1.getSeconds();
- 获取年月日 获取时分秒
d1.toLocaleTimeString();
d1.toLocaleDateString();
###正则表达式
. :匹配任意字符除了换行
\w:匹配任意数字、字母、下划线
\d:匹配任意数字
\s:匹配空白
^: 开头
$: 结尾
- 应用场景：1. 查找内容 2. 校验文本
//第一种创建方式：第一个/代表的是规则
//第二个参数表示模式
//（i:忽略大小写 g:全局查找）
var reg1 = /^a/i; //以a开头 忽略大小写
//以m结尾
reg1 = /m$/;
//包含两个数字
reg1 = /\d{2}/;
//以3个数字开头
reg1 = /^\d{3}/;
//以y开头m结尾中间包含5位数字
reg1 = /^y\d{5}m$/;
//6-10位数字字母下划线
reg1 = /^\w{6,10}$/;
//第二种创建方式第一个参数是格式，第二个是模式
//第二个参数如果没有值可以省略
var reg2 = new RegExp(“^\w{6,10}$”);
//和正则相关的方法
//1. 查找内容
var str = “you can you up no can no b b”;
var reg = /no/g;
//查找内容 如果全局查找 每执行一次查找一个
//执行第二次查找下一个 找不到时得到null
//alert(reg.exec(str));//no
//alert(reg.exec(str));//no
//alert(reg.exec(str));//null
//2. 校验方法
//reg = /^You/i;
//alert(reg.test(str));
//字符串和正则相关的方法
//3. 查找内容 一次性得到所有查找内容
//var arr = str.match(reg);
//alert(arr);
//4. 查找替换 替换所有
alert(str.replace(reg,“bu”));
———————————————————————————————————
###事件取消
-在事件属性中如果直接return false 则会把当前事件取消掉
###DHTML
-Dynamic(动态) HTML，着并不是一个新的技术 只是HTML+CSS+JS得到的一个
动态页面称为DHTML
-BOM：Browser(浏览器) Object(对象) Model(模型) ，包含浏览器相关的各种对象
-DOM：Document(文档) Object(对象) Model(模型)，包含和页面相关的各种对象
###BOM 浏览器对象模型
###window(窗口)
- window里面的属性和方法称为全局属性或全局方法，调用时可以省略掉 window.
-window下常用的属性和函数
parseInt()和paseFloat()
alert() 弹出框
confirm() 确认框
prompt() 弹出文本框
isNaN()
-location:位置
-href 获取和设置浏览器访问的地址
-reload() 页面重新加载（刷新）
history：历史
-次历史代表的是当前窗口的历史
-history.length获取当前窗口访问的页面数量
-history.back()返回上一页面
-history.forward()前往下一页面
-history.go(num) 前往某个页面 0代表当前页面 1代表下一个页面 -1代表上一个页面 2代表下两个页面
screen ：屏幕
-screen.width/height 屏幕宽高
-screen.availWidth/availHeight 屏幕可用宽度
navigator 导航/帮助
-navigator.userAgent 得到浏览器的版本信息
###和window相关的事件
onclick onblur onsubmit
-onclick:点击事件， 当点击页面内的任何位置的时候触发
<a href=“http://www.tmooc.cn”
οnclick=“return confirm(‘您确认离开吗？’)”>OO
οnclick=function(){
alert(“点击了窗口！”);
}
-onload: 加载完成事件，当页面加载完成的时候执行
onload = function(){
i1.value=“abc”;
}
-onfocus:获取焦点事件，当页面处于激活状态的时候执行
onfocus = function(){
console.log(“获取焦点”);
}
-onblur:失去焦点事件，当页面切换到非激活状态的时候执行
onblur = function(){
console.log(“失去焦点”)
}
####eval()方法(函数)
-可以将传递到方法中的字符串参数以js代码的形式执行
####高级版计算器
-按钮边框不影响显示范围
-文本框边框影响显示范围
###通过js给元素添加样式
-获取和设置的样式为内联样式，不能获取非内联样式的值
###定时器
-setInterval(函数，时间间隔);
/每隔2秒执行函数体的内容/
setInterval(function(){
//console.log(x++);
x+=10;
i1.style.marginLeft=x+“px”;
},2000);/2000是2秒/
###假轮播图作业：
//通过元素名称获取元素对象 得到一个数组
-var arr = document.getElementsByTagName(“img”);
//让元素对象隐藏
-display:“none”;
//让元素对象显示
-display:“block”;
function myfn(div){
//通过div 得到里面的img图片
var img = div.getElementsByTagName(“img”)[0];
//alert(img);
//判断图片当前是否是隐藏状态
if(img.style.display==“none”){//隐藏
img.style.display=“block”;//让图片显示
}else{
img.style.display=“none”;//让图片隐藏
}
}
———————————————————————————————————
###定时器
-通过定时器可以实现每隔一段事件执行某段代码
-开启定时器：
var timeID = setInterval(函数，时间间隔)
-停止定时器
clearInterval(timeID);
-setTimeout(函数，时间);//这种方式只会执行一次
###DOM Document Object Model
-文档对象模型 ，学习DOM 主要学习的就是对页面中标签的增删改查操作
###查找元素
-通过id查找
var input = document.getElementById(“id”);
-通过标签名查找
var arr = document.getElementsByTagName(“标签名”)[0];
-通过标签的name属性查找
var arr = document.getElementsByName(“name属性的值”)[0];
-通过标签的class属性查找
var arr = document.getElementsByClassName(“class属性的值”)[0];
-获取body
document.body
####创建元素
var h1 = document.createElement(“h1”);
h1.innerText=“拉拉”;// 需要点击页面才会显示内容
###添加元素到某个元素中
父元素.appendChild(新子元素);
ul.appendChild(li);
###插入元素到某个元素的上面
父元素.insertBefore(新元素,弟弟元素);
ul.insertBefore(li,sh);
###删除元素
父元素.removeChild(被删除的元素);
ul.removeChild(sh);
- 背景
- 白色
- 上海
- 广州
li的父元素是ul，li的子元素是d1，li的弟弟元素是sh(和li同级别)
例：
<input type=“button” value=“添加” οnclick=“addfn()”>
<input type=“button” value=“插入” οnclick=“insertfn()”>
<input type=“button” value=“删除” οnclick=“removefn()”>
- 背景
- 上海
- 广州
———————————————————————————————————
###事件
-事件指一些特定的时间点 事件包括：window相关的事件(状态改变事件)，鼠标
相关，键盘相关
-onclick点击事件，onload加载完成事件，onfoucs获取焦点事件，
onblur失去焦点，onchange值发生改变事件 ，onsubmit表单提交事件
onresize窗口尺寸改变事件
-onmouseover鼠标移入事件 onmouseout鼠标移出事件 onmousedown鼠标按下事件
onmouseup鼠标松开事件
-键盘相关事件： onkeydown键盘按下事件 onkeyup键盘松开事件
###event事件对象
-event对象中保存着和事件相关的信息
-鼠标事件中 event中可以获得鼠标的坐标 event.clientX/clentY
-在键盘事件中 可以获得按下的键盘编码 event.keyCode
var str = StringfromCharCode(event.keyCode);
-可以通过event对象获取事件源
var obj = enent.target|| event.srcElement;
###事件绑定
1.在标签中 通过事件属性绑定事件
2.通过js代码动态绑定事件
//如果再动态绑定的事件中 this 代表的就是事件源
//如果非动态绑定的事件中 this 代表的是widdow
###事件取消
-在事件的方法中 return false
###事件的传递(事件冒泡)
-如果同一区域内有多个事件响应 ，响应顺序是类似冒泡 ，从下往上
也就是从底层元素往上级元素响应，这个传递过程称为事件冒泡
添加按钮后显示的顺序为 fn1()→fn2()→fun()3
-应用场景：如果在某一个区域内多个元素需要添加相同的事件，通过事件冒泡的特性只需要
在多个元素共同的祖先元素上添加一个事件即可，从而达到节省代码的作用
###获取body和html的宽高
//得到body的宽
console.log(“body 宽度:”+document.body.clientWidth);
//得到html的宽
console.log(“html 宽度:”+document.body.parentElement.clientWidth);
cosole.log(“body 高度:”+document.body.clientHeight);
//得到html的高
console.log(“html 高度:”+document.body.parentElement.clientHeight);
###僵尸练习步骤：
1.开启每一个每个一秒执行的定时器
2.在定时器的方法中 创建img标签并且设置img的图片为僵尸图片，img的left值为屏幕的宽度
(正好在屏幕右侧),top值为1000以内的随机值，通过head，通过head里面的style标签给
img设置大小设置定位方式为绝对定位
3.开启一个每秒执行100次的定时器
4.在第二个定时器的方法中得到所有的img标签 遍历每一个img 得到原来的left值 -= 再赋值
回去 这样僵尸图片就移动起来了
5.页面中添加两个h3 一个现实成功的次数 另外一个实现失败次数 着两个h3一个左侧浮动 另外一个右侧浮动
6.在每次移动图片的时候判断此时的left值是否离等于0，等于0 说明僵尸到了房子的位置，此时删除当前
的僵尸图片，并且让现实失败次数的h3次数+1
7，再第一个定时器里面创建完img对象的时候给img添加onmouseover事件，在事件中删除事件源(图片)
同时让显示成功次数的h3次数+1 搞定！！！
———————————————————————————————————
###jQuery
-一个由js语言书写的框架，用于简化js代码的
-可以像css一样获取元素对象，可以直接修改元素的样式，解决兼容问题
//js源生加载事件
onload = function(){};
//jq源生加载事件
//需要在网页里完成事件的时候添加这个全局控件
//在{}里添加 alert(“测试”); 如果网页能正常弹出框，则事件源添加成功
$(function(){}(); //这个分号可要可不要，系统默认自带;
####js对象和jq对象互相转换
-通过以下写法可以得到jq对象
$(“#id”);
-给jq对象动态绑定点击事件
$("#id).click(function(){});
-把js对象转成js对象
jqboj[o]; 或jqobj.get(0);
-把js对象转成jq对象
$(jsobj);
###jQuery选择器
####基本选择器
1.标签名选择器
$(“div”);
2.id选择器
$(“#id”);
3.类选择器
$(“.class”);
4.分组选择器
$(“div,#id,.class”);
5.所有元素选择器
$(“*”);
###层级选择器
1.$(“div span”); 匹配div里所有的span
2.$(“div>span”); 匹配div里所有的span子元素
3.$(“div+span”); 匹配div后面相邻的兄弟元素(弟弟元素 相邻同标签元素)
4.$(“div~span”); 匹配div后面所有的兄弟元素(弟弟们元素 同标签名元素)
####层级函数
1.获取某个元素的所有兄弟元素 (相邻元素)
$(“#one”).siblings(“div”);//id为one的所有div兄弟元素 不要div就是所有元素
2.获取元素的哥哥元素 (上一级元素)
$(“#one”).prev(“span”);
3.获取元素的哥哥们元素
$(“#one”).prevAll(“span”);
4.获取元素的弟弟元素
$(“#one”).next(“span”);
5.获取元素的弟弟们元素
$(“#one”).nextAll(“span”);
####过滤选择器
1.$(“div:first”);匹配所有div中的第一个
2.$(“div:last”);匹配所有div中的最后一个
3.$(“div:even”);匹配所有div中下标是偶数的元素 位置从0开始
4.$(“div:odd”);匹配所有div中下标是奇数的元素 位置从0开始
5.$(“div:eq(n)”);匹配所有div中的第n个 位置从0开始
6.$(“div:lt(n)”);匹配所有div中小于n的元素 位置从0开始
7.$(“div:gt(n)”);匹配所有div中位置大于n的元素 位置从0开始
8.$(“div:not(.abc)”);匹配所有div 除去class为abc的元素
####内容选择器
1.$(“div:hsa§”); 匹配所有包含p标签的div
2.$(“div:empty§”); 匹配不包含内容的div
3.$(“div:parent”); 匹配包含内容的div
4.$(“div:contains(‘abc’)”); 匹配包含文本abc的div元素
####可见选择器
1.$(“div:hidden”); 匹配所有隐藏的div元素
2.$(“div:visible”); 匹配所有显示的div元素
####显示相关的函数
1.$(“div:hidden”).show(); 让隐藏的元素显示
2.$(“div:visible”).hide(); 让显示的元素隐藏
3.$(“#id”).toggle(); 隐藏显示 切换
####属性选择器
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
同标签名元素)####层级函数
1.获取某个元素的所有兄弟元素 (相邻元素)
$(“#one”).siblings(“div”);//id为one的所有div兄弟元素 不要div就是所有元素
2.获取元素的哥哥元素 (上一级元素)
$(“#one”).prev(“span”);
3.获取元素的哥哥们元素
$(“#one”).prevAll(“span”);
4.获取元素的弟弟元素
$(“#one”).next(“span”);
5.获取元素的弟弟们元素
$(“#one”).nextAll(“span”);
####过滤选择器
1.$(“div:first”);匹配所有div中的第一个
2.$(“div:last”);匹配所有div中的最后一个
3.$(“div:even”);匹配所有div中下标是偶数的元素 位置从0开始
4.$(“div:odd”);匹配所有div中下标是奇数的元素 位置从0开始
5.$(“div:eq(n)”);匹配所有div中的第n个 位置从0开始
6.$(“div:lt(n)”);匹配所有div中小于n的元素 位置从0开始
7.$(“div:gt(n)”);匹配所有div中位置大于n的元素 位置从0开始
8.$(“div:not(.abc)”);匹配所有div 除去class为abc的元素
####内容选择器
1.$(“div:hsa§”); 匹配所有包含p标签的div
2.$(“div:empty§”); 匹配不包含内容的div
3.$(“div:parent”); 匹配包含内容的div
4.$(“div:contains(‘abc’)”); 匹配包含文本abc的div元素
####可见选择器
1.$(“div:hidden”); 匹配所有隐藏的div元素
2.$(“div:visible”); 匹配所有显示的div元素
####显示相关的函数
1.$(“div:hidden”).show(); 让隐藏的元素显示
2.$(“div:visible”).hide(); 让显示的元素隐藏
3.$(“#id”).toggle(); 隐藏显示 切换
####属性选择器
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-8BA5gyQT-1714920118618)]
[外链图片转存中…(img-tOK965v9-1714920118618)]
[外链图片转存中…(img-VJFUbH7f-1714920118618)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
