JavaScript
jerry
2020-11-04
JavaScript 1.JavaScript快速入门 JavaScript语言主要主要完成页面的数据验证。运行在客户端，浏览器解析执行 JavaScript， JS是Netscape网景公司的产品， 最早取名叫LiveScript 特点 交互性 可以做信息的动态交互 安全性 不允许直接访问本地硬盘 跨平台性 可以解析JS的浏览器都可以执行， 和平台无关 2.JS与HTML的结合 第一种方式 第二种方式 只需要在head标签中, 或者在body标签中, 用script标签来书写JavaScript 使用script标签引入单独的JavaScript代码文件 <script type="text/javascript" src="jstest.js"></script> 注意 一个script标签可以定义js代码, 也可以用来引入js文件, 但两个功能只能二选一 两种方式 3.变量 JavaScript变量类型 数值类型 number 字符串类型 string 对象类型 object 布尔类型 boolean 函数类型 function 特殊值 undefined 未定义, js中未赋值的变量默认值都是undefined null 空值 NAN Not a Number, 非数字 关系(比较)运算 == 等于, 简单的字面值的比较 === 全等于, 除了字面值还要做变量类型的比较 逻辑运算 && 且运算 || 或运算 ! 取反运算 注意 在js中, 所有的变量都可作为boolean类型使用 0, null, undefined, ""(空串)都默认为false 运算符 表达式全为真时, 返回最后一个表达式的值 表达式中, 有一个为假的时候, 返回第一个为假的表达式的值 表达式全是假时, 返回最后一个表达式值 有一个表达式为真, 返回第一个为真的表达式的值 4.数组 数组的定义 var 数组名 = [] var 数组名 = [1, 'abc', true] 数组的遍历 例 5.函数 两种定义方式 1.使用function关键字 function 函数名(形参列表){ 函数体 } 例 创建带参数和返回值的函数 var 函数名 = function{形参列表} {函数体} JS不允许函数重载 函数重载会直接覆盖上一个的定义 隐形参数 在function函数中不需要定义, 可以用来获取所有参数的变量(类似java的可变形 参...args) arguments[] 可做数组操作 什么是隐形参数 例 6.自定义对象 Object形式自定义对象 {}花括号形式的自定义对象 var 变量名 = new Object() 对象实例(空对象) 变量名.属性名 = 值 定义一个属性 变量名.函数名 = function(){} 定义一个函数 对象的定义 对象的访问 变量名.属性名 / 函数名() 例 对象的定义 var 变量名 = { 属性名: 值, 函数名: function(){} } 空对象 例 7.JS中的事件 什么是事件 事件是电脑输入设备与页面进行交互的响应 常用的事件 onload加载完成事件 页面加载完成之后, 常用于做页面js代码初始化的事件 onclick单击事件 常用于按钮的点击相应操作 onblur失去焦点事件 用于输入框失去焦点后验证其输入内容是否合法 onchange内容发生改变事件 用于下拉列表和输入框内容发生改变后操作 onsubmit表单提交事件 用于表单提交前, 验证所有表单项是否合法 事件的注册 静态注册 动态注册 什么是事件的注册(绑定) 告诉浏览器, 当事件响应后要执行哪些操作代码, 叫事件注册或绑定 通过html标签的事件属性直接赋予事件相应后的代码, 叫静态注册 通过js代码得到标签的dom对象, 然后通过dom对象.事件名 = function(){}这种形 式赋予事件相应后的代码, 叫动态注册 步骤 1.获取标签对象 2.标签事件.事件名 = function(){} 静态写法 例 动态写法 例 例 例 例 9.DOM模型 Document Object Model 文档对象模型, 把文档中的标签,属性,文本转换为对象来 管理 Document对象 理解 1.管理了所有的HTML文档内容 2.document是一种树结构的文档, 有层级关系 3.它让我们把所有的标签都对象化 4.可以通过document访问所有的标签对象 Document对象中的方法 document.getElementById(elementId) document.getElementsByName(elementName) document.getElementsByTagName(tagName) document.createElement(tagName) 通过标签id属性查找dom对象, 返回指定id的第一个对象的引用 通过标签name属性查找标签dom对象, 返回指定name的所有对象的集合 通过标签名查找dom对象 通过给定的标签名创建一个标签对象 8.正则表达式 两种写法 var patt=new RegExp(pattern,modifiers); var patt=/pattern/modifiers; pattern: 正则表达式, modefiers: 修饰符 表达式(菜鸟教程) 例 /^\w{5,12}$/ 表示从头到尾包含5~12个字母, 数字或下划线 两种常见的验证提示效果 1.文字提示 2.图标提示 注意 document对象的三个查询方法, 优先使用getElementById方法来进行查询, 没有id 属性, 则优先使用getElementsByName方法来进行查询, 如果id属性和name属性 都没有最后再按标签名查询 js代码是从上往下执行的, id属性在页面(body)加载完才能被查询到, 所以查询方法 写在function外没有用 节点 简答来说节点就是标签对象, 节点的属性和方法 指标签对象有哪些方法可用 属性 childNodes 获取当前节点的所有子节点 firstChild 获取当前节点的第一个子节点 lastChild 获取当前节点的最后一个子节点 parentNode 获取当前节点的父节点 nextSibling 获取当前节点的下一个节点 perviouSibling 获取当前节点的上一个节点 className 用于获取或设置标签的class属性值 innerHTML 表示获取/设置起始标签和结束标签中的内容 innerText 表示获取/设置起始标签和结束标签中的文本(不包括标签等内容) 方法 getElementsByTagName() 获取当前节点的指定标签名的子节点 appendChild(oChildNode) 添加一个子节点oChildNode 10.JQuery 什么是JQuery JavaScript和查询(Query), 就是辅助JavaScript开发和js类库 核心思想 JQuery是最流行事务JavaScript库, 免费, 开源, JQuery的语法设计使开发更加便捷 介绍 写得更少, 做得更多, 实现了很多浏览器的兼容问题 JQuery核心函数 优点 $ 是jQuery的核心函数, 能完成jQuery的很多功能, $() 就是调用这个函数 1. 传入参数是 [函数] 页面加载完成后,自动调用, 相当于window.onload = function(){} 2. 传入参数是 [HTML字符串] 根据这个字符串创建元素节点对象 四个功能 3.[选择器字符串] 根据这个字符串查找元素节点对象 4.[DOM]对象 语法 $("#id属性值"); id选择器, 根据id查询标签对象 $("标签名"); 标签名选择器 $(".class属性值"); 类型选择器 把dom对象转为jQuery对象, 将DOM对象包装为jQuery对象返回 区分jQuery对象和dom对象 dom对象 通过document的方法查询或创建的对象的Dom对象 jQuery对象 通过jQuery提供的API创建, 查询的对象是jQuery对象 通过jQuery包装的Dom对象也是jQuery对象 Jquery对象的本质 是Dom对象的数组 使用区别 document.getElementById("testDiv").innerHTML = "这个dom对象的属性 InnerHTML" $("#testDiv").innerHTML = "这时dom对象的属性" Dom对象不能使用jQuery对象的属性和方法, jQuery对象也不能使用Dom对象的属性和方法 Dom对象和jQuery对象的互转 dom转jQuery jQuery转dom var $obj = $(dom对象) var dom = $obj[下标] jQuery选择器 基本选择器 #id 根据给定的id进行查询 element 根据给定的元素(标签名)匹配所有元素 .class 根据匹配的类匹配元素 selector1, selector2, selectorN 组合选择器, 将每个选择器匹配到的结果合并在一起返回 注意: 返回结果的顺序是标签在页面中从上到下的顺序 层级选择器 在给定的父元素下匹配所有子元素 ancestor descendant parent > child prev + next prev ~ silbings 在给定的祖先元素下匹配所有子孙元素 匹配所有紧接在prev元素后(prev标签内)的next元素 匹配prev元素之后的所有siblings元素(prev的同级元素) 过滤选择器 基本过滤选择器 内容过滤器 :first 获取第一个元素 例 : $(li : first) :last() 获取标签内的最后一个元素 :not(selector) 去除掉所有与给定选择器匹配的元素 :even 匹配所有索引值为偶数的元素, 从0开始 例 : 查询表格的1, 3, 5...行(即索引值0, 2, 4..., 中间的空格也是一个元素) :odd 匹配所有索引值为奇数的元素, 从0开始计数 :eq(index) 匹配一个给定索引值的元素 :gt(index) 匹配所有大于给定索引值的元素 :lt(index) 匹配所有小于给定索引值的元素 :header 匹配如h1, h2, h3之类的标题元素 :animated 匹配正在执行动画的元素 :contains(text) 匹配包含给定文本text的元素 :empty 匹配所有不包含子元素或者文本元素 :parent 匹配包含有子元素或者文本的元素 :has(selector) 匹配含有选择器所匹配元素的元素 表单过滤器 :input :text 匹配所有单行文本框(type是text类型) :password 匹配所有密码框 ...... 以此类推 匹配所有input标签内容 表单对象属性 :enabled 匹配所有可用元素 :disabled 匹配所有不可用元素 :checked 匹配所有被选中的元素(复选框, 单选框, 不包括select中的option) 一些方法 jQuery选择语句. val("") val()可以设置和获取表单项的value属性值 each() 用来遍历元素的方法 例 元素的筛选 eql(index) 获取第index个元素 first() 获取第一个元素 获取最后一个元素 last() is(exp) ...... jQuery的属性操作 html([val|fn]) text([val|fn]) val([val|fn|arr]) 可以 设置和获取起始标签和结束标签中的内容 .跟dom属性innerHTML一样 可以 设置和获取起始标签和结束标签中的文 本, 跟dom属性innerText一样 可以设置和获取 表单项 的value属性值, 跟dom属性value一样 设置和获取属性的值 jQuery安装 方式一 从 jquery.com 下载 jQuery 库 引用 方式二 通过 CDN（内容分发网络） 引用 例 attr() prop() 例 :checkbox 不推荐操作 checked, readOnly, selected, disabled等等, 会返回"undefined" 只推荐操作checked, readOnly, selected, disabled等等, , prop返回false, 与 attr()互补 使用与attr()一样 可以操作自定义属性 子主题 例 练习 全不选|全选|反选 DOM的增删改 内部插入 外部插入 替换 appendTo() prependTo() insertAfter() insertBefore() replaceWith() replaceAll() 删除 a.appendTo(b) 把a插入到b元素的末尾, 成为最后一个子元素 a.prependTo(b) 把a插入到b所有元素前面, 成为第一个子元素 例 a.replacewith(b) 得到ba a.insertBefore(b) 得到ab a.replaceWith(b) 用b替换a a.replaceAll(b) 用a替换掉所有的b remove() a.remove() 删除a标签 empty() a.empty() 清空a标签里的内容 CSS样式操作 jQuery动画 方法 addClass() 添加样式 removeClass() 删除样式 toggleClass() 有就删除, 没有就添加样式 offset() 获取和设置元素的坐标 使用 例 基本动画 淡入淡出动画 show() hide() toggle() fadeln() 将隐藏的元素显示 将可见的元素隐藏 切换（可见的隐藏，不可见的显示） 方法 以上方法可以添加时长 第一个参数是动画 执行的时长，以毫秒为单位 第二个参数是动画的回调函数（动画完成后自动调用的函数） 淡入 fadeOut() 淡出 fadeTo() 指定时长内将透明度改到指定值 fadeToggle() 淡化切换 例 例 原生js与jQuery页面加载后区别 触发顺序 jQuery是在浏览器解析完标签和创建DOM对象后马上执行 原生js在内容加载完成，标签显示后才执行 执行次数 原生js页面加载完成后只会执行一次的赋值函数 jQuery页面加载完之后是把全部注册的function函数， 依次顺序全部执行 jQuery常用的事件处理方法 click() 绑定或触发单击事件 mouseover() mouseout() bind() one() unbind() 鼠标移入事件 鼠标移出事件 给元素绑定一个或多个事件 例 使用跟bind()一样， 但one()只会相应一次 与bind()方法相反, 解除事件绑定 事件的冒泡 指父子元素同时监听(绑定)一个事件, 子元素触发, 父元素也会相应同一事件 阻止事件冒泡 在子元素里return false; js事件对象 事件对象, 是封装有触发事件信息的一个javaScript对象 获取事件对象 元素绑定事件时, function(event), event就是传递的事件对象 获取event事件对象 event包含很多信息, 包括点击时按着ctrl等等 例 获取当前操作是什么事件(even.type) 获取坐标event.pageX 算术运算