JS一些知识笔记

忘是亡心i 2022-08-10 08:51 168阅读 0赞

常用JavaScript库jQuery、Prototype

JavaScript向浏览器发出命令，告诉浏览器要做什么，web浏览器会执行JS代码。

JS函数：JavaScript 语句通过代码块的形式进行组合，成为一个函数。

严格区分大小写，所以一定要注意这点。

注释的作用：阻止执行(注释掉)、方便调试，解释代码、提高代码的可读性。

document系列函数：

document.getElementById("demo")；// 从JavaScrpit访问HTML元素 document.write("<h1>hello verna</h1>");   // 该函数可以在页面上输出内容，可以是单纯的文本也可以是标签等复杂的HTML语句。 // 注意：该函数执行时会覆盖掉当前页面的所有内容 // 文本过长的话可以使用 反斜杠(\)来换行 document.write("<h1>hello verna \ I love you ,I want you,I need you </h1>");

## JavaScript 函数和事件 ##

<table> 
 <tbody> 
 <tr> 
 <td colspan="4" align="center">javascript事件列表解说</td> 
 </tr> 
 <tr> 
 <td colspan="2" align="center">事件</td> 
 <td align="center">浏览器支持</td> 
 <td align="center">解说</td> 
 </tr> 
 <tr> 
 <td>一般事件</td> 
 <td>onclick</td> 
 <td>IE3、N2</td> 
 <td>鼠标点击时触发此事件</td> 
 </tr> 
 <tr> 
 <td>ondblclick</td> 
 <td>IE4、N4</td> 
 <td>鼠标双击时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onmousedown</td> 
 <td>IE4、N4</td> 
 <td>按下鼠标时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onmouseup</td> 
 <td>IE4、N4</td> 
 <td>鼠标按下后松开鼠标时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onmouseover</td> 
 <td>IE3、N2</td> 
 <td>当鼠标移动到某对象范围的上方时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onmousemove</td> 
 <td>IE4、N4</td> 
 <td>鼠标移动时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onmouseout</td> 
 <td>IE4、N3</td> 
 <td>当鼠标离开某对象范围时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onkeypress</td> 
 <td>IE4、N4</td> 
 <td>当键盘上的某个键被按下并且释放时触发此事件.</td> 
 </tr> 
 <tr> 
 <td>onkeydown</td> 
 <td>IE4、N4</td> 
 <td>当键盘上某个按键被按下时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onkeyup</td> 
 <td>IE4、N4</td> 
 <td>当键盘上某个按键被按放开时触发此事件</td> 
 </tr> 
 <tr> 
 <td>页面相关事件</td> 
 <td>onabort</td> 
 <td>IE4、N3</td> 
 <td>图片在下载时被用户中断</td> 
 </tr> 
 <tr> 
 <td>onbeforeunload</td> 
 <td>IE4、N</td> 
 <td>当前页面的内容将要被改变时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onerror</td> 
 <td>IE4、N3</td> 
 <td>出现错误时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onload</td> 
 <td>IE3、N2</td> 
 <td>页面内容完成时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onmove</td> 
 <td>IE、N4</td> 
 <td>浏览器的窗口被移动时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onresize</td> 
 <td>IE4、N4</td> 
 <td>当浏览器的窗口大小被改变时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onscroll</td> 
 <td>IE4、N</td> 
 <td>浏览器的滚动条位置发生变化时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onstop</td> 
 <td>IE5、N</td> 
 <td>浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断</td> 
 </tr> 
 <tr> 
 <td>onunload</td> 
 <td>IE3、N2</td> 
 <td>当前页面将被改变时触发此事件</td> 
 </tr> 
 <tr> 
 <td>表单相关事件</td> 
 <td>onblur</td> 
 <td>IE3、N2</td> 
 <td>当前元素失去焦点时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onchange</td> 
 <td>IE3、N2</td> 
 <td>当前元素失去焦点并且元素的内容发生改变而触发此事件</td> 
 </tr> 
 <tr> 
 <td>onfocus</td> 
 <td>IE3 、N2</td> 
 <td>当某个元素获得焦点时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onreset</td> 
 <td>IE4 、N3</td> 
 <td>当表单中RESET的属性被激发时触发此事件</td> 
 </tr> 
 <tr> 
 <td>onsubmit</td> 
 <td>IE3 、N2</td> 
 <td>一个表单被递交时触发此事件</td> 
 </tr> 
 <tr> 
 <td>滚动字幕事件</td> 
 <td align="left">onbounce</td> 
 <td>IE4、N</td> 
 <td>在Marquee内的内容移动至Marquee显示范围之外时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onfinish</td> 
 <td>IE4、N</td> 
 <td>当Marquee元素完成需要显示的内容后触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onstart</td> 
 <td>IE4、 N</td> 
 <td>当Marquee元素开始显示内容时触发此事件</td> 
 </tr> 
 <tr> 
 <td>编辑事件</td> 
 <td align="left">onbeforecopy</td> 
 <td>IE5、N</td> 
 <td>当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onbeforecut</td> 
 <td>IE5、 N</td> 
 <td>当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onbeforeeditfocus</td> 
 <td>IE5、N</td> 
 <td>当前元素将要进入编辑状态</td> 
 </tr> 
 <tr> 
 <td align="left">onbeforepaste</td> 
 <td>IE5、 N</td> 
 <td>内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onbeforeupdate</td> 
 <td>IE5、 N</td> 
 <td>当浏览者粘贴系统剪贴板中的内容时通知目标对象</td> 
 </tr> 
 <tr> 
 <td align="left">oncontextmenu</td> 
 <td>IE5、N</td> 
 <td>当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件</td> 
 </tr> 
 <tr> 
 <td align="left">oncopy</td> 
 <td>IE5、N</td> 
 <td>当页面当前的被选择内容被复制后触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">oncut</td> 
 <td>IE5、N</td> 
 <td>当页面当前的被选择内容被剪切时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">ondrag</td> 
 <td>IE5、N</td> 
 <td>当某个对象被拖动时触发此事件 [活动事件]</td> 
 </tr> 
 <tr> 
 <td align="left">ondragdrop</td> 
 <td>IE、N4</td> 
 <td>一个外部对象被鼠标拖进当前窗口或者帧</td> 
 </tr> 
 <tr> 
 <td align="left">ondragend</td> 
 <td>IE5、N</td> 
 <td>当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了</td> 
 </tr> 
 <tr> 
 <td align="left">ondragenter</td> 
 <td>IE5、N</td> 
 <td>当对象被鼠标拖动的对象进入其容器范围内时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">ondragleave</td> 
 <td>IE5、N</td> 
 <td>当对象被鼠标拖动的对象离开其容器范围内时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">ondragover</td> 
 <td>IE5、N</td> 
 <td>当某被拖动的对象在另一对象容器范围内拖动时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">ondragstart</td> 
 <td>IE4、N</td> 
 <td>当某对象将被拖动时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">ondrop</td> 
 <td>IE5、N</td> 
 <td>在一个拖动过程中，释放鼠标键时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onlosecapture</td> 
 <td>IE5、N</td> 
 <td>当元素失去鼠标移动所形成的选择焦点时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onpaste</td> 
 <td>IE5、N</td> 
 <td>当内容被粘贴时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onselect</td> 
 <td>IE4、N</td> 
 <td>当文本内容被选择时的事件</td> 
 </tr> 
 <tr> 
 <td align="left">onselectstart</td> 
 <td>IE4、N</td> 
 <td>当文本内容选择将开始发生时触发的事件</td> 
 </tr> 
 <tr> 
 <td>数据绑定</td> 
 <td align="left">onafterupdate</td> 
 <td>IE4、N</td> 
 <td>当数据完成由数据源到对象的传送时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">oncellchange</td> 
 <td>IE5、N</td> 
 <td>当数据来源发生变化时</td> 
 </tr> 
 <tr> 
 <td align="left">ondataavailable</td> 
 <td>IE4、N</td> 
 <td>当数据接收完成时触发事件</td> 
 </tr> 
 <tr> 
 <td align="left">ondatasetchanged</td> 
 <td>IE4、N</td> 
 <td>数据在数据源发生变化时触发的事件</td> 
 </tr> 
 <tr> 
 <td>ondatasetcomplete</td> 
 <td>IE4、N</td> 
 <td>当来子数据源的全部有效数据读取完毕时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onerrorupdate</td> 
 <td>IE4、N</td> 
 <td>当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件</td> 
 </tr> 
 <tr> 
 <td align="left">onrowenter</td> 
 <td>IE5、N</td> 
 <td>当前数据源的数据发生变化并且有新的有效数据时触发的事件</td> 
 </tr> 
 <tr> 
 <td align="left">onrowexit</td> 
 <td>IE5、N</td> 
 <td>当前数据源的数据将要发生变化时触发的事件</td> 
 </tr> 
 <tr> 
 <td align="left">onrowsdelete</td> 
 <td>IE5、N</td> 
 <td>当前数据记录将被删除时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onrowsinserted</td> 
 <td>IE5、N</td> 
 <td>当前数据源将要插入新数据记录时触发此事件</td> 
 </tr> 
 <tr> 
 <td>外部事件</td> 
 <td align="left">onafterprint</td> 
 <td>IE5、N</td> 
 <td>当文档被打印后触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onbeforeprint</td> 
 <td>IE5、N</td> 
 <td>当文档即将打印时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onfilterchange</td> 
 <td>IE4、N</td> 
 <td>当某个对象的滤镜效果发生变化时触发的事件</td> 
 </tr> 
 <tr> 
 <td align="left">onhelp</td> 
 <td>IE4、N</td> 
 <td>当浏览者按下F1或者浏览器的帮助选择时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onpropertychange</td> 
 <td>IE5、N</td> 
 <td>当对象的属性之一发生变化时触发此事件</td> 
 </tr> 
 <tr> 
 <td align="left">onreadystatechange</td> 
 <td>IE4、N</td> 
 <td>当对象的初始化属性值发生变化时触发此事件</td> 
 </tr> 
 </tbody> 
</table>

改变HTML的内容：

获得对象的方法： 1、通过id；// document.getElementById("id"); 2、通过元素标签名；// getElementByTagName("p"); 3、通过CSS样式。 如果找到了则返回对象，没找到返回null。如果要访问一个元素中的其他元素（子元素），可以先获得该元素对象， 然后通过该对象调用对象获取方法获得子元素。 $("#id").innerHTML='123';// 先要获取对象
    
    改变元素的属性：
    document.getElementById("id").attribute=new value;// attribute替换成相应的属性名即可
    改变元素的样式：
     document.getElementById("id").style.color="blue";// 不能少了style关键字
    还可以写在事件里面
     οnclick="document.getElementById('id1').style.color='red'"；

变量范围

局部变量：函数内声明的变量，只能在该函数内使用，不同的函数内可以声明相同的变量。函数执行完后该变量即被删除。

全局变量：函数外声明的变量，网页上和所有的脚本都能访问。页面被关闭后该变量将被删除。

HTML DOM HTML文档对象模型

当页面被加载的时候，浏览器会创建文档对象模型，JS就可以通过对象创建动态的HTML元素。

JavaScript可以创建所有的HTML元素、修改所有的CSS样式和HTML属性，对页面所有的事件做出响应

实践例子：

读取选中的input标签的个数

var size=$("input[name='erp_orders_ids[]']:checked").size();