web前端基础

html:Hyper Text Markup Language(超文本标记语言)

  1. 超文本指不仅仅是纯文本还包括字体样式颜色大小，和多媒体相关（图片、音频、视频）
  2. 文本标签
    1. h1-h6 文本标题 align="left/right/center"
    2. p段落标签
    3. hr水平分割线
    4. br换行
  3. 列表标签
    1. 无序列表
      1. <ul><li></li></ul>
    2. 有序列表
      1. <ol><li></li></ul>
    3. 定义列表
      1. <dl><dt>definition term标题</dt><dd>definition description描述</dd></dl>
    4. 列表嵌套
      1. 有序列表和无序列表可以任意无限嵌套
  4. 分区标签（元素）
    1. <div></div> <span></span>一般页面开发都会把页面分为三大区：<div>头部</div><div>正文</div><div>脚部</div>
  5. 标签元素分类：
    1. 块级元素：独占一行 div,h1-h6,p,hr
    2. 行内元素：共占一行 span,b和strong,i和em，del和s,u
    3. 行内元素的空格折叠现象，只能识别一个空格，如果需要多个空格 则用&nbsp; 取代空格
  6. 常见特殊字符：
    1. 空格：&nbsp; 
    2. <: &lt;
    3. >: &gt;
    4. 换行：
  7. 图片标签 img
    1. 常用属性：
    2. src-图片路径
      1. 相对路径：
        1. 访问站内资源时使用相对路径
        2. 在页面的上一级目录：/图片名
        3. 在页面的下级目录：文件夹名/图片名
      2. 绝对路径：
        1. 访问站外资源时使用，绝对路径以http开头，称为图片盗链，可以节省自己网站资源，但是存在找不到图片的风险
    3. alt-当图片不能正常显示的时候显示的文本
    4. title-当鼠标在图片上悬停时显示的文本
    5. width、height-两种方式：
      1. 像素
      2. 上级元素的百分比
    6. 支持的图片格式：jpg(jpeg)、png、gif
  8. 图像地图map
    1. map属性：name用于表示地图唯一性的标识
    2. map的子元素area标签
    3. area的属性：shape形状（rect、circle） coords坐标 （矩形4个值对角线点的坐标，圆形3个值圆心坐标和半径）
    4. href路径：可以指向页面资源也可以指向文件资源，如果浏览器支持此文件则直接浏览，如果不支持则下载
  9. 超链接 a
    1. 如果a标签不加href属性，则就是纯文本
    2. href属性的作用和图像地图里面的作用一样
    3. target="_black"在新的窗口中显示目标页面
    4. 如果a标签包裹的是文本则是文本超链接，如果是图片则是图片超链接
    5. 可以通过超链接实现页面内部跳转，如果跳转的目的地是文本没有标签则需要添加一个空的a标签作为锚点，如果目的地有标签则直接在标签中添加id不需要单独添加锚点
  10. 表格标签table
    1. 常用属性：border边框 的粗细单位是像素 cellspacing单元格的间距 cellpadding单元格距内容的距离 width align
    2. 子标签：tr行 td咧：跨行rowspan 跨列 rowspan  caption表格标题 th表头字体加粗并居中
    3. 分组标签：thead头部 tbody体部 tfoot脚部 分组标签没有显示效果，提高代码的可读性，对多行进行统一管理
  11. form表单
    1. 表单是用于获取用户输入的各种信息，并将信息提交到服务器的空间
    2. 表单包括以下几种控件：文本框type="text" name="username" value="abc" placeholder="" maxlength="" readonly=""
    3. 密码框password 、
    4. 单选type="radio" value="提交的数据" id="唯一性标识" checked="默认选中"
    5. 多选checkbox、下拉选<select><option value selected>、隐藏域<input type = hidden name value/> 、时间选择器date、文件选择器file、文本域<textarea rows cols placeholder  name/>等

css 层叠样式表

  1.     三种引入方式：内联 内部 外部
  2. 优先级：内联优先级最高 内部和外部优先级一样 后执行覆盖先执行的
  3. 选择器
    1. 标签名选择器div{}
    2. id选择器#id{}
    3. 类选择器 .class{}
    4. 分组选择器 div,#id,.class{}
    5. 子孙后代选择器 div p{}
    6. 子元素选择器 div>p{}
    7. 为类选择器 未访问a:link 访问过 a:visited 悬停 a:hover 点击：a:active
    8. 任意元素选择器 *{}
  4. 颜色赋值 
    1. 单词赋值 red
    2. 6位16进制#ff0000
    3. 3位16进制 #f00
    4. 3位10进制rgb(255,0,0)
    5. 4位10进制rgba(255,0,0,0-1)
  5. 背景图片相关
    1. background-image:url(路径);
    2. background-size:200px 300px;
    3. background-repeat:no-repeat;
    4. background-position:横向（left right center） 纵向（top bottom center）
  6. 盒子模型
    1. 盒子模型由外边距、边框、内边距、宽高组成
    2. 宽高：width/height 通过像素或上级元素百分比赋值 行内元素不能修改宽高 由内容决定
    3. 外边距：元素距上级元素或相邻兄弟元素的距离。margin-left/right/top/bottom margin:10px margin:10px 20px; margin 0 auto;水平居中 margin 10px 20px 30px 40px; 上右下左  注意事项：行内元素不能设置上下外边距 左右相邻相加 上下相邻取最大值 显示异常通过 overflow:hidden解决
    4. 边框：border-left/right/top/bottom border：边框粗细 样式 颜色 行内元素不影响元素所占高度
  7. 盒子模型之内边距
    1. 什么是内边距：元素边框距内容的距离成为内边距
    2. 赋值方式：和外边距赋值方式一样 padding:10px ...
    3. 注意事项：行内元素上下内边距有效果但是不影响元素所占高度
    4. 如果需要移动元素的内容只能通过元素的内边距移动
    5. 如果需要移动的是元素的子元素有两种移动方式：
      1. 给元素添加内边距，切记此种方式会影响元素的宽度 
      2. 给子元素添加外边距（推荐）
  8. 行内元素特殊点
    1. 不能修改宽高
    2. 不能添加上下外边距】
    3. 边框不影响所占高度
    4. 内边距不影响所占高度
  9. 文本相关
    1. 水平对齐方式：text-align;left right center
    2. 文本修饰 text-decoration :overline/underline/line-through/none
    3. 文本阴影 text-shadow 颜色 x偏移 y偏移 浓度
    4. 文本颜色 color:red
    5. 行高 line-height:可以控制文本垂直居中
  10. 字体相关
    1. 字体大小 font-size
    2. 字体加粗 font-weight:bold/normal
    3. 斜体：font-style:italic
    4. 字体设置 font-family:xxx xxx xxx
  11. 溢出设置 overflow
    1. hidden:超出隐藏
    2. visible:超出显示（默认）
    3. scroll：超出滚动显示
  12. 显示方式：display
    1. block:块级元素的默认值，可以修改宽高，只能独占一行
    2. inline：行内元素的默认值，可以攻占一行，不能修改宽高
    3. inline-block:行内块，既可以修改宽高，也可以共占一行
  13. 定位方式：
    1. position定位 有四种
      1. 静态定位static(文档流)默认的定位方式 行内元素从左向右，块级元素从上到下
      2. 相对定位relative 元素不脱离文档流从元素所在位置做位置偏移（通过top left right bottom控制元素的位置）
      3. 绝对定位absolute 元素脱离文档流 元素相对于窗口（默认）或上一级元素（需要给上级元素添加position:relative）做位置偏移；
      4. 固定定位fixed 脱离文档流 元素相对于窗口做位置偏移
    2. 浮动定位 float
      1. 浮动定位脱离文档流，元素从当前所在行向左向右浮动，知道撞到上级元素边框或其他浮动元素停止
      2. 当纵向排列的元素需要更改横向排列时使用浮动定位
      3. 如果一行装不下会自动换行，换行时有可能被卡主。
      4. 如果元素的高度为自动识别高度，元素内部的所有子元素全部浮动后，自动识别的高度为0，可以通过给元素添加overflow:hidden 解决此问题
      5. 如果元素上面的其他元素浮动，则元素为自动往上顶，如果不希望元素顶上去给元素添加clear属性。
  14. css的三大特性：
    1. 继承性：子元素可以继承上级元素的部分样式，只能继承文本相关和字体相关的样式；部分元素不受继承影响，比如超链接a不受继承影响、h1-h6字体大小不受继承影响
    2. 层叠性：当不同的选择器选择同一个元素，如果作用的样式不同则全部层叠到一起响应，如果作用的样式相同则由优先级决定
    3. 优先级：作用范围越小优先级越高，直接选中优先级高于间接选中（继承属于间接选中）id>class>标签名
  15. 行内元素的垂直对齐方式：vertical-align
    1. top:上对齐
    2. bottom：下对齐
    3. middle:中间对齐
    4. baseline：基线对齐 默认
  16. overflow：hidden解决了两个问题：
    1. 元素上边缘和上级元素上边缘重叠时给元素天剑上外边距的显示异常
    2. 自动高度识别为0的问题

JavaScript

  1. JavaScript语言是1995年由网景公司发布，Livescript同一年更名为JavaScript
  2. 特点：
    1. 属于脚本语言，执行时不需要编译
    2. 可以由浏览器解析执行
    3. 基于面向对象
    4. 弱类型语言
    5. 该语言智能访问浏览器内部的数据，所以说JavaScript语言安全性很高
  3. 引入方式：
    1. 内联，内部，外部
  4. 变量声明和赋值
    1. var x =10;
  5. 数据类型 
    1. js只有对象类型
    2. 常见的对象有：
      1. 数值：number
      2. 字符串：string
      3. 布尔值：boolean
      4. 对象：Object
      5. 未定义：undefined
  6. 数据类型之间的隐式转换
    1. 字符串：转数值能转直接转 不能转NaN  转布尔值：""转false 其他true
    2. 数值：转布尔值 0和NaN转false 其他true
    3. 布尔值：转数值 true->1 false->0
    4. undefined:转数值NaN转布尔值false
    5. null:转数值0 转布尔值 false
  7. 运算符与java大体一致
    1. ==和===,==先同一类型再比较值，===先比较类型，类型相同再比较值
    2. typeof 66+6 = "number6"
    3. 除法运算会自动转换整数和浮点数
  8. 语法和java大体一致
    1. if和while括号内部的内容如果不是布尔值会自动转换成布尔值
    2. for循环把int改成var  i不支持增强for循环
    3. 方法声明
      1. function 方法名（参数列表）{方法体}
      2. var 方法名=function(参数列表){方法体}
      3. var 方法名=new function("参数1","参数2","方法体");
    4. 页面相关方法
      1. 通过id获取页面元素对象 var d = document.getElementById("id");
      2. 给元素获取和天剑文本内容 d.innerText="abc";
      3. 给元素添加和获取html内容 d.innerHTML="abc";
      4. 给文本框天剑和获取文本内容 input.value="aaa";
    5. String
      1. 创建字符串的梁红方式
        1. var s1 = "abc";
        2. var s2 = new String("abc");
      2. 字符串转数值
        1. parseFloat() 把字符串转成浮点数
        2. parseInt() 把字符串转成整数，也可以把浮点数转成整数
        3. Number()等效parseFloat()
      3. 转大小写
        1. toUpperCase()
        2. toLowerCase()
      4. 获取字符串出现的位置
        1. str.indexOf("a");获取第一个出现的位置
        2. str.laseIndexOf("a"); 获取最后一个出现的位置
      5. 截取字符串
        1. str.substring(开始位置,结束位置);// 截取结果不包含结束位置
        2. str.substr(开始位置,截取长度);
      6. 拆分字符串
        1. str.split(",") 返回值是数组
      7. 替换字符串
        1. str.replace(old,new);只能替换出现的第一个　　　
    6. number相关函数
      1. 四舍五入 toFixed(2);保留两位小数
    7. 数组相关
      1. 创建数组
        1. var arr1 = ["张飞","28","true"];
        2. var arr2 = new Array();
      2. 往数组中添加元素
        1. arr.push(obj);
      3. 获取和修改数组长度（java中数组长度不可修改）
        1. arr.length=2;
      4. 数组遍历和java一样
      5. 数组反转
        1. arr.reverse();
      6. 数组排序
        1. arr.sort();默认以字符串的形式，按照Unicode编码进行排序
        2. 自定义排序 function mysort(a,b){return a-b;//升序  return b-a;//降序}
        3. arr.sort(new Function("a","b","return a-b"));
    8. 日期相关
      1. 服务器时间和客户端
        1. 获取客户端时间 var d = new Date();
      2. 把字符串时间转成时间对象
        1. 2019/3/11 08:00:00 var d1 = new Date("2019/3/11 08:00:00");
      3. 获取和设置时间戳（距1970年1月1号 00:00:00的毫秒数）
      4. 获取时间对象的时间戳 d.getTime()
      5. 设置时间戳 d.setTime()
      6. 获取时间分量 （年、月、日、时、分、秒、星期几）
        1. d.getFullYear();
        2. d.getMonth();
        3. d.getHours();
        4. d.getMinutes();
        5. d.getSeconds();
        6. d.getDay();
      7. 获取年月日和时分秒
        1. d.toLocalDateString();
        2. d.toLocalTimeString();
    9. 正则表达式
      1. 应用场景：
        1. 查找内容
        2. 校验文本
      2. 匹配任意字符
        1. \w 匹配任意数字、字母、下划线
        2. \d 匹配任意数字
        3. \s 匹配任意空白
        4. ^ 开头
        5. $ 结尾
      3. 创建正则表达式对象 两种格式：
        1. 第一种格式：var reg = /规则/模式：两种模式：g 全局查找 i 忽略大小写
          1. 举例：以m开头 reg=/^m/;以n结尾 reg=/n$/;
          2. 包含两个数字 reg=^d{2}/;
          3. 以3位数字结尾reg=^d{3}$/;
          4. 包含3-5位数字 reg=^d{3,5}/;
          5. 6-10位数字、字母、下划线reg=/^w(6,10)$/;
          6. 以x开头y结尾中间有3-6位数字 reg=/^x\d{3,6}y$/;
        2. 第二种格式：var reg=new RegExp("规则","模式"?);此种形式如果有反斜杠需要写成 \\
          1. var reg = new RegExp("/^\w(6,10)$/");
        3. 正则相关方法
          1. 查找内容 reg.test(str)   var str = "You can you up no can no b b"; var reg=/^y/i; 
        4. 字符串和正则相关的方法
          1. 查找内容match() 如果是全局查找则返回所有内容 var str="you can you up no can no b b";var reg=/no/g;var arr = str.match(reg);
          1. 查找替换 替换所有 str.replace(reg，"不");
  9. 修改和获取页面元素的class属性
    1. d.className="abc";
  10. 文本框失去焦点事件
    1. 事件名称onblur，当光标从文本框中离开时触发此事件
  11. 元素隐藏的两种方式
    1. display:none 元素隐藏并且会脱离文档流
    2. visibility:hidden(隐藏)、visible（显示）；元素不脱离文档流
  12. 事件取消
    1. 在任何时间中执行return false;都可以把当前时间取消掉
  13. 弹出确认框 
    1. confirm("xxx");

    2. <script type="text/javascript">
      var mymessage=confirm("你喜欢JavaScript吗?");
      if(mymessage==true)
      { document.write("很好,加油!"); }
      else
      { document.write("JS功能强大，要学习噢!"); }
      </script>

  14. 创建元素对象
    1. var div = document.createElement("div");
  15. 自定义对象
    1. 声明函数的形式创建对象
      1. function Person(name,age){this.name=name;this.age=age;this.run=function(){alert("name:"+this.name+"age:"+this.age);}}
      2. //创建对象 var p = new Person("Tom",18);
      3. //调用方法 p.run();
    2. 声明变量的形式创建对象
      1. var student={"name":"曹操","age":18,"run":function(){alert("name:"+this.name+"age:"+this.age);)}}
      2. 调用：student.run();

DHTML

  1. Dynamic(动态)超文本标记语言，把html,css,js结合到一起实现出来，并不是新技术
  2. DHTML包括BOM和DOM
  3. BOM:Browser Object Model 浏览器对象模型，包含了一部分和浏览器相关的对象，可以获取浏览器的请求地址，历史记录，浏览器窗口尺寸，浏览器版本。
  4. DOM:Document Object Model 文档对象模型，包含了和页面相关的内容

BOM:

  1. window:里边的对象称为全局对象，里面的方法称为全局方法。全局对象和全局方法都可以省略window
  2. 常用全局方法
    1. alert();
    2. confirm();
    3. prompt();
      1. 　　var response = window.prompt("欢迎","请输入验证码");
      2.        if(response == "123") {alert("123")}else{alert("验证码错误")} 
    4. parseInt()/parseFloat();
    5. isNaN();
  3. 常用对象
    1. location地址
      1. location.href 获取和设置浏览器的请求地址
      2. location.reload()刷新
    2. history历史
      1. 当前窗口的历史记录窗口关闭后就没有了
      2. history.length得到历史请求页面的数量
      3. history.back()返回上一个页面
      4. history.forward()前往下一个页面
      5. history.go(num)前往某个页面 0表示当前1表示下一个2表示下两个-1表示上一个
    3. screen屏幕
        1. screen.width/height//得到屏幕的宽高像素
        2. screen.availWidth/availHeight//得到屏幕可用的宽高
    4. navigator 导航/帮助
      1. navigator.userAgent得到浏览器相关的版本信息
    5. 和window相关的事件
      1. onclick点击
      2. onload页面加载完成
      3. onfocus获取焦点
      4. onblur失去焦点
    6. eval()函数
      1. 可以将字符串以js代码的形式执行
  4. 通过js给元素添加css样式
    1. 通过元素对象.style.样式属性名称="属性值"
  5. 定时器setInterval(函数，时间间隔);
    1. var time = setInterval(function(){},5000);
  6. 停止定时器 clearInterval(time);
  7. setTimeout(function(){},5000);

DOM:主要学习如何对页面元素进行增删改查操作

  1. 查找元素
    1. 通过id查找 var input = document.getElementById("id");
    2. 通过标签名查找 var divs = document.getElementsByTagName("div");
    3. 通过标签的name属性查找 var arr = document.getElementsByName("gender");
    4. 通过标签的class属性值查找 var arr = document.getElementsByClassName("");
  1. 通过上下级关系获得元素
    1. 获取元素的上级元素   元素对象.parentElement 得到的是一个上级元素
    2. 获取元素的下级元素们  元素对象.childNodes 得到的是一个数组里面装着多个元素和文本
  2. 创建元素
    1. var div = document.createElement("div");
    2. 添加元素   父元素.appendChild(子元素);
    3.  插入元素   父元素.insertBefore(子元素,弟弟元素);
    4.  删除元素   父元素.removeChild(被删除的元素);
  3. 事件相关
    1. - 已经接触过的事件： onclick onblur onsubmit onfocus onmouseover onmouseout onchange onload  onresize
    2. - 事件：事件就是一些特定的时间点，事件包括鼠标事件、键盘事件、状态改变事件
    3. - 鼠标事件： 鼠标点击事件onclick  鼠标移入事件onmouseover 鼠标移出onmouseout  鼠标按下事件onmousedown   鼠标抬起事件onmouseup  鼠标移动事件onmousemove
    4. - 键盘事件：键盘按下事件onkeydown     键盘抬起事件onkeyup
    5. - 状态改变事件： 页面加载完成onload 值改变事件onchange  获取焦点onfocus 失去焦点onblur 提交事件onsubmit  窗口尺寸改变事件onresize
    6. 1. 鼠标移入事件 onmouseover   鼠标移出事件 onmouseout   状态改变事件onchange
  4. 事件绑定
    1. 1. 在元素内部通过事件属性绑定事件 
    2.     在事件方法中this代表window  
    3. 2. 动态绑定，通过js代码给元素对象添加事件
    4.     在事件方法中this代表事件源
  5. event对象
    1. - event对象中保存着和事件相关的信息
    2.  鼠标事件中 可以获取鼠标的坐标  event.clientX/Y
    3.  键盘事件中 可以获取键盘的字符编码  event.keyCode
    4.  在任何事件中可以通过event对象获取事件源 
    5.  var obj = event.target||event.srcElement;
  6. 获取事件源的三种方式
    1.  非动态绑定可以将事件源从事件属性的位置传递过去
    2.    <input type="button" value="非动态绑定按钮"       onclick="fn1(this)"> 
    3.  动态绑定的事件中 this代表的就是事件源
    4. 在任何方式绑定的事件中 通过event对象获取都可以
    5.    ar obj = event.target||event.srcElement;
  7. 取消事件
    1.  在任何事件中执行return false; 即可取消当前事件
  8. 事件传递（事件冒泡）
    1.  如果在同一个范围有多个事件响应，响应顺序从底层往上层传递，类似气泡从下往上，所以称为事件冒泡
    2. -如果在某一个范围多个元素需要添加事件，可以把事件添加到这些元素共同的上级元素，只需要添加一次，即可让所有子元素全部具备该事件，好处是可以节省代码。
 

jQuery

 
  1. - jQuery是一个js语言的框架，作用是简化js代码 
  2. jQuery优势
    1. - 简化js代码
    2. - 可以像css一样通过选择器查找元素
    3. - 可以直接修改元素的样式
    4. - 解决兼容性问题
  3. 如何引入jQuery
    1. - 因为此框架就是一个js文件 引入方式和一般js文件一样
    2.     <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
  4. $
    1. - $等效jQuery    $("#id") = jQuery("#id");
  5. jq对象和js对象互相转换
    1.     $("#id") //jq对象
    2.     var btn = document.getElementById("id");//js对象
    3. - 把js对象转成jq对象     var jq = $(js);
    4. - 把jq对象转成js对象   var js = jq[0] / jq.get(0);
  6. 选择器
    1. 基本选择器 和css一样
      1. 1. 标签名选择  $("div")
      2. 2. id选择器  $("#id")
      3. 3. 类选择器 $(".class"）
      4. 4. 分组选择器 $("#id,.class,div")
      5. 5. 任意元素选择器 $("*")
    2. 层级选择器
      1. 1. $("div span") 匹配div下所有的span子孙元素
      2. 2. $("div>span") 匹配div下的span子元素
      3. 3. $("div+span") 匹配div后面相邻的span兄弟元素
      4. 4. $("div~span") 匹配div后面所有的span兄弟元素
    3. 层级函数
      1. 1. 获取某个元素的所有兄弟元素       $("d1").siblings("div"); //参数可以不写，不写代表所有兄弟   
      1. 2. 获取某个元素的哥哥元素   $("d1").prev("div")；//参数不写是获取相邻的上一个元素 写的话指定上一个的元素类型
      2. 3. 获取某个元素的哥哥们元素  $("d1").prevAll("div")；
      3. 4. 获取某个元素的弟弟元素    $("d1").next("div");
      4. 5. 获取某个元素的弟弟们元素   $("d1").nextAll("div");
    1.  过滤选择器
      1. 1. $("div:first") 匹配所有div中的第一个
      2. 2. $("div:last") 匹配所有div中的最后一个
      3. 3. $("div:even") 匹配所有div中的偶数位的元素 从0开始
      4. 4. $("div:odd") 匹配所有div中的奇数位的元素 从0开始
      5. 5. $("div:eq(n)") 匹配所有div中的第n个   从0开始
      6. 6. $("div:lt(n)") 匹配所有div中小于n的所有元素 从0开始 
      7. 7. $("div:gt(n)") 匹配所有div中大于n的所有元素 从0开始
      8. 8. $("div:not(.one)") 匹配所有div中 class不等于one的所有div元素
    2. ####内容选择器
      1. 1. $("div:has(p)") 匹配所有包含p标签的div
      2. 2. $("div:empty") 匹配所有空的div
      3. 3. $("div:parent") 匹配所有非空的div
      4. 4. $("div:contains('abc')") 匹配所有包含文本abc的div
    3. 可见选择器
      1. 1. $("div:hidden") 匹配所有隐藏的div
      2. 2. $("div:visible") 匹配所有可见的div
    4. - 显示隐藏相关的函数
      1.     $("#abc").hide();//隐藏
      2.     $("#abc").show();//显示
      3.     $("#abc").toggle();// 如果当前隐藏则显示，如果显示则隐藏
    5. 属性选择器
      1. 1. $("div[id]")  匹配有id属性的div
      2. 2. $("div[id='d1']") 匹配有id=d1属性的div
      3. 3. $("div[id!='d1']") 匹配有id不等于d1属性的div
    6. 子元素选择器
      1. 1. $("div:nth-child(n)") n从1开始 匹配div中第n个子元素
      2. 2. $("div:first-child")  匹配div中第一个子元素
      3. 2. $("div:last-child") 匹配div中最后一个子元素
    7. 表单选择器
      1. 1. $(":input") 匹配所有 文本框 密码框 单选 复选 。。。
      2. 2. $(":password") 匹配所有密码框
      3. 3. $(":radio") 匹配所有单选
      4. 4. $(":checkbox")匹配所有复选框
      5. 5. $(":checked") 匹配所有 单选、复选、下拉选
      6. 6. $("input:checked") 匹配所有 单选、复选
      7. 7. $(":selected") 匹配所有被选中的下拉选 
  7. 文档操作
    1. 1. 创建元素   
      1. var div = $("<div>abc</div>");
    2. 2. 添加元素 
      1. 父元素.append(div); //添加到最后面  父元素.prepend(div);//添加到最前面
    3. 3. 插入元素
      1.     兄弟元素.after(div); //插入到兄弟元素的后面   兄弟元素.before(div); //插入到兄弟元素的前面
    4. 4. 删除元素
      1.     元素对象.remove(); 
  8. 样式     
    1.         元素对象.css("color","red");
    2.         元素对象.css({"color":"red","width":"100px"});
    3.         对象.css("color");
  9. 属性 
    1.         对象.attr("id","a");
    2.         对象.attr("id");//取值
  10. 文本
    1.         对象.text("lala")；
    2.         对象.text();
  11. html
    1.         对象.html("<h1>aaa</h1>");
    2.         对象.html();
  12. jq事件相关
    1. - jq中事件名称和js事件名称相比较 就是去掉on
    2. - 页面加载完成事件：
    3.     $(function(){ })
    4.     $(document).ready(function(){})
    5. - 事件中获取事件源的方式：
      1. 1. 如果是动态绑定事件 this为事件源
      2. 2. 非动态绑定 var obj = event.target||evet.srcElement;
      3. 3. 非动态绑定时 在元素属性中通过this
      4.     <input type="button" onclick="myfn(this)">
  13.  事件模拟
    1.         setTimeout(function(){
    2.             //模拟点击事件
    3.             $("input").trigger("click"); },3000);
  14. -事件合并 hover事件相当于 onmouseover+onmouseout 
 
 
 
 
 
posted @ 2019-06-24 06:40  白玉神驹  阅读(148)  评论(0)    收藏  举报