jQuery易混淆概念的区别

jQuery中String字符串的截取

1.使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。

var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")    0

document.write(str.indexOf("World") + "<br />")    -1

document.write(str.indexOf("world"))                     6

2.使用 match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。

var str="Hello world!"
document.write(str.match("world") + "<br />")  world
document.write(str.match("World") + "<br />")  null
document.write(str.match("worlld") + "<br />")  null
document.write(str.match("world!"))        world!

3.使用 replace() 方法在字符串中用某些字符替换另一些字符。


var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/,"W3School"))    Visit W3School!

jQuery中JSON.parse()和JSON.stringify()的区别

1.parse用于从一个字符串中解析出json对象,如

var str = '{"name":"huangxiaojian","age":"23"}'

JSON.parse(str)

结果:

Object

  age"23"

  name"huangxiaojian"

  __proto__Object

注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。

2.stringify()用于从一个对象解析出字符串,如

var a = {a:1,b:2}

JSON.stringify(a)

结果:

"{"a":1,"b":2}"

jQuery中attr和prop的区别

在高版本的jQuery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。

关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单:

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

上面的描述也许有点模糊,举几个例子就知道了。 

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

 这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。

再举一个例子:

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

a href=#与 a href=javascript:void(0) 的区别

javascript:void(0)的意思就是什么也不做!他不是页面URL,而是一个javascript语句void(0),void是一个操作符,该操作符指定要计算一个表达式但是不返回值,这个要计算的表达式是“0”,所以,这个基本是坑爹的写法,完全是糊弄浏览器的。

如果你鼠标悬停于一个链接上,在浏览器底部状态栏上显示该链接的目标地址是这个的话,说明这个网页的编写者希望这个链接被点击时不是直接跳转到某个新页面,而是执行其他操作(例如某个预设的JS函数)。

那为什么要加这个呢?因为链接的HTML代码(<a href="地址">链接</a>)中“href”参数只要不为空,点击该链接时,页面会自动跳转,如果指定的“href”不合法,页面会跳转到自身,也就是刷新,那如果想用该链接来干点别的什么事呢?那我们就要为“href”指定一个合法但又不会刷新页面的参数,所以“javascript:void(0)”就派上用场啦,我们可以这样改(<a href="javascript:void(0)" onclick="干点别的事">链接</a>),这样点击这个链接会触发onclick事件,而页面本身不会刷新,任务达成

 那什么情况下用void(0)比较多呢,无刷新,当然是Ajax了,看一下Ajax的web页面的话,一般都会看到有很多的void(0),:) ,所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。

———————————————————————————————————————————————————————————————————

a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP

<a href="javascript:void(0)" onClick="window.open()"> 点击链接后,页面不动,只打开链接

<a href="#" onclick="javascript:return false;"> 作用同上,不同浏览器会有差异。

点击链接后,不想使页面滚到页首,就用href="javascript:void(0)",不要用href="#",return false也有类似作用

详解href="#"与href="javascript:void(0)"的区别

"#"包含了一个位置信息
默认的锚点是#top 也就是网页的上端
而javascript:void(0) 仅仅表示一个死链接
这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首
而javascript:void(0) 则不是如此
所以调用脚本的时候最好用void(0)
或者<input onclick>
<div onclick>等
打开新窗口链接的几种办法
1.window.open('url')
2.用自定义函数
        <script>
        function openWin(tag,obj)
        {
            obj.target="_blank";
            obj.href = "Web/Substation/Substation.aspx?stationno="+tag;
            obj.click();
        }
        </script>
<a href="javascript:void(0)" onclick="openWin(3,this)">LINK_TEST</a>
window.location.href=""
-------------------------------------------------------------------------------
如果是个# ,就会出现跳到顶部的情况,个人收藏的几种解决方法:
1:<a href="####"></a>
2:<a href="javascript:void(0)"></a>
3:<a href="javascript:void(null)"></a>
4:<a href="#" onclick="return false"></a>
5:<span style="cursor:hand"></span>(好像在FF中不能显示)
-------------------------------------------------------------------------------
慎用JavaScript:void(0)
今天调试CGI的时候,明明CGI程序已经执行,并且最后结果也是正确的,但是页面就是不刷新。在FireFox2.0下测试,结果却是正常的,IE6却偏偏不刷新!仔细调查了一下,发现cgi页面链接的是 <a href="javaScript:void(0)" OnClick="XXX_Func();" ….> only a sample </a>,问题就出在这个void(0)上!让我们先来看看JavaScript中void(0)的含义:
JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下:
1. javascript:void (expression_r_r)
2. javascript:void expression_r_r
expression_r_r是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的,但是写上去是一个好习惯。我们可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。面的代码创建了一个超级链接,当用户点击以后不会发生任何事。当用户点击链接时,void(0) 计算为 0,但在 JavaScript 上没有任何效果。
<a href="javascript:void(0)">单击此处什么也不会发生</a>
也就是说,要执行某些处理,但是不整体刷新页面的情况下,可以使用void(0),但是在需要对页面进行refresh的情况下,那就要仔细了。
其实我们可以这样用<a href="javascript:void(document.form.submit())">,这句话会进行一次submit操作。那什么情况下用void(0)比较多呢,无刷新,当然是Ajax了,看一下Ajax的web页面的话,一般都会看到有很多的void(0),:) ,所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。

使用javascript的时候,通常我们会通过类似:
<a href="#" onclick="javascript:方法">提交</a>
的方式,通过一个伪链接来调用javascript方法.这种方法有一个问题是:
虽然点击该链接的时候不会跳转页面.但是滚动条会往上滚,解决的办法是返回一个false.
如下所示:
<a href="#" onclick="javascript:方法;return false;">提交</a>

还可以用 ###

a href="javascript:void(0)" onclick="javascript:方法;return false;"提交
javascript:void(0)就不会向上跳了:)

还有一个方法是 #this
a href="#this" onclick="javascript:方法"

火线速递:山川在我脚下,大地在我怀中;我就是这原野山川之主,我就是这天地万物之灵

原文地址:https://www.cnblogs.com/huoxiansudi/p/6708367.html