jQuery总结

Posted 2021-04-08 陌淮缘

2.JQuery

       2.1javascript基础

              作用：客户端表单验证、页面动态效果、减轻服务器负担

              JavaScript是一种描述性语言，是一种基于对象和事件驱动的、并具有安全性能的脚本语言

                             是一种弱类型脚本语言

              JavaScript基本结构：

                            <scripttype=”text/Javascript”>

                                   <!—

`                                         JavaScript语句

                                   -->

              JavaScript引用方式：

①   使用<script>标签

②   使用外部JavaScript文件

③    直接在html标签中

2.1.1JavaScript核心语法

       2.1.1.1JavaScript声明变量和赋值

               var 变量名 = value;

       2.1.1.2数据类型

               undefined(未定义类型)  null(空类型)  number(数值类型)

               String(字符串类型)     boolean(布尔类型)

       2.1.1.3运算符

                     算术运算符：+、-、*、/、%、++、--

                     比较运算符：>、<、>=、<=、==、!=

                     逻辑运算符：&&、||、!

                     赋值运算符：=

       2.1.1.4逻辑控制语句

              条件结构

                            If(){        }else{     }

              循环结构

                            for(初始化；条件；增量或减量){  }

                            while(){    }

                            do{   }while(条件)

       2.1.1.5注释

                     单行注释//多行注释/* */

       2.1.1.6输入/输出

                     警告 alert(  )

                 提示 prompt(“提示信息”,”输入框的默认信息”)

              2.1.2函数

                     parseInt()   parseFloat()   isNaN()用于检查其参数是否是非数字，是返回true 不是返回false

                     自定义函数：function 函数名(参数，参数，参数){    }

调用函数：事件名=“函数名（）”;

匿名函数：function ( ){    }

       2.2JavaScript对象

              2.2.1window对象

                     BOM浏览器对象模型是JavaScript的组成之一

                     window对象是BOM的核心

                     BOM实现功能：

①    弹出新的浏览器窗口

②    移动、关闭浏览器窗口及调整窗口的大小

③    在浏览器窗口中实现页面的前进、后退功能        

                     常用属性：history、location

                     常用方法：prompt()、alert()、confirm()提示框、close()、open()、setTimeout()、setInterval()

                     常用事件：onload、onmouseover、onclick、onkeydown、onchange

                     History对象：back()前一个URL、forward()后一个URL、go()

                     Location对象：raload()重新加载文档、replace()用新的文档替换当前文档

                                            属性：host 设置或返回当前URL端口号

                                                        hostname设置或返回当前URL的主机名

                                                        href设置或返回完整的URL

                     document对象：referrer 返回载入当前文档的URL

                                                 URL返回当前文档的URL

                                   常用方法：getElementById()byName byTagNamewrite()写文本

                     InnerText:获取文本内容

              2.2.2JavaScript内置对象

                     Date：getDate()返回一个月的每一天 1-31

                              getDay()一个星期的每一天 0-6 星期天-星期六

                              getHour() getMinutes() getSeconds() getMonth()

                              getFullYear() getTime()返回自某一时刻(1970.1.1)以来的毫秒数

                      Math:ceil()上舍入 floor()下舍入 round()四舍五入 random()返回0-1的随机数

              2.2.3定时函数

                     一次性setTimeout(“调用函数名”,毫秒数)

                     周期性setInterval(,)     

                     清除 clearTimeout() clearInterval()

2.3初识JQuery

       JQuery是JavaScript的程序库之一

       好处：语法简单、减少代码量、不存在浏览器兼容问题、轻量级、丰富的插件支持

       语法：$(selector).action{}; selector选择器（ID、标签、类）

                     Action处理方法(click()、mouseover()、mouseout()…..)

       添加类样式：JQuery对象.addClass(样式名) removeClass移除 toggleClass

       进行css操作:css(“属性”,”属性值”)

 2.4JQuery选择器

       2.4.1基本选择器

              标签选择器、类选择器、ID选择器、并集选择器${a,b,c}、交集选择器$(ab)、全局选择器*

       2.4.2层次选择器

              后代选择器$(a  b)、子选择器$(a>b)、相邻选择器$(a+b)、同辈元素选择器$(a~b)

       2.4.3属性选择器

       $([a])、$([a=b])、$([a!=b])、$([a^=b])以..开头、$([a$=b])以…结尾、$([a*=b])包含某些值的元素

       2.4.4基本过滤选择器

       :first、:last、:not()、:even偶数、:odd奇数、:eq()、:gt()大于、:lt()小于、:header获取标题元素、:focus

       2.4.5可见性过滤选择器

       :hidden、:visible

2.5JQuery中的事件与动画

       鼠标事件：click()、mouseover()、mouseout()

       键盘事件：keydown()按下键盘时、keyup()释放按键时、keypress()产生可打印的字符时

       表单事件：focus()获得焦点、blur()失去焦点

       绑定事件：bind(事件,处理函数) 移除绑定：unbind

       复合事件：hover(enter,leave)方法：用于模拟鼠标悬停事件

                       toggle(fn1,fn2,fn3…)方法：用于模拟鼠标连续click事件

       控制元素的显示和隐藏：

                     Show()显示 hide( )隐藏 fadeIn()淡入 fadeout()淡出 slideUp()从下向上隐藏 slideDown()从上向下显示

2.6使用JQuery操作DOM

       2.6.1DOM分类：DOM Core、HTML-DOM、CSS-DOM     

       2.6.2样式操作：css({name:value,name:value,name:value})

2.6.3追加样式、移除样式: 追加addClass()、移除removeClass()、替换toggleClass()

2.6.4内容操作：

       Html代码操作：html(内容) 例：html(“<h1>aaa</h1>”); 获取或设置html内容或文本内容

       标签内容操作：text(内容) 获取或设置文本内容

       属性值操作：val() 获取或设置value值

2.6.5节点与属性操作:

       内部插入：$(a).append(b)将b追加到a中 $(a).appendTo(b)将a追加到b中

                     前置内容 $(a).prepend(b)将b追加到a中 $(a). prependTo(b)将a追加到b中

       外部插入：$(a).after(b)将b追加到a中 $(a). after(b)将a追加到b中

                     前置内容 $(a).before(b)将b追加到a中 $(a). before(b)将a追加到b中

       删除节点：remove()  替换节点：replaceWith()  a-b、replaceAll() b-a

       复制节点：clone() 

2.6.6属性操作

       获取或设置元素属性 attr({[name:value], [name:value]，[name:value]}) 

       删除元素属性 removeAttr()

       遍历元素 children()遍历子元素  next()获取相邻元素 prev()获取紧邻匹配元素前的元素

                      Siblings()获取匹配元素全面和后面的所有同辈元素

                      parent()获取父元素     parents()获取祖先元素

2.6.7CSS-DOM操作

       css() height() width() offset()返回以像素为单位的top和left坐标

       offsetParent()返回最近的已定位祖先元素 scrollLeft()设置或返回匹配元素相对滚动条左侧的偏移

       scrollTop()设置或返回匹配元素相对滚动条顶部的偏移

2.7表单校验

       2.7.1常用方法和事件

              事件：onblur失去焦点、onfocus获得焦点

              方法：blur()、focus()、select()选取文本域中的内容

      2.7.1正则表达式

              语法：var a = /表达式/附加参数

              附加参数:g(全局参数)i(不区分大小写)m(可以进行多行匹配)

              RegExp对象：exec()检索字符中是正则表达式的匹配，返回找到的值，并确定其位置

                                   test()检索字符串中指定的值

              String对象：match()找到一个或多个正则表达式       search()  replace()

                                   split()吧字符串分割为字符串数组

              正则表达式常用符号：

                     /…./一个模式的开始和结束  ^开始 $结束 \s空白字符 \S非空白字符

                     \d匹配一个数字字符 \D 匹配一个非数字字符 \w 匹配一个数字、下划线或字母字符

                     \W任何非单字字符   .除了换行符之外的任意字符

              正则表达式的重复字符:

                     {n}匹配前一项n次 {n,}匹配前一项那次，或者多次 {n,m}匹配前一项至少n次，但是不超过m次

                     *匹配前一项1次或多次 +匹配前一项1次或多次 ？匹配前一项0次或1次

              表单选择器：

                     :input:test :password :radio :checkbox :submit :image :reset :button :file :hidden

              表单属性过滤器：

                     :enabled:disabled :checked :selected