HTML页面标签,CSS基本属性,JavaScript基本,Jquery基本

1.HTML

1) 文本标签：
? 内容标题 h1-h6 align=left/right/center
? 段落标签p 水平分割线 hr 换行br
2) 列表标签:
? 无序列表 ul li
? 有序列表 ol li
? 定义列表 dl dt dd
? 列表嵌套 有序无序任意无限嵌套
3) 分区元素:
? 分区元素自身没有显示效果用于把页面中的多个元素进行统一管理，类似于一个容器,一个页面一般分为三大区：
-头部—体部—脚部
? h5标准中新增了几个和div功能一样的分区元素
? <header>头部</header>
? <article>正文</article>
? <footer>脚部</footer>
4) 元素的分类
? 块级元素： 独占一行
? 包括：h1-h6,p, div , hr
? 行内元素： 共占一行
? 包括：span，斜体i和em，加粗b和strong，删除线s和del，下划线u
5) 特殊字符 实体引用
? 空格折叠现象 通过   替换空格
? 小于号和大于号 < >
? 换行

6) 图片标签
? img alt:图片不能正常显示显示的文本,src：路径,title:鼠标悬停时显示的文本
7) 图像地图
<img alt=“图片” src=“k.jpg” width=“800px” usemap="#mymap">
<map name=“mymap” id=“mymap”>
<area alt=“圆形” shape=“circle” coords=“100,200,50” href=“2.gif”>
</map>
? 如果使用shape=rect，coords的值所代表的意思是左上角点的x和y，还有右下角点的坐标x和y。如果shape=circle coords值表示圆心坐标(x和y)，和半径.
? href属性：值为一个路径，相对路径和绝对路径，区域被点击时会直接访问此路径的内容，路径可以指向页面，也可以指向图片资源，也可以指向其它类型的文件会下载此文件。
8) 超链接<a target="_blank" href="">xxx 锚点的使用
9) 表格<table><tr><th></th></tr><tr><td></th></td></table>
? cellspacing：每个单元格之间的间距和单元格距表格边框的距离
? cellpadding: 内容与单元格边框的距离
? width/height:表格的宽高
? border： 边框的宽度
? caption标签，写在table标签内部，起到表格标题的作用
? 分组标签： thead tbody tfoot 没有任何显示效果，提高代码可读性
10) 表单<form>
<form action=“提交地址” method=”提交方式(get与post)” enctype=“用于指定表单数据的编码类型”>
11) Input中的属性
<Input type=”” name=”” value=”” />
type中: text(文本框),password(密码框),radio(单选框),checkbox(复选框),file(上传文件),date(时间),hidden(隐藏域),submit(提交按钮),reset(重置按钮),button(普通按钮)
(下拉选择框)
(输入多行文本)
maxlength—框中最大输入数
readonly=“readonly”—禁止框中输入

2.CSS—Casecading层叠 Style样式 Sheet表,层叠样式表

1) CSS向Html的三种引入方式:
内联：把样式代码写在标签内部的style属性里面，弊端：不能复用
内部：在head标签里面添加style标签通过选择器给元素添加样式，好处是可以在当前页面复用，弊端：只能在当前页面复用
外部：在一个单独的css文件中写样式代码，在页面中head标签里面通过link标签把css文件引入到页面中，好处：可以多页面复用，把css样式代码和html代码分离
三种引入方式的优先级： 内联样式优先级最高 ，内部和外部优先级一样，后执行的覆盖先执行的
2) 选择器:
标签名选择器:
格式： div{} span{} h3{}
范围：会把所有该类型的标签全部选中
Id—选择器
格式： #id{}
将页面中某一个元素选中
类选择器
格式： .class{}
选中页面中一类的多个元素
属性选择器
格式： 元素名[属性名=‘属性值’]{}
分组选择器
格式： #id,.class,div{}
将多个选择器选择的内容合并到一个选择器里面
子孙后代选择器
格式： div p h1
选择div里面p里面的所有子孙h1
子元素选择器
格式： div>p>h1
选择div里面p里面的h1子元素
3) 伪类选择器—用于选择元素的状态
未访问状态 a:link
访问过状态 a:visited
悬停状态 a:hover
点击时状态 a:active
4) 任意元素选择器
格式: {}
选择页面中所有的元素 包括:body和HTML
5) 颜色的复制方式—三原色rgb红绿蓝 red green blue 每一个颜色的取值范围0-255
通过颜色名称赋值 red blue yellow pink…
6位的16进制赋值 #ff0000
3位的16进制赋值 #f00
3位的十进制 rgb(255,0,0)
4位的十进制 rgba(255,0,0,0.5) 最后一位表示透明度取值0-1只越小越透明
6) 背景图片
backgroud-image 设置背景图片
background-size 设置背景图片尺寸
background-repeat 禁止重复
background-position 设置背景图片的位置
background-color: green;
/ 设置背景图片 /
background-image: url("…/imgs/k.jpg");
/ 修改背景图片尺寸 /
background-size: 100px 100px;
/ 禁止重复 /
background-repeat: no-repeat;
/ 修改图片位置
水平方向(left center right)
垂直方向(top center bottom)
可以控制9个位置*/
/* background-position: right bottom; /
/ 通过百分比控制位置
第一个0代表最左边 100%代表最右边
第二个0代表最上面 100%代表最下面 /
background-position: 90% 90%;
7) 布局相关属性(盒子模型)
盒子模型由： 宽高+外边距+内边距+边框 组成
盒子模型之元素宽高—宽度width—高度height
可以通过百分比或像素的形式赋值
块级元素可以修改元素的宽高，行内元素不能修改宽高，宽高只能由内容决定
盒子模型之外边距
什么是外边距： 元素距上级元素或相邻兄弟元素的距离称为外边距–赋值方式：
margin-left/right/top/bottom:10px
margin:10px; //给四个方向外边距全部赋值为10px
/ margin: 20px 40px; // 上下20 左右40 /
/ margin: 0 auto; / / 水平居中 /
margin: 10px 20px 30px 40px;/ 上右下左 /
块级元素相邻元素添加外边距取最大值，行内元素相邻元素外边距相加
行内元素上下外边距不生效
如果元素的上边缘和上级元素的上边缘重叠，则给元素添加上外边距时会出现粘连问题 通过给上级元素添加 overflow:hidden 解决
盒子模型之边框
赋值方式：
/ border: 1px solid red; / 四个方向赋值
border-bottom/top/right/left: 1px solid red; 指定给某一个方向赋值
8) 文本相关样式
文本对齐 text-align: left/right/center
文本修饰 text-decoration:overline/underline/line-through/none
行高 line-height
颜色 color：red;
文本阴影 text-shadow: 颜色 x偏移 y偏移 阴影浓度(值越小越清晰)
9) 圆角
? border-radius 值越大 越圆
10) 字体相关样式
? / 字体大小 /
? font-size: 10px;
? / 字体加粗 /
? font-weight: bold; font-weight:normal;取消字体加粗
? / 斜体 /
? font-style: italic;
? / 字体样式 */
? font-family: “simhei”, Arial, Helvetica, sans-serif;
11) 溢出设置—overflow—设置超出元素范围的内容如何显示
? visible（默认值） 超出显示
? hidden 超出隐藏
? scroll 超出滚动显示
12) 显示方式—display
? block： 块级元素的默认值，独占一行 可以修改宽高
? inline： 行内元素的默认值，共占一行
? inline-block:行内块 共占一行并且可以修改宽高
13) 定位—(文档流定位,相对定位,绝对定位,固定定位,浮动定位)
? 文档流定位(静态定位)默认的定位方式position:static(默认)
? 块级元素从上到下，行内元素从左向右
? 通过外边距控制元素的位置
? 相对定位position:relative;
? 元素不脱离文档流
? 应用场景：当元素需要从当前位置做偏移，但不影响其它元素的时候使用相对定位
? 通过top/left/right/bottom 控制元素的偏移，偏移值相对于元素的初始位置
? 绝对定位position:absolute;
? 元素脱离文档流
? 应用场景：但需要往页面中添加一个元素这个元素显示或不显示不影响其它元素的效果
? 通过top/left/right/bottom控制元素的位置，位置相对于窗口(默认)或某一个上级元素
? 如果需要相对于某一个上级元素，需要让上级元素做非static定位(推荐使用relative相对定位)
? 固定定位position：fixed;
? 脱离文档流
? 通过top、left、right、bottom控制元素的位置，位置相对于窗口
? 应用场景：当需要把某个元素固定在窗口的某个位置时使用固定定位
? 浮动定位 float:left/right;
? 脱离文档流，元素从当前所在行向左或向右浮动，当碰到上级元素边框或其它浮动元素时停止
? 一行装不下会自动换行，换行时有可能被卡住clear：left/right/both 禁止元素某个方向出现浮动元素
? 如果元素的所有子元素全部浮动，此时自动识别的高度为0，如果希望元素正好包裹所有子元素则给元素添加overflow:hidden解决
? 应用场景：当需要将纵向排列的元素改成横向排列时使用浮动定位
14) 行内元素垂直对齐vertical-align: middle;
? bottom底部
? top顶部
? middle中间
? baseline 基线(默认)
15) CSS的三大特性
? 继承性： 子元素可以继承上级元素的部分属性，只能继承文本和字体相关的属性，部分元素的显示效果不受继承影响比如：超链接a的字体颜色不受影响，h1-h6的字体大小不受继承影响
? 层叠性： 如果有多个选择器选择同一元素但设置的样式不同，则所有样式全部层叠到一起全部生效,如果多个选择器设置的样式相同则由优先级决定。
? 优先级： 作用范围越小，优先级越高 id>class>标签名

JavaScript简称JS, JS给页面添加动态效果或内容

console.log(); 在F12下显示内容
alert(); 弹框
1) Html中引入js的三种引入方式:
? 内联：在标签内部，通过事件属性引入
?<input type=“button” value=“点我试试” οnclick=“alert(‘试试就试试！’)”>
? 内部：在head标签内部添加script标签，在标签内部写js代码
?<script type=“text/javascript”>alert(“第二种引入方式”);
? 外部：在单独的js文件中写js代码，通过script标签引入
?<script type=“text/javascript” src=“first.js”>
? //如果引入了js文件 则在标签体内不能写js代码
?</script>
2) 数据类型—js中所有类型都是对象类型，对象类型分为三种：
? JS语言内置对象： 字符串 数组 日期 等
? 浏览器内置对象： 可能存在兼容性问题
? 自定义对象：程序员自己创建的对象
3) JS内置对象的几种常见类型
? 数值类型 number
? 字符串类型 string
? 布尔值类型 boolean
? 未定义类型 undefined
4) 变量的声明和赋值—JS属于弱类型语言
? var x = 18;x=“abc”;
? var name = “张三”;
? var b = true/false;
? var z; //未定义类型
? var p = new Person();
5) 数值类型—JS中数值类型的底层都是浮点型,使用过程会自动转换整数和小数
? -java:
? int x = 5; int y = 2;
? int z = x/y; z=2
? -js:
? var x = 5; var y = 2;
? var z = x/y; z=2.5
? var x = 4; var y = 2;
? var z = x/y; z=2
? -NaN: Not a Number(不是一个数),isNaN(变量) 用于判断变量的类型是否是个数
? var s = 18; isNaN(s)=false var s=“abc”; isNaN(s)=true
6) 字符串String—用单引号或双引号修饰字符串
? var s1 = “abc”;
? var s2 = ‘abc’;
7) 布尔型 boolean
? var b = true; var b = false;
8) 常见的数据类型间的隐式转换
? 数值类型：
? 转字符串：直接转 “abc”+18 = “abc18”
? 转布尔值: 0和NaN转false 其它转true
? if(18){alert(‘abc’)}else{alert(‘lalala’)}
? 字符串
? 转数值： 能转直接转 “18”->18 不能转转成NaN “abc”->NaN
? var x = “66”+6; 666
? var y = “66”-6; 60 //只有加法是把数值转字符串，其它运算都是把字符串转成数值
? 任何数值和NaN进行任何运算结果都是NaN
? 转布尔值： 空字符串"“转false 其它true
? 布尔值
? 转字符串：直接转 “abc”+true = “abctrue”
? 转数值： true->1 false->0
? 未定义
? 转字符串：直接转 “abc”+undefined=“abcundefined”
? 转布尔值：false
? 转数值：NaN
? null
? 转字符串：直接转 “abc”+null = “abcnull”
? 转布尔值：false
? 转数值：0
9) 运算符
? js中的运算符和Java大体相同
? 和=，==会先统一等号两端变量的类型 然后再比较值是否相等，===会先比较类型如果类型相同再比较值是否相等
? “66”==66 true
? “66”===66 false
? typeof x ： 获取变量的类型
? var x = typeof 66 + 6 结果： “number6”
10) 条件语句—(if else, switch case, while , for, do while )
? 和Java大体相同
? 不同点：
? if条件里面的内容如果不是布尔值会自动隐式转换成布尔值
? for循环把int i改成 var i 不支持增强for循环
11) 函数(方法)
? java方法格式：public void 方法名(参数列表){ 方法体 }
? js方法格式一：function 方法名(参数列表){方法体}
? js方法格式二：var 方法名 = function(参数列表){方法体}
? js方法格式三：var 方法名 = new Function(“参数1”,“参数2”,“方法体”);
12) 页面相关方法
? 通过id获取页面中的元素
? var mydiv = document.getElementById(“d1”);
? 给文本框赋值和取值
? var myinput = document.getElementById(“i1”);
? 获取 myinput.value
? 赋值 myinput.value=“xxx”;
? 获取和设置元素的文本内容 span h1-h6 div p
? 赋值 mydiv.innerText = “abc”; //赋值
? 修改 mydiv.className=”red”;//修改class的名
? 取值 alert(mydiv.innerText); //取值
? 追加 mydiv.innerText += “XXX”;
? 给元素添加html内容
? 取值 mydiv.innerHTML;
? 赋值 mydiv.innerHTML= “<h1>abc</h1>”;
? 追加 mydiv.innerHTML+= “<h1>abc</h1>”;
13) String相关内容
? 创建字符串的两种方式
? var s1 = “abc”;
? var s2 = new String(“abc”);
? 把字符串转换成数值
? parseInt(num) 转成整数
? parseFloat(num) 转成小数或整数
? Number(num) 等效parseFloat
? 字符串转大小写
? str.toUpperCase();
? str.toLowerCase();
? 获取字符串出现的位置
? str.indexOf(“a”);
? str.lastIndexOf(“a”);
? 截取字符串
? str.substring(start,?end);
? 替换字符串
? str.replace(old,new);
? 拆分字符串
? str.split(”,");
? 可以把数字转换为字母
? String.fromCharCode()
14) 数组相关
? 创建数组的两种方式
? var arr1 = [“小明”,18,true];
? var arr2 = new Array(); //创建一个空数组
? 往数组中添加内容
? arr2.push(“abc”);
? 修改数组的长度(Java中数组长度是不可以修改的)
? arr1.length=1;
? 数组遍历和Java一样
? 数组反转
? var arr = [1,2,3];
? arr.reverse();
? 数组排序
? 数组默认的排序规则是按 数组排序
? var arr = [10,18,5,22,21,52];
? arr.sort();照数组内元素的unicode编码进行排序比完第一个字符比第二个
? 自定义排序：
? var arr = [58,51,8,2,23,66];
? //创建一个自定义的排序方法
? function sortfn(a,b){
return a-b;//升序
return b-a; //降序
? }
? //使用自定义方法排序 如果数组中装的是自定义对象
? //可以通过对象的任意属性进行排序，比较灵活
? alert(arr.sort(sortfn));
15) 日期相关内容–服务器时间和客户端时间
? 获取客户端时间 得到当前系统时间
? var d1 = new Date();
? 把字符串时间转成Date对象
? 2019/1/4 15:20:00
? var d2 = new Date(“2019/1/4 15:20:00”);
? 获取和设置时间戳(时间戳是距离1970年1月1日 0点的毫秒数)
? d1.getTime();
? d1.setTime(1000); //1970/1/1 08:00:01
? 获取时间分量 单独年 月 日 时 分 秒 星期
? d1.getFullYear();//年
? d1.getMonth();//月 从0 开始
? d1.getDate();//日
? d1.getDay();//星期
? d1.getHours();//时
? d1.getMinutes();//分
? d1.getSeconds();//秒
? 从完整时间中获取年月日、获取时分秒
? d1.toLocaleDateString();
? d1.toLocaleTimeString();
16) 正则表达式
? 应用场景：查找内容/校验文本
? . 匹配任意字符除了换行
? \w:匹配任意数字、字母、下划线
? \d:匹配任意数字
? \s:匹配任意空白
? ^ :开头
? $ :结尾
? js创建正则表达式的两种方式
? var reg1 = /规则/模式;
? - var reg2 = new RegExp(“规则”,?“模式”);
? - 正则相关的方法：
? 1. reg.exec(str); //查找内容 一次执行只找一个 找不到时返回null
? 2. reg.test(str); //校验str是否符合规则
? 3. var arr = str.match(reg); //查找 一次性找到所有内容
? 4. str.replace(reg,“新的内容”); //替换 替换正则匹配的所有内容
17) 影藏元素的方式
? display:none/block/inline/inline-block 脱离文档流
? visibility:hidden/visible; 不脱离文档流
18) 时间的取消
? 在事件中执行 return false; 则可以将此事件取消掉
? confirm(“您确认离开吗？”) 点击后会出现一个弹出框(确认与取消)
19) 自定义对象—(了解)
? 第一种方式:
//创建Person对象 有age和name属性
function Person(name){
//声明属性并赋值
this.name=name; this.age=age;
//声明方法
this.run = function(){
alert(“name:”+this.name+",age:"+this.age);
}
}
? 第二种方式
var p1 = {
“name”:“关羽”,“age”:18,
“run”:function(){
alert(“姓名：”+this.name+“年龄：”+this.age);
}
}
//调用方法
P1.run();
20) DHTML—Dynamic（动态）HTML，这并不是新的技术，而是把html+css+JavaScript一起实现的页面称为动态的html
? DHTML包括：BOM和DOM
? BOM：Browser（浏览器）Object（对象）Model（模型），浏览器对象模型,在BOM中存在一些和浏览器相关的对象
? DOM：Document Object Model：文档对象模型，在DOM中包含一些和页面相关的对象
21) Window
? window对象中包含的属性称为全局属性,方法称为全局方法,调用window里面的属性和方法时可以把window省略
? window里面常用的方法:window.alert("");提示框 confirm()确认框 parseInt/Float(); isNaN(); prompt(); 弹出文本框
? window里面常用的属性
? location：位置
? location.href 获取浏览器访问的地址
? location.href=“http://www.baidu.com” 修改浏览器访问的地址
? location.reload(); //页面刷新
? history:历史
? history.length //获取历史页面数量
? history.back() //返回上一页面
? history.forward() //前往下一页面
? history.go(num) 负值代表 返回 正值前进 0刷新加粗样式
? screen：屏幕
? width/height 宽高
? availWidth/availHeight 可用宽高 高度减去开始菜单栏
? navigator：导航/帮助
? navigator.userAgent 得到浏览器的版本信息
? document：文档 里面包含页面相关的对象 DOM指的就是document对象里面的内容，而document又属于window里面的对象 所以 BOM包含DOM
22) eval()方法 可以将字符串以执行js代码形式执行
23) 通过js代码给元素添加样式
? div.style.样式名称=“值”;
24) 定时器
? 开启重复执行的定时器
? var t = setInterval(function(){},时间间隔)
? 停止定时器
? clearInterval(t);
? 开启只执行一次的定时器
? setTimeout(function(){},时间间隔);
25) document-文档对象模型，学习DOM主要是学习如果对页面中的元素进行增删改查操作
? 查找页面中的元素
? 通过id查找
? var div = document.getElementById(“id”);
? 通过标签名
? var arr = document.getElementsByTagName(“标签名”);
? 通过name查找
? var arr = document.getElementsByName(“name”);
? 通过class查找
? var arr = document.getElementsByClassName(“class”);
? 创建元素
? var d = document.createElement(“添加的标签”);
? d.innerText = “在标签中写的文本”;
? 然后执行添加元素/删除元素
? 添加元素
? 格式—父元素.appendChild(d);
? document.body.appendChild(d);
? 插入元素
格式—父元素.insertBefore(新元素,父元素下的元素(插入的新元素在这个元素下));
? 删除元素
格式—父元素.removeChild(被删除的元素);
26) Window相关的事件
? 状态改变事件
? 页面加载完,再执行事件 onload
? 获取焦点事件 onfocus
? 失去焦点事件 onblur
? value值改变事件 onchange
? 提交事件 onsubmit
? 窗口尺寸改变事件 onresize
? 鼠标事件
? 鼠标移入事件onmouseover
? 鼠标点击事件 onclick
? 鼠标移出事件onmouseout
? 鼠标按下事件onMouseDown
? 鼠标抬起事件onMouseUp
? 鼠标移动事件onmousemove
? 键盘事件
? 键盘按下事件onKeyDown
? 键盘抬起事件onKeyUp
27) 事件的绑定:
? 在元素内部通过事件属性添加事件 事件中的this代表的是window对象
? 通过js代码动态绑定事件 事件中的this代表的是事件源
28) 事件的取消-在事件中执行 return false; 则可以取消当前的事件
29) 事件对象event
? event对象中保存着和事件相关的信息
? 鼠标事件可以获得鼠标的坐标 event.clientX/Y
? 键盘事件可以获得键盘的编码 event.keyCode
? 在任何事件中可以通过event得到事件源
? event.target event.srcElement
? //解决兼容性问题的写法 获得事件源
? var obj = event.target||event.srcElement;
? 事件源获取方式：
? 在动态绑定的事件中 this就是事件源
? 非动态绑定的事件中可以将事件源传递过去
? 通过event对象获取事件源
30) 事件的传递(事件冒泡)
? 如果同一个区域内有过个元素的事件需要响应，响应顺序从最底层开始向上级元素传递，传递过程类似于冒泡，所以称为事件

4.Jquery

1) 选择器
基本选择器
? 标签名选择器 $(“div”) 匹配页面中所有的div
? id选择器 $("#id")
? 类选择器 $(".class")
? 分组选择器 $(“div,#id,.class”)
? 任意元素选择器 $("*")
层次选择器
? $(“div span”) 匹配div下所有的span
? $(“div>span”) 匹配div的所有span子元素
? $(“div+span”) 匹配div的span弟弟元素
? $(“div~span”) 匹配div的span弟弟们元素
? 层次方法—当得到某一个元素之后可以通过调用以下方法获得该元素的相关元素
? 获取元素的兄弟元素 $("#abc").siblings(“span”);得到id为abc元素的所有兄弟元素
? 获取元素的哥哥元素 $("#abc").prev();
? 获取元素的哥哥们元素 $("#abc").prevAll();
? 获取元素的弟弟元素 $("#abc").next();
? 获取元素的弟弟们元素 $("#abc").nextAll();
? 获取元素的子元素 $("#abc").children()
过滤选择器
? $(“div:first”) 匹配所有div中的第一个
? $(“div:last”) 匹配所有div中的最后一个
? $(“div:even”) 匹配所有div中的所有偶数 从0开始
? $(“div:odd”) 匹配所有div中的所有奇数 从0开始
? $(“div:eq(n)”) 匹配所有div中下标为n的元素 从0开始
? $(“div:lt(n)”) 匹配所有div中下标小于n的元素
? $(“div:gt(n)”) 匹配所有div中下标大于n的元素
? $(“div:not(.abc)”) 匹配所有div中 class值不为abc的所有元素
内容选择器
? $(“div:has§”) 匹配所有包含p子元素的div
? $(“div:empty”) 匹配所有空的div
? $(“div:parent”) 匹配所有非空的div
? $(“div:contains(‘abc’)”) 匹配所有包含abc文本的div
可见选择器
? $(“div:hidden”) 匹配所有隐藏的div元素
? $(“div:visible”) 匹配所有显示的div元素
? 隐藏显示相关的方法
? $("#abc").hide(); //隐藏
? $("#abc").show(); //显示
? $("#abc").toggle(); //隐藏显示切换
属性选择器
? $(“div[id]”) 匹配所有包含id属性的div
? $(“div[id=‘abc’]”) 匹配所有id=abc 的div
? $(“div[id!=‘abc’]”) 匹配所有id不等于abc的div
子元素选择器
? $(“div:first-child”) 匹配是子元素 并且是第一个div子元素
? $(“div:last-child”) 匹配是子元素 并且是最后一个div子元素
? $(“div:nth-child(n)”) n从1开始,匹配是子元素并且是第n个div子元素
表单选择器
? $(":input") 匹配form表单中的所有控件包括：文本框,密码框,单选,多选,下拉选,等
? $(“:text”) 匹配文本框
? $(":password") 匹配所有密码框
? $(":radio") 匹配所有单选
? $(":checkbox") 匹配所有多选
? $(“:submit”) 匹配提交按钮
? $(“:reset”) 匹配重置按钮
? $(“:button”) 匹配普通按钮
? $(“:file”) 匹配文件框
? $(“:hidden”) 匹配隐藏框
? $(":checked") 匹配所有选中的单选、多选、下拉选
? $(“input:checked”) 匹配所有选中的单选和多选
? $(":selected") 匹配所有选中的下拉选
2) JavaScript对象和Jquery对象相互转换
? js对象转jq var jq = $(js);
? jq对象转js var js = jq[0];
3) Jquery的文本相关操作 DOM相关
创建元素
? var js = document.createElement(“div”);
? var jq = $("</div i=‘abc’>abc");
? 添加元素 $("#big").append(myh1);
插入元素
? 弟弟元素 before(新元素 做为上一个兄弟节点添加进去
? 哥哥元素 after(新元素) 做为下一个兄弟节点添加进去
? 删除元素 $("#id").remove();
? css样式相关
? 获取样式值 var color = $("#id").css(“color”);
设置样式
? $("#id").css(“样式名称”,“值”);
? $("#id").css({“width”:“100px”,“height”:“200px”});
文本相关
? 获取元素的文本内容 $("#id").text();
? 给元素文本赋值 $("#id").text(“内容”);
html相关
? 获取元素的html内容 $("#id").html();
? 给元素html赋值 $("#id").html("<h1>hehe</h1>");
属性相关
? 获取元素的属性值 $("#id").attr(“class”);
? 给元素添加或修改属性值 $("#id").attr(“class”,“值”);
? 获取元素的子元素 .children()
4) 获取事件源 var obj = event.target || event.srcElement;
$(obj).之后的事物
5) 事件相关
? 常见事件
? 页面加载完成事件 $(function(){})
? 点击事件 click
? 获取失去焦点 focus 得到焦点blur
? 鼠标事件 mouseover mouseout mousedown mouseup mousemove
? 键盘事件 keydown keyup
? 屏幕尺寸改变 resize
? 表单提交
? 获取事件源的方式和JavaScript一样
? 事件模拟 一定时间后,执行 $(“input”).trigger(“click”);
? setInterval(function(){
? $(“input”).trigger(“click”)
? },5000)
? hover事件合并
? $(“span”).hover(function(){ 鼠标移入和移出事件
? $(“span”).css(“color”,“red”);
? },function(){
? $(“span”).css(“color”,“blue”);
? });
6) 和动画相关
? $(“input”).click(function(){
? if(this.value == “隐藏”){
? $(“img”).hide(3000,function(){
? alert(‘123456789’)
? })
? }else if(this.value == “显示”){
? $(“img”).show(3000)
? }else if(this.value == “上滑”){
? $(“img”).slideUp(3000)
? }else if(this.value == “下滑”){
? $(“img”).slideDown(3000)
? }else if(this.value == “淡出”){
? $(“img”).fadeOut(3000)
? }else if(this.value == “淡入”){
? $(“img”).fadeIn(3000)
? }else{ //自定义 必须设置定位(如:相对定位position: relative)
? $(“img”).animate({“left”:“500px”},1000) 左移动
? .animate({“top”:“500px”},1000) 下移动
? .animate({“left”:“0px”},1000) 右移动
? .animate({“top”:“0px”},1000) 上移动
? .animate({“width”:“200px”,“height”:“200px”},1000)
? .fadeOut(2000,function(){
? $(this).remove()
? })
? }
? })