1. <a>标签中调用 js 的几种方式:
我们常用的在超链接 <a> 标签中有点击事件:
1. a href="javascript:js_method();"
这也是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句
2. a href="javascript:void(0);" οnclick="js_method()"
这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
3.a href="javascript:;" οnclick="js_method()"
这种方法跟跟2种类似,区别只是执行了一条空的js代码。
4.a href="#" οnclick="js_method()"
这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
5.a href="#" οnclick="js_method();return false;"
这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。
我看了下taobao的主页,他们采用的是第2种方法,而alibaba的主页是采用的第1种方法,和我们的区别是每个href里的javascript方法都用try、catch包围。
综合上述,在a中调用js函数最适当的方法推荐使用:
<a href="javascript:void(0);" οnclick="js_method()"/>
<a href="javascript:" οnclick="js_method()"/>
<a href="#" οnclick="js_method(); return false;"/>
2. jQuery css 操作: css() 方法:
css() 方法 返回 或 设置 匹配的元素的一个或多个样式属性。
返回一个元素的属性值:
$("p").css("background-color");
设置一个元素的样式属性:
$("p").css("background-color","yellow");
设置一个元素的多个样式属性值:
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 中的css方法等价于Dom方法:
$("p").css("background-color");
//等价于
var pObj = document.getElementByTagName("p")[0];
var pBackColor = pObj.style.backgroundColor;
3. jQuery 属性 操作方法: attr() 方法:
1. attr(attribute) 方法设置或返回被选元素的属性值。
$(selector).attr(attribute) $("img").attr("width")
2. attr( attribute, value) 方法设置被选元素的属性和值。
$(selector).attr(attribute,value) $("img").attr("width","180")
3. attr( attribute, function(index, oldvalue)) 使用函数设置属性值。
$(selector).attr(attribute,function(index,oldvalue)) $("img").attr("width",function(n,v){ return v-50; });function(index,oldvalue)
规定返回属性值的函数。
该函数可接收并使用选择器的 index 值和当前属性值。
4. attr( attribute1: value1, attribute2: value2,...) 方法设置被选元素的多个属性和值。
$(selector).attr({attribute:value, attribute:value ...}) $("img").attr({width:"50",height:"80"})
jQuery 中 attr() 方法等价的Dom 方法:
$("img").attr("width","180");
//等价于
var imgObj = document.getElementByTagName("img")[0];
imgObj.setAttribute("width","180");
css() 和 attr() 对比分析:
attr()
是操作元素的属性
。css()
是操作元素的style属性
。
前者可以修改<img>
的 src
属性,可以修改 <a>
的 href
属性, 可以修改 <input>
的 title
属性。然而后者却不行,他它只能修改样式相关的特征,也就是只对 style
这个特定的属性进行操作。
例如:
<div style="color:red; font-weight:bold;" id="a" data-id="1" class="mystyle">Hello</div>
<script type="text/javascript">
$(function(){
//css()
var color = $("#a").css("color"); //只有一个参数时,是获取div#a的color,返回red
$("#a").css("color","blue"); //两个参数时,是设置对应的 样式属性,这里是这只文本color为blue
// $("#a").css({"color":"blue","fontWeight":"normal"});//也支持对象形式进行设置样式
//attr()
var id = $("#a").attr("data-id"); //获取div#a 上面的data-id属性的值;当然,style,class,id这三个都可以获取到,因为这些都是Html元素的 属性
//$("#a").attr("data-id",2);//设置div#a上面的data-id属性为2,假如是一个不存在的属性,使用这个代码,就会添加这个属性到匹配到的元素上面 ,如$("#a").attr("data-width","100px");,使用这个,div#aHtml元素上面就会新增一个data-width的属性
});
</script>
4. 页面加载完时间 onload 和 addOnloadEvent(fun) 的区别:
假如我们希望某个函数在网页加载完毕之后就立即执行。网页加载完毕时会触发一个onload事件,所以我们可以利用onload事件来加载这个函数。Onload事件与window对象相关联。如: 把 myfunction 函数绑定到这个事件上:
window.onload = myfunction();
一个函数我们可以利用上面的解决, 那两个、三个甚至更多呢?怎么解决??
假如我们有firstFunction和secondFunction两个函数,是不是就是下面这样写呢:
window.onload = firstFunction;
window.onload = secondFunction;
但是每个处理函数只能绑定一条
指令。所以上面的不行。因为secondFunction函数将会取代firstFunction函数。
window.onload = function(){
firstFunction();
secondFunction();
};
该函数名为 addLoadEvent。该函数仅一个参数:该参数指定了你打算在页面加载完毕后需要执行的函数的函数名。
addLoadEvent() 函数代码如下:
- function addLoadEvent(func){
- var oldonLoad = window.onload;
- if(typeof window.onload!='function'){
- window.onload = func;
- }
- else{
- window.onload = function(){
- oldonload();
- func();
- }
- }
- }
addLoadEvent函数主要是完成如下的操作:
1、把现有的window.onload事件处理函数的值存入到oldonload中。
2、如果在这个处理函数上还没有绑定任何函数,就将该函数添加给它。
3、如果在这个处理函数上已经绑定了一些函数,就把该函数追加到现有指定的末尾。
通过addLoadEvent函数,只需要调用该函数就可以进行绑定了。
- addLoadEvent(firestFunction);
- addLoadEvent(secondFunction);
所以这个函数非常有用,尤其当代码变得很复杂的时候。无论你打算在页面加载完毕时执行多少个函数,只需要多写几条这样的语句就可以解决了。方便、实用。
5. jQuery 获取 url 参数
UrlParm.parm("urlParaName")
示例如下:
在 A.html 页面中:
<script type="text/javascript">
function lookVehiclePassReocrd(id){
window.location.href="../page/B.html?id="+id;
}
</script>
<img id="check" title="查看" src="../../../images/icon_search.png"
οnclick="lookVehiclePassReocrd(${id})" >
</img>
在 B.html 页面中:
<script type="text/javascript" src="../js/getUrlParam.js"></script>
<script type="text/javascript">
addOnloadEvent(init);
function init(){
//使用getUrlParam.js 中的 UrlParm.parm("urlParaName") 获取url中的参数;
var id=UrlParm.parm("id");
}
</script>
getUrlParam.js 如下:
UrlParm = function() { // url参数
var data, index;
(function init() {
data = [];
index = {};
var u = window.location.search.substr(1);
if (u != '') {
var parms = decodeURIComponent(u).split('&');
for (var i = 0, len = parms.length; i < len; i++) {
if (parms[i] != '') {
var p = parms[i].split("=");
if (p.length == 1 || (p.length == 2 && p[1] == '')) {// p | p=
data.push(['']);
index[p[0]] = data.length - 1;
} else if (typeof(p[0]) == 'undefined' || p[0] == '') { // =c | =
data[0] = [p[1]];
} else if (typeof(index[p[0]]) == 'undefined') { // c=aaa
data.push([p[1]]);
index[p[0]] = data.length - 1;
} else {// c=aaa
data[index[p[0]]].push(p[1]);
}
}
}
}
})();
return {
// 获得参数,类似request.getParameter()
parm : function(o) { // o: 参数名或者参数次序
try {
return (typeof(o) == 'number' ? data[o][0] : data[index[o]][0]);
} catch (e) {
}
},
//获得参数组, 类似request.getParameterValues()
parmValues : function(o) { // o: 参数名或者参数次序
try {
return (typeof(o) == 'number' ? data[o] : data[index[o]]);
} catch (e) {}
},
//是否含有parmName参数
hasParm : function(parmName) {
return typeof(parmName) == 'string' ? typeof(index[parmName]) != 'undefined' : false;
},
// 获得参数Map ,类似request.getParameterMap()
parmMap : function() {
var map = {};
try {
for (var p in index) { map[p] = data[index[p]]; }
} catch (e) {}
return map;
}
}
}();
6. jQuery 选择器以及其与 document.getElementById("id") 的区别
元素选择是一切操作的前提,jQuery中 $( ) 函数最强大最常用的功能之一就是使用选择器选择DOM元素。常见的如下:更详细的请参考:jQuery 选择器参考手册,
$(this) | 当前 HTML 元素 |
$("p") | 所有 <p> 元素 |
$("p.intro") | 所有 class="intro" 的 <p> 元素 |
$(".intro") | 所有 class="intro" 的元素 |
$("#intro") | id="intro" 的元素 |
$("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
$("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
$("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
关于 jQuery 的 $() 和 document.getElementById("id") 的详细区别可以参考 区别对比分析,以下为简答总结:
document.getElementById()返回的是DOM对象,而$()返回的是jQuery对象
jQuery对象就是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的,其可以使用jQuery 里的方法
例如:如果想获取 id 为 test 元素中的 html 代码,使用jQuery 和 document.getElementById() 如下:
jQuery方法:
$("#test").html();
document方法:
document.getElementById("test").innerHTML();
虽然 jQuery 对象是包装 DOM 对象后产生的,但是 jQuery 无法使用 DOM 对象的任何方法,同理 DOM 对象也不能使用 jQuery 里的方法.乱使用会报错。
jQuery 对象和 DOM 对象的相互转换:
1、alert($("#div"))得到的是[object Object]
2、alert(document.getElementById("div"))得到的是[object HTMLDivElement]
3、alert($("#div")[0])或者alert($("#div").get(0))得到的是[object HTMLDivElement]
从上面我们可以看出 jQuery 选择器得到的是一个数组对象;因此我们可以通过数组的下标来转换成DOM 对象;
jQuery 对象 转换成 DOM 对象:
(1) jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
如:var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2) jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
如:var $v=$("#v"); //jQuery对象
· var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM 对象转换成 jQuery对象:
对于已经是一个DOM对象,只需要用 $() 把 DOM 对象包装起来,就可以获得一个 jQuery 对象了。 $(DOM对象)
如:var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象 转换后,就可以任意使用jQuery的方法了。
7. $(function() {});是$(document).ready(function(){ })的简写
$(document).ready() 里的代码是在页面内容都加载完才执行的,如果把代码直接写到<script type="text/javascript"> </script>标签里,当页面加载完这个 <script> 标签就会执行里边的代码了,此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom,那么就会报错,当然如果你把 <script> 标签放到页面最后面那么就没问题了,此时和ready效果一样。
例如:
点击段落后此段落隐藏
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"/>
<script type="text/javascript">
document.ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p> if you click me, i will hide. </p>
</body>
如果把$(document).ready(function() {});去掉后,无法隐藏段落:
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"/>
<script type="text/javascript">
$("p").click(function(){
$(this).hide();
});
</script>
</head>
<body>
<p> if you click me, i will hide. </p>
</body>
但是把script放到页面最后的话,就可恢复隐藏效果:
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"/>
</head>
<body>
<p> if you click me, i will hide. </p>
</body>
<script type="text/javascript">
$("p").click(function(){
$(this).hide();
});
</script>
</html>
关于 html css js 三者的加载顺序:
详细内容可以参考:html js css 加载顺序
JS 页面加载事件 document.ready() 和 window.onload() 的区别:
1. ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件);
2. onload,指示页面包含图片等文件在内的所有元素都加载完成。