前端学习笔记

墨蓝 2022-03-21 03:53 220阅读 0赞

**                                                                                                HTML**  
**1.HTML 的概念 **  
   hypertext   markup  language  超文本标记语言   用来描述网页的语言  
   HTML 是一种标记语言   
   HTML这种标记语言 是由一套标签构成   
   HTML文件的后缀是 html 或者 htm 这个可以直接由浏览器打开  
**2.涉及到的基本概念**  
   浏览器     用来显示和翻译HTML的软件   
   HTTP      (typertext  transfer  protocol)超文本传输协议  
   URL         统一资源定位器   
   B/S          browser  server   浏览器 服务器的概念   
**3.HTML文件的结构 **  
   声明部分  
   html 标记部分  
   head 标记部分  
   body部分  
**4.HTML 基本标记 **  
   <html>   根标记  
   <head>   html 头标记  
           <title>   </title>  标题   
           <meta http-equiv="refresh" content="3;url=http://www.baidu.com"> 刷新  
           <meta charset="utf-8">    设置编码  
           <style>  用来控制 和 编写 css样式   
                      
           </style>  
           <link>    用来加载外部的css样式   
           <script> </script>  用来编写 和 加载 javascript 脚本的    
    <body>  html 主体元素   
            在body  元素中 可以 使用大量html 元素   这些元素相互嵌套  和 排列  就构成整个html页面   
            body 中主要的属性   
                   bgcolor     涉及到颜色    直接英文  如 red   blue  green  pink   
                                     RGB 来控制  RGB(140,140,140)  
                                     可以使用 16 进制   ff00ff    \#ff0000  
                    text          控制文本颜色   
                    background   背景图片    
**5.HTML的标签 **  
   标题标记  <h1>   到  <h6>  
   <b>  加粗     
   <i>   倾斜    
   <u>  下滑线   因为和超链接很像 不建议使用   
   <del> 删除线  
   <font>   控制字体   
   <hr>     一条线  
   <br>    换行  
   <p>      段落  
   &nbsp;  空格   
    <div>  块元素   单独占一行  
    <span> 行内元素  可以和其它元素在一行   
    <a  href="对应的链接地址"> 链接显示的内容</a>  
            锚点的定义  <a  id="锚点名"> </a>   <a   name="锚点名"> </a>  
            使用超链接  定位到 锚点可以使用 <a href="\#锚点名"> </a>  
            使用超链接  定位到 某个页面的锚点 <a href="页面名\#锚点名"> </a>  
    <img   alt="没有图片时的提示"  src="图片资源的地址"  width="图片的宽度 一般使用多少像素 当然也可以使用百分比"  height="参考宽度的说明"   border="单位是多少像素"/>  
      
     <ol>   有序列表  order list  
     <ul>   无序列表   
                 这两种不同的列表他们列表项 都是  <li>    list item     
                 列表可以进行嵌套   
     <table>  表格标签  
                 <tr>   这代表表的行  
                 <td>  这代表表的单元格   
                 width   height     align     bgcolor   background     border   
                 可以给  tr  td  或者 table 设置   
                 还可以设置  行的合并  rowspan    
                 也可以设置  列的合并  colspan      
                 这些设置 可以使用table的属性 进行设置 但以后尽量使用css控制  
** 3.FORM 表单**  
    用来显示 和 收集数据  并使用 http 把数据提交给web服务器     
    **3.1 表单属性**  
    action      请求的url    \*\*.do  \*\*\*.jsp  \*\*\*.action  （对应后台的一个java类）  
    method   提交方式     post   get(默认)   
    enctype   表单提交的编码方式      
            application/x-www-form-urlencoded   默认的   
            multipart/form-data    文件上传时 method 必须是post enctype必须是    
                  multipart/form-data              
            使用ajax 请求时    
    **3.2 写一个注册页面  会用到很多 form 表单元素 **  
     <input  type=""   name=""  value="" />   
     type 有  text    password    checkbox   radio   file    button   reset   submit  
     <select>  
               <option value="1">beijing </option>         
    </select>  
    <textarea>  </textarea>  
      **4.HTML  DOM **  
      **4.1 简介 **  
      HTML  文档对象模型   
      每个HTML  被载入浏览器之后 都会产生一个 Document 对象   
      通过 Doucment 就可以获取 HTML 中元素    获取到元素之后 可以进行相应的操作   
    
    **  4.2 通过document 对象 如何 获取HTML中的 元素**  
      document.getElementById("id属性对应的值")    
      document.getElementsByTagName("元素的名字")  
      document.getElementsByName("name属性对应的值")  
      document.getElementsByClassName("class属性对应的值");

元素节点 不能通过 nodeValue 来获取元素的内容    文本节点可以通过 nodeValue直接获取文本  
            内容。元素要获取文本需要使用 innerHTML。  
     节点类型是1  代表元素节点    2 代表属性节点   3  代表文本节点   
**     4.3练习 **  
     点击按钮 就可以给一个图片元素 设置图片的内容   然后再点击一个按钮 可以给这个元素  
           增加样式。  
  **   4.4练习 **  
     做一个  注册表单    有三个输入框   一个代表账号  另一个代表密码   还有一个代表邮箱   
     要求 失去焦点时 对账号  密码 还有邮箱进行验证。如果格式不正确则 提示相应的数据不可用  
     如果格式正确 则后面的span提示 数据可用。  
**5.验证输入框中是否输入了值 **  
   可以使用   ==""   或者使用  数据.length == 0   
**6.如何来修改  HTML DOM 元素的样式**   
  ** 6.1 使用 className 来加载类选择器对应的样式 **  
**   6.2 style.font-size 这种写法是错误的  **  
         正确的写法是  style.fontSize   
         具体的样式值 可以参数 w3c 文档   JS---HTMLDOM ---参考手册 --- Style 类型 点进去   
**   6.3style.cssText   可以一次修改多个样式 （了解）**  
**7.HTML  DOM 元素的其它操作 **  
   parentNode  获取元素的父节点   
   firstChild    第一个子节点   
   lastChild    最后一个子节点   
   childNodes   获取所有的子节点   
   关于节点的操作:  
         nodeName  获取节点的名字  
         nodeValue  获取节点的值    
                元素节点获取的是null   文本节点获取的是文本值     属性节点获取的是属性值   
         nodeType   获取节点的类型   1 就是元素节点   2 就是属性节点   3 就是文本节点  
                如果是元素节点 要获取值 可以通过 innerHTML 来获取   
         <ul>  
                <li> abc </li>  
        </ul>  
  attributes  获取元素的所有属性  类似map 结构 以 属性名作为key  以属性节点作为值   
  创建元素  
         document.createElement("元素名")  返回创建的元素对象  
  添加元素   
         parentNode.appendChild(新元素节点)  
         parentNode.insertBefore(新元素节点，某个兄弟节点);   
  删除元素  
         parentNode.removeChild(某个子节点);

**  8.HTML 元素对象  (了解)**  
     给html 元素 提供了 具体的类型  这样在某些场景下操作相对的比较方便   
     比如:下拉列表   
     对应Select 类型的对象   
     常用的属性: options  这是所有的Option 类型的子元素   
                        selectedIndex   选中的 Option 元素对应的索引号  编号从0 开始   
     常用的方法 ：  add(option)   remove(option)  
                          
**  9.浏览器对象 **  
    ** 9.1 window对象 **  
      浏览器窗口对应的对象    
      常用的属性:  
      document   对应整个html文档对象   
      location      定位一个页面   
      history        页面历史   
    **  9.2 window 对话框 (了解)**  
      alert("消息");  弹框   
      confirm("消息")  选择确认框   
      输入框  var msg = window.prompt("请输入你的名字", "杜兰特");        
    **  9.3  window 的 open 方法**  
      open(参数)  参数很多 一般只用第一个参数   代表打开页面的地址  如果关闭打开的页面   
             调用window.close()  由于是新窗口 没有 history  
      **9.4 window 定时器 **  
       主要用于   网页时钟    倒计时   跑马灯 等效果   
       主要有两种定时器 一种是周期性定时器  一种是一次性定时器   
       周期性定时器的实现:  
       setInterval(exp,time)  exp 执行的代码  time时间周期  这个函数返回定时器引用  
       clearInterval(id)   id 定时器引用  这个函数可以停止定时器   
       页面元素加载时机:  
              在写js代码时 获取页面的元素时  可能页面还没有加载完毕 哪这样是无法获取到  
              页面元素的引用的。  
              如何解决?  
              把JS代表放入 body 之后    
              或者把初始化代码写入Body的 onload 对应的事件中  
      一次性定时器   
              setTimeout(exp,time)  和上面的区别是 time代表延迟多少毫秒之后调用 并且只调用一次  
              clearTimeout(id)  
    **  9.5  window 对应的 Screen 对象  （了解）**  
             获取屏幕的相关信息    
             JS基本上可以获取计算机中所有信息  包括 主板 cpu  等   
      **9.6  window 对应的 Navigator  类型的对象 (了解)**  
             获取浏览器相关的信息

**10.事件**  
**   10.1  事件的概念 **  
   html 对象 在状态改变   鼠标操作   键盘操作 等触发的动作   
         键盘事件   
         鼠标事件   
         状态改变事件    
   事件发生时 会产生一个 事件对象（event 对象） 记录事件相关的信息。  
**  10.2 事件的分类 **  
         鼠标事件     onclick   ondblclick    onmousedown   onmouseup  onmouseout  
                           onmouseover   onmouseenter   
         键盘事件    onkeydown   onkeyup  
         状态事件    onclick    onfocus    onload   onblur    onchange   onsubmit  
        
         上面的事件 句柄   都对应相应的事件处理函数   
**  10.3 事件的冒泡处理机制 **  
        当子元素 触发了相应的事件    子元素如果有对应的事件处理函数   处理完毕之后  默认会   
              自动向父元素传递事件  如果父元素有对应的事件处理函数  则会继续调用事件处理函数的  
              代码。这个机制依次向上传递  这种机制称之为事件冒泡机制。  
**   10.4 取消事件冒泡机制 **  
         event.cancelBubble=true;  
         event 对象在不同的浏览器 默认的机制略有不同。IE中可以直接使用 event ，在firefox中  
               需要传入事件对象 才能使用。  
        var  target = event.target||event.srcElement;  
  ** 10.5 鼠标事件 和 键盘事件 **  
          
 **11.面向对象 **  
  **  11.1 对象的概念 **  
    具有共同特征 和 共同行为一组对象的抽象 叫类   
    由类创建的变量 称之为对象   
  **  11.2  访问对象的属性 和 方法**   
     对象名.数据   
    **11.3 创建对象  （了解）  **  
        var  person  = new  Object();  
        添加属性 和 方法   
       
        // 这个可以看成java的构造方法  这是第二种构建对象的方式  
      function  play()\{  
    alert('我叫'+this.name+'准备去打篮球');  
       \}   
function  Person(name,age)\{  
    this.name= name;  
    this.age = age;  
    this.play = play;  
\}  
function  test2()\{  
    var person  =  new Person("lisi",22);  
    person.play();  
\}  
** 12.JSON **  
   JSON （javascript  Object  Notation） 是一种轻量级的数据交换格式   
   JSON对象的 格式如下:  
   \{"key":值,"key":值\}  
   JSON对象 访问数据  格式如下  
   JSON对象名.key  
   JSON字符串 转换成  JSON 对象  可以使用 JSON.parse  或者  eval

**  CSS**  
**1. CSS简介**  
   **1.1 概念 和作用**  
   层叠样式表 (cascading  style  sheets)  
   用来控制 html 元素的显示   
   样式通常存在样式表中  
  ** 1.2 样式的使用方式**     
   内联样式 (处理单个元素的)  通过元素的 style属性控制的      
   内部样式 （多个元素 在一个页面中共享）   通过 <style> 标签实现    
   外部样式   （多个页面共享一个样式）   <link>  <style> 结合 @import    
          首先写一个样式 文件  \*\*\*.css  
          然后在相应的页面中导入 css 文件    
  **1.3 CSS 语法**  
   选择器  \{  
          css属性:css值;  
          css属性:css值;    
   \}  
  **1.4CSS 特性**  
   继承性      父元素的有些css声明 可以被子元素继承   字体 颜色   
   叠加性      css声明 如果没有冲突  则会产生叠加效果   
   优先级      当css声明出现冲突  优先级高的起作用   
            浏览器默认        内部样式|外部样式     内联样式     
    
** 2.选择器 **  
  ** 2.1 作用 **  
   用来定位 html 元素的    
  ** 2.2 元素选择器    适合多个同名元素 实现同样的效果**    
   元素名 \{  
          css属性:css值;  
          css属性:css值;  
   \}  
    
  举例:  
  h1\{  
         color:red;   
  \}

** 2.3 类选择器   适合元素不同  而 class属性名的值相同 则使用相同的样式 **  
   .class属性对应的名 \{

\}  
  可以使用 元素名.class属性名  则只选中元素名 对应的 是 class属性名对应的元素   
** 2.4 ID选择器**      
    \#ID属性值\{

\}  
**2.5  选择器组**  
   元素选择器,ID选择器 \{

\}  
**2.6 派生选择器**  
    对 子孙 元素 起作用    
    后代选择器     元素名  后代元素名 \{

\}  
    只对子元素 起作用   
    子元素选择    元素名 > 子元素名\{

**2.7 伪类选择器 **  
    同一个元素 在不同状态下的样式    
    :link   :visted   :HOVER   :FOCUS   :ACTIVE   
**3.背景 **  
   背景色  和  背景图片   
         background-color: red;  
         background-image: url("images/9.png");  
         background-repeat: repeat;  
         background-position: 100px  50px;    
         background-attachment: fixed;     背景是否会随内容滚动  fixed不滚动 还有一个scroll   
**4.边框**  
   border  
   border:宽度  样式  颜色;  
   就代表设置元素的四个边    上   右    下    左   
   也可以单边设置    和 上面的语法相同 知识 css属性 发生了变化  
   border-top        border-right     border-bottom    border-left  
   宽度可以使用  百分比    像素      em 来表达  em 代表当前字体的宽度   
   当内容溢出时  可以使用   
   overflow   来设置对溢出内容的处理   
         默认是可见  visible     也可以隐藏 hidden   还可以scroll   比较常用的是 auto      
** 5.框模型(盒子模型 Box  Model)**  
   内边距    padding   设置默认遵循 上 右 下 左  当然可以单独设置   
          意思元素的边 到边框 内侧的距离   所以叫内边距   
   外边距   margin     设置默认遵循 上 右 下 左  当然可以单独设置  
          意思是 元素的边框的外侧 到其它元素边框外侧的距离     
          一般设置两个即可    
      
**6.文本样式   **  
    p \{  
        font-family: 黑体;  
        font-size: 40px;  
        text-decoration: underline;  
        text-indent: 2em;  
        text-align: left;   
    \}  
    a \{  
        text-decoration: none;  
    \}  
**7.表格样式设置 **  
  table\{  
    border:1px solid  \#3099aa;   
    width: 600px;  
    height: 150px;  
    border-collapse: collapse;  
    text-align: center;  
    padding: 2px;  
\}  
td,th \{  
   border:1px solid  \#3099aa;  
\}  
**8.列表的样式 **  
   list-style-type  
   list-style-image   
   写一个列表     代表学生管理系统  
        学生管理  
               增加学生   
               删除学生  
               修改学生  
        班级管理     
               增加班级  
               删除班级  
               修改班级   
**9.鼠标形状 **  
   改变鼠标形状  使用  元素的 cursor 属性即可   
**10.元素的定位方式 **  
   默认定位   
         利用块元素 从上到下的排列   可以设置宽高   
         利用行内元素(行内元素 不能设置框 和 行内块 可以设置宽高) 从左到右的排列  
         可以使用  display  改变默认的元素显示    
   浮动定位   
         浮动定位的意思是 让元素脱离普通的默认定位  元素可以浮动在父元素的左边 或者  
               右边。浮动元素碰到父元素的边框 或者其它浮动元素的边框为止。  
          如何实现？  在要浮动的元素上设置样式  float:left 或者 right。  
          clear:left 或者 right    清除浮动元素带来的影响。  
   相对定位  
          相对于元素原本的位置 进行偏移    
          如何实现？  position:  relative;  
          top    right   bottom  left        
   绝对定位   
          相对的元素的已定位的祖先元素的位置进行偏移   
          绝对定位元素 移动之后 就不在占据原来的空间 这和相对定位不同  
          如何实现 ？ position:  absolute;     
           top    right   bottom  left     
            
          堆叠顺序:  
          z-index：是一个数字  数字越大元素显示越靠前   数字越小元素显示越靠后  
            
   固定定位   
          固定定位的意思是 把某个元素定在页面的某个位置 不随其他内容的滚动而变化   
          如何实现 ？ position:  fixed;     
           top    right   bottom  left

**JAVASCRIPT**  
** 1.什么是javascript  **   
    JS 是一种网页编程语言   它可以对页面增加 交互行为  
    它是一种基于对象  和  事件驱动的  解释性脚本语言。  
    直接嵌入html 页面 由浏览器来执行。  
** 2.JS的特点**  
    可以在任何编辑工具 上编写    由浏览器执行     
    解释型脚本   不需要编译  而是逐行执行   
    有很多的对象类型   基于对象的语言  
    适合:  
          客户端的计算   
          表单的验证  
          浏览器上事件的触发 以及 浏览器上特效制作    
** 3.JS程序 **  
    3.1可以直接写在元素对应的事件上   
    3.2可以写在 <script> 标签中   
    3.3把JS脚本中的内容 写入一个文件  然后引入   
** 4.JS错误调试 **  
    执行JS代码时 如果没有出现预期效果  则可以使用 f12 打开浏览器的调试功能   
    找到 控制台中的 js调试区 进行调试   
** 5.语法**  
  **  5.1  注释和 java中相同**    //   /\* \*/  
    **5.2  常量 和 标识符 **  
          常量 :  和java中的字面量的概念 相同   比如  123  "abc"  
          标识符: 给变量  类型  方法  等命名的    
  **  5.3 变量**               
         声明   
         var    x;  
         没有赋值之前 值是 undefined   
         赋值使用  =    
    **5.4 JS中的类型 **  
         基本类型: Number     String    Boolean   
         特殊类型: Null   Undefined    
         复杂类型: Array  Object  
  **  5.5 String 类型 **  
         String 类型的变量  使用 typeof 获取到的类型是 string  
         注意  可以使用双引号 也可以使用 单引号 但是要注意转义问题  
                比如   '   "   \\n  \\\\   
    **5.6 Boolean 类型**  
         取值是 true  和 false  但有时会当 1  和  0 进行运算  
         多用于 比较表达式的返回值  或者 控制结构   
  **  5.7 隐式类型转换**  
          数字+字符串   变成字符串  
          数字 + Boolean类型变量  则 Boolean类型的变量按照 true 是1  false 是 0 运算  
          字符串 + Boolean    Boolean 类型会把 true  或者false 拼接到字符串上  
          Boolean 类型 + Boolean 类型    按照 true 1 或者false  0 运算  
    ** 5.8 类型转换**   
          任何类型 调用 toString  都可以变成String类型  
          String 可以通过 parseInt 变成 Number   如果转换不成功 则返回 NaN （not a number）  
    ** 5.9 算术运算**  
          5/2   没有明确的整数 所以没有取整特性   
          var  i = 5;  
          i++;   这个叫后加加表达式   
          ++i;   这个叫前加加表达式  
          i   这叫变量   
             7       8        9            11    12   
          i++ + i++ + i++ + ++i+ ++i   
  **   5.10  关系运算 **  
          >   <   >= <=  !=  ==      这些和java的表现相同   
          ==       js中代表值相同   
          ===    js中代表类型相同 并且 值相同   
                      !==   
    **  5.11  逻辑运算符**  
         &&   ||      !   和java相同   
    **  5.12  三目运算符**  
         基本上和java相同  但是不会做类型提升   
**6.控制语句 **  
  ** 6.1  分支语句 **  
    写js程序  在函数中定义一个变量 代表一个人的工资   然后根据工资输出 相应的级别  
        3500 以下   属于 无产阶级   
        \[3500,10000)  属于平民级   
        \[10000,30000) 属于小康级  
        \[30000,60000) 属于中产级  
        60000  属于资产阶级   
  ** 6.2 循环语句**

**7.JS中的对象 **  
  ** 7.1 JS对象的分类 **  
         内置的对象类型   
         HTML DOM 对象  
         HTML的元素对象  
         浏览器的对象  
         自定义对象   
    **7.2 String 类型的对象**  
         var  s1 = "hello world";  
         var  s2 = new String("hello");  
         length 属性  
         toUpperCase    变大写  
         toLowerCase    变小写   
         charAt（index）  编号从 0 开始   
         charCodeAt(index)    
         indexOf(findStr,startIndex)  根据起始位置startIndex  来查找 findStr出现位置  
         lastIndexOf(findStr)  从后往前找 字符串 findStr出现的位置   
         subString(start,end)    前包含 后不包含   
         replace("要被替代的串","替换成什么")  
         split("分割符")    返回一个String  数组     
    ** 7.3 JS中的数组  **  
          访问和java相同 使用  数组名\[下标\]  即可               
          定义js的数组 用来 存放 七个数字    
          然后输出这个数组的内容  
          数组的方法  明天自己研究一下

如何获取随机数   
          Math.random()   会产生 \[0,1) 的随机数   
   
**8.JS数组的常用方法 **  
   join     concat    slice    reverse   sort   
**9.Math 中的 函数 可以通过对象类型 直接调用**  
   Math.random   
   Math.sin  
   Math.cos   
   Math.abs    
   Math.sqrt**10.正则表达式 **  
   RegExp    以^ 开头 $ 结束    
   使用方式 有如下两种  
   var    exp = /验证规则/;  
   var    exp2 = new  RegExp("验证规则");    // 涉及到转义问题      
   exp.test(数据)  
   exp2.test(数据)  
**11.日期 **  
   如何构建日期   
          // 构建了一个当前日期  
          var  date1 = new Date();       
          // 根据格式构建日期  
          var  date2 = new Date("yyyy/MM/dd hh24:mi:ss");  
          不能把 / 换成   -   
  日期调整  
         setHours(不能直接写调整数量)   而是应该先得到之前的小时数 然后调整数量   
         调整 年 月 日  类似   
**12. 函数**  
    **12.1 语法**  
    function   函数名(参数列表)\{  
           // 满足什么样的条件 就返回什么样的值  注意 无论函数是否有返回值 都不写返回值类型   
           // 无论参数列表是什么类型 直接写参数名  
    \}    
**    12.2 练习 **  
    定义一个JS函数  设计两个整数参数   返回最大值   点击按钮在一个函数中调用这个函数   
  **  12.3 arguments  参数对象 **  
    可以获取参数的个数   
    获取参数的内容   
    **12.4 Function 类型  **  
    var  fun =  new  Function("参数","逻辑");  
    举例:  
    var  fun = new Function("x","y","if(x>y)\{return x;\} return y;");  
    alert(fun(21,101));  
    **12.5 匿名函数  **  
    一个函数 只有逻辑 没有函数名  
    如:  
    var   fun  = function  (x,y) \{  
            return   x >y?x:y;     
     \}      
    还会作为一个函数的参数   
    var   arr1 = \[1,5,3,2,6\];  
    arr1.sort(function(x,y)\{  
           if(x >y) \{  
                  return  x;  
           \}else\{  
                  return y;  
           \}             
    \});  
**   12.6 全局函数**  
   parseInt   parseFloat   
   isNaN   判断是不是 不是数字  如果是一个数字 返回false 不是一个数字返回true  
   eval      可以解析表达式    1+2\*3/5+（5-3）\*6  
   encodeURl(str)  对URI 进行编码   
   decodeURI(str)  对URI 进行解码      
           服务器上获取数据时 会按照一定的编码来进行解码   
           浏览器存储数据时 cookie 要求必须不能有中文 如果有就需要编码     
                    
                                                                                     **JQuery**

**1.JQuery  简介**  
   JQuery 是一个javascript  的框架 （软件的半成品）  
   目的:封装原来 dom 对象 以及 对 dom 对象的操作 这样可以兼容浏览器的差异   
         以及简化代码 。  
         write less   do  more     写的更少 做的更多   
   更好的操作 HTML  DOM    事件   动画  以及 程序 ajax(异步请求 局部刷新)交换   
**2.jquery框架的使用步骤 **  
   2.1  下载 jquery  的源代码文件   jquery.js   
   2.2   导入项目中   （复制到项目中）  
   2.3   在页面中(.html  .jsp)  引用 js文件  
   2.4   使用选择器 选择元素   
   2.5   使用相应的api 操作元素   
**3.DOM 对象 和  jquery对象相互转化 **  
   DOM对象只能用html  dom 的  api  
   jquery 对象只用 jquery 对象对应的 api  
   但是我们 可以通过 一定的手段 对这两种类型的对象 进行转换   
   DOM  对象 变成  jquery 对象   
   var   obj  =  document.getElementById("sp1");  
   var   $obj = $(obj);  
   Jquery 对象 转换成 DOM 对象  
   var   obj2 = $obj.get(0); 或者  var obj3 = $obj.get()\[0\];  
   注意: jquery 对象 一般是以 $ 开头  好区分是 jquery对象 还是 dom 对象   
**4.加载时机 **  
   获取页面上的元素 必须等到页面加载完成 否则页面元素还没有产生无法获取   
      可以使用原生js 的  onload 来解决    
      也可以使用 Jquery的解决方式:  
     $(function()\{  
         //alert(document.getElementById("sp1").innerHTML);  
         alert($("\#sp1").html());  
     \});   
     $(document).ready(function()\{  
         alert($("\#sp1").html());  
     \});  
**5.选择器 ---- 基本选择器 **  
    id选择器     代表选择id属性值对应的元素  用法是 $("\#id值")  
    类选择器     代表选择class属性值对应的元素 用法是 $(".class值")   
    元素选择器   以元素名 作为选择标准     元素名相同被选中 例如: $("h1")  
    选择器组      多个选择器的组合     
**5.1、层级选择器  **  
   后代选择器     "父元素  后代元素"  
   子元素选择器   "父元素 > 子元素"  
   第一个向后兄弟元素  "元素名+兄弟元素"  
   向后所有的兄弟元素  "元素名~兄弟元素"  
**5.2.筛选选择器**   
    :first  
    :last     
    :gt  
    :eq  
    :odd   编号是奇数的元素  
    :even  
    :not  
      
    根据内容来筛选   
    :contains(内容)   
    :empty()  
    根据显示来筛选  
    :hidden （这个作为重点） 选出隐藏的元素  
          display:none    type="hidden"    隐藏父元素   长度和宽度为 0   
    :visible  
** 5.3.表单选择器 **  
    :input   
    :text  
    :button  
    :file  
    :radio   
    :submit  
    ....  
** 5.4.属性--筛选选择器**  
    \[属性名\]   选择到带这个属性的元素  
    \[属性名='值'\] 选择到属性等于某个值的元素  
    \[属性名!='值'\]  选择到属性不等于某个值的元素  
** 5.5.表单属性选择器 **  
    直接选择器后 利用 :checked  :selected  :enabled  :disabled 来对元素进行筛选   
    对属性筛选选择器的简化    
    比如:  :radio:checked     select option:selected  
**  5.6.获取属性   设置属性  移除属性**  
     attr("属性名")   attr("属性名",属性值)  removeAttr("属性名")  
     
**   5.7.获取和设置value属性的方法**  
     val()  和 val("值")  
**   5.8.html()   html("值")    **  
      就是  之前的 innerHTML 对应的值

text()   text("值")  
             text() 获取的是翻译之后的 文本  
             text("值")  写什么值都会当做文本设置到页面上   
  ** 5.9.样式函数 **  
      css("样式的名字")   获取样式对应的值   
      css("样式的名字","样式的值")   设置对应的样式   一次设置一个   
      css(\{"样式的名字"："样式的值"，"样式的名字"："样式的值"\})  一次设置多个样式   
       
      addClass("class名")      增加一个class属性对应的值  
      removeClass("class名")  给一个class值 就把是对应元素的class属性去掉  
      toggleClass("class名")  切换    有就删  没有就加   
      
      width()     获取宽度  
      height()    获取高度  
      innerWidth() 获取宽度（包括内边距）  
      outerWidth() 获取宽度 (包括 内边距 和 边框 )  
      outerWidth(true) 获取宽度 (包括 内边距 和 边框  和 外边距)  
      ...

**   6.显示和隐藏函数 **  
        show()   显示  
        hide()     隐藏  
        toggle() 切换   
        show(speed)    规定的时间内进行上面的操作   
        hide(speed)  
        toggle(speed)

slideUp(speed)  向上收缩 然后消失   
        slideDown(speed)  向下展开    
        slideToggle(speed)  切换上面的两种状态

fadeIn(speed)  淡入  
       fadeOut(speed)  淡出    
        fadeToggle(speed)  切换上面的两种状态    
**  7.自定义动画  **  
       选择器.animate(\{"参数"\},\[时间\],\[动画回调函数\]);

**  8.绑定事件  **  
       选择器.bind("事件",事件处理函数)；    元素的事件 关联上对应的事件处理函数  
       选择器.unbind("事件")；      断开元素的事件 和 对应处理函数的关联   
       选择器.trigger("事件");     触发事件调用   
**9.新的事件绑定  和 事件处理 **  
   选择器.事件方法(事件处理函数(可以写事件参数));  
   通过事件参数 e  可以取得事件相关信息   
         比如  鼠标的点击位置  pageX  和  pageY    
         事件发生的元素对象  e.target  注意这里 是 DOM 对象 使用  JQuery 的api 需要转换成  
                jquery对象。  
   也可通过参数  来取消事件冒泡   参数.stopPropagation()  
   选择器.hover(鼠标移上去的函数处理,鼠标移走的函数处理)  
    
   动态绑定事件   
          通过 on 这个方法 可以给现有的 元素 和 未来的元素绑定事件处理。     
           // 父元素发起绑定  第一个参数是 绑定的事件  第二个是选择器  第三个事件处理函数   
         $("body").on("blur",":text",function()\{  
             alert('gg');  
         \});

**10.JQuery 的文档处理 **  
    如何创建元素   
    $("html")    这样就创建一个jquery对象  
    选择器.append("html")  
    选择器.prepend("html")  
    选择器.after("html")  
    选择器.remove()   删除选择到的元素  
    选择器.empty()     清空选择器对应的元素   
    选择器.clone()   不带事件的复制  要求不能直接写事件函数   
           要想复制事件 需要 加参数 clone(true)  
   其它的文档操作函数  参考文档  
          parent()   parents(selector)   find(selector)   not(selector)  
          eq(index)   children()   ...