js和jQuery

Posted 鸿源志兴

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js和jQuery相关的知识,希望对你有一定的参考价值。

1.NAN:not a number,Number.NaN 是一个特殊值,说明某些算术运算(如求负数的平方根)的结果不是数字。方法 parseInt() 和 parseFloat() 在不能解析指定的字符串时就返回这个值。对于一些常规情况下返回有效数字的函数,也可以采用这种方法,用 Number.NaN 说明它的错误情况。

javascript 以 NaN 的形式输出 Number.NaN。请注意,NaN 与其他数值进行比较的结果总是不相等的,包括它自身在内。因此,不能与 Number.NaN 比较来检测一个值是不是数字,而只能调用 isNaN() 来比较。

如:var month=30   if(month<1||month>12){month=Number.NAN}    

那么alert(month==NAN),alert(month="NAN")都为false,因为NAN和谁都不相等,因此不能通过NAN来判断某个变量是否是数字,想要校验某个变量是否是数字,可以用isNAN(variable)来判断,true为数字,false为非数字。  var a=parseInt(month)当month为非数字时,则a也是NAN.

2.<script>标签可以写在任意位置,包括普通标签后面,在script标签里,可以通过document,write()方法往页面中写入内容。如:

<div><script>document,write("你好")</script></div>等价于<div>你好</div>

这种方法常常用于动态的写入页面内容时,在不确定元素的位置通过js来使内容动态变化。jsp编译成java时,常常使用这种方法。

3.js方法里return,return true和return false的区别:

首先,在循环遍历中,用js方法遍历时,想中断遍历用break和continue就行,和java中一样。在jQuery遍历中,$.each(arr,function(){})中,想要中断遍历,需要用return false和return true来操作。return false相当于break;  return true相当于continue。

阻止默认的事件行为:用return false.如:表单的提交事件onsubmit=" return submit()"的submit()方法中,如果返回return false,则表单不再提交。再如<a>标签中,onclick事件对应的函数返回false,则<a>不再执行href中的链接。值得注意的是,阻止默认的事件行为时,事件的方法前面必须加上return ,否则不能阻止默认事件。如:<a href="xxx" onclick="return demo()">才有效。

阻止默认的事件行为有一个方法是preventDefault()方法,该方法就是阻止默认的事件行为。需要注意的是,preventDefault()方法需要有参数e,如:$(‘a‘).click(function(e){e.preventDefault()})必须有参数e才能有效,写this.preventDefault()也无效。

 4.声明式函数:function demo(){}  匿名式函数: var demo1=function(){}   在<script>里写demo()和demo1()来调用函数

在<script>里直接写js代码,这些js代码在页面解析时就执行了。所以当写document.getElementById()时,必须写在id的下方。如果是写在函数里面就无所谓了,当调用该函数时才会被执行。在页面加载事件中写js代码是在页面解析完成后执行的,所以在<script>里写的代码是优先于页面加载事件执行的。

5.window.onload=function(){}形式的页面加载事件,只能出现一次,出现多次的话,后面的会覆盖前面的,$(function(){})形式的页面加载事件可以出现多次,不会出现覆盖的情况。

6.事件绑定的3种写法:

  1.在标签中写:<input type="text" onclick="demo()" >

  2.用js绑定:  var e=document.getElementById();  e.onclick=function(){};  e.onmouseup=function(){}

  3.用jQuery绑定:$(选择器).click(function(){});去掉on.

7.stopPropagation()方法:阻止事件传播------event.stopPropagation();

举例:<div id="e1"  onclick="e1()">

       <div id="e2" onclick="e2()"></div>

        </div>

点击e2区域的时候,e2也在e1内,则默认会触发两个点击事件。如果只想触发e2的点击事件,不触发e1的点击事件,需要在function e2(event){}中添加阻止事件传播的方法event.stopPropagation()方法,

就只执行e2,不执行e1点击事件了。注意这个方法是写在e2方法中,去阻止其他事件的发生,保证只执行e2方法。

其中event代表的含义是这个事件。

8.定时器:js提供了两种定时器,一种是定时周期循环执行某个任务,一个是定时只执行一次某个任务。

setInterval(function,time):每隔time(ms)执行function函数,循环执行。从调用setInterval()方法起开始计时。

setTimeout(function,time):从调用该函数起,间隔time(ms)后执行一次function函数。

上面两个函数都有返回值,返回值是一个定时器的id。想要消除定时器,消除定时任务,采用clearInterval(timeId)和clearTimeout(timeId)即可。其中timeId为setInterval()和setTimeout()的返回值

根据需求适时使用js提供的定时器。

9.preventDefault()方法和stopPropagation()方法都是通过事件对象event调用的,用e.onclick=function(event){}绑定事件时,写在参数里面就是事件对象。如果在元素标签里写onclick=demo()的话,event就不能用参数了,而是在方法里通过window.event来获得event对象。

10.在js中this的用法:

通过e.onclick=function(){}绑定的事件,this就是触发事件的元素对象。通过元素标签里写onclick="demo()"绑定的事件,this代表的是window对象,如果想得到触发事件的元素,可以在函数声明时加参数obj,在调用时onclick="demo(this)"即可。

如:function demo(obj){}里通过操作obj就可以操作触发元素,但是需要在onclick="demo(this)"

通过$(选择器).click(function(){})绑定的事件,this代表的是触发事件的对象。

 

11.encodeURI()和decodeURI()的用法:

请求路径url中带中文时,防止出现错误,通过encodeURI()把中文转成英文编码,我们看到的类型http://www.baidu.com?name=%E5%BC%A0%E4%B8%89&password=123这样的请求就是通过encodeURI(url)方法处理过的。通过decodeURI(url)来对英文编码解码成中文。

12.jQuery中addClass()和removeClass()的使用:

动态的给元素标签添加class样式,然后通过.class{}的css样式来规定元素的样式,和prop()和attr()有异曲同工之处,一个是动态添加属性,一个是动态添加class样式。

13.jQuery中append(),appendTo(),prepend(),prependTo(),afer(),before()方法详解:

A.append(B)是把B元素追加到A元素内部的最后,等价于B.appendTo(A);

A.prepend(B)是把B元素追加到A元素内部的最前面,等价于B.prependTo(A);

A.after(B)是把B元素追加到A元素后面,是兄弟元素。

A.before(B)是把B元素追加到A元素前面,兄弟元素

14.children(),prev(),nextAll(),parent(),sibilings(),find()等查找方法的详解:

children():获得子元素,不包括孙子元素。可以有参数,参数相当于元素选择器,只得到指定元素的子元素

prev():获得上一个兄弟元素

nextAll():获得元素的下面的所有兄弟元素,参数也可以是元素选择器。

next():获得元素的下一个兄弟元素,不能有参数,只能获得下一个兄弟元素。

siblings():获得元素的所有兄弟元素

find():参数为元素选择器,获得该元素子元素和孙子元素中所有指定的元素。只能获得子元素和孙子元素中的指定元素,不获得兄弟元素。

其中,操作子元素(孙子元素)的方法有:find(),children().操作兄弟元素的方法有:next(),nextAll(),siblings(),prev()

易错点:这些查找元素的方法,大多数返回值都是数组类型,即使只得到一个元素,也是数组类型的,需要写[0]才能得到单个元素。当得到单个元素后,在该元素的基础上再继续查找别的元素,一定要把该元素转化成jQuery对象,因为这些方法都是jQuery对象的方法,当通过[0]操作时,已经转化成了js对象,需要转化成jQuery对象才能继续使用这些方法。

当链式调用这些方法时,不需要每个方法都[0]处理,只要最后一个方法[0]处理即可,如$(obj).prev().prev().prev()[0]即可。

 

以上是关于js和jQuery的主要内容,如果未能解决你的问题,请参考以下文章

jQueryJS和jQuery Easyui三种不同获取值的方法

JQueryjs判断复选框是否选中状态

JQueryjs判断复选框是否选中状态

jqueryjs判断复选框是否选中

jqueryjs调用iframe父窗口与子窗口元素的方法整理

jqueryjs调用iframe父窗口与子窗口元素的方法整理