1. 兼容性
例如:要获取一个 div 元素的内容
// 原生 js 写法
document.getElementById("div1").innerText; // for IE
document.getElementById("div1").textContent;// for Firefox (innerText 在Firefox 中不支持)
// jQuery 写法
$("#div1").text();
# jQuery 可以兼容多种浏览器,具体请参见
http://jquery.com/browser-support/2. 判断浏览器 // 原生 js 写法
if (window.ActiveXObject) {
alert("IE");
}
if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
alert("Firefox");
}
// jQuery 写法 (需要插件 https://github.com/jquery/jquery-migrate)
if ($.browser.msie) {
alert("IE");
}
if ($.browser.mozilla) {
alert("Firefox");
}
3. onload, onunload -> ready
# onload 页面加载完成时触发
# onunload 页面关闭时触发
// 原生 js 写法
window.onload = function() {
alert("div1 innerHTML = " + document.getElementById("div1").innerHTML);
}
window.onbeforeunload = function(event) {
return "您确定要离开吗?";
}
// jQuery 写法
$(document).ready(function() {
alert("div1 innerHTML = " + $("#div1").html());
});
$(window).bind("beforeunload", function() {
return "您确定要离开吗?";
});
4. 事件绑定与解除 // 原生 js 写法
document.getElementById("div1").onclick = function () {
alert(this.innerHTML);
this.onclick = null;
};
// or
var div1 = document.getElementById("div1");
if (div1.attachEvent) {
div1.attachEvent('onclick', function(){
alert(div1.innerHTML);
div1.detachEvent('onclick', arguments.callee);
});
} else {
div1.addEventListener('click', function(){
alert(div1.innerHTML);
div1.removeEventListener('click', arguments.callee);
});
}
// jQuery 写法
$("#div1").bind("click", function(){
alert($(this).html());
$(this).unbind("click");
});
5. 操作 cookie // 原生 js 写法
function addCookie(name, value, expireDays) {
if (expireDays == null) {
document.cookie = name + "=" + escape(value);
} else {
var expires = new Date();
expires.setTime(expires.getTime() + expireDays*24*60*60*1000);
document.cookie = name + "=" + escape(value) + ";expires=" + expires.toUTCString();
}
}
function delCookie(name) {
document.cookie = name + "=;expires=" + (new Date(0).toUTCString());
}
function readCookie() {
var result = "";
var cookies = document.cookie.split("; ");
for (var i=0; i<cookies.length; i++) {
var cookie = cookies[i].split("=");
result += cookie[0] + "=" + unescape(cookie[1]) + "\n";
}
return result;
}
// jQuery 写法 (需要插件 https://github.com/carhartl/jquery-cookie)
$.cookie('name1', 'value1');
$.removeCookie('name1');
alert(JSON.stringify($.cookie()));
6. 属性 // 原生 js 写法
document.getElementById("sp1").setAttribute("attrName1", "value1");
alert(document.getElementById("sp1").getAttribute("attrName1"));
// jQuery 写法
$("#sp1").attr("attrName1", "value1");
alert($("#sp1").attr("attrName1"));
7. DOM 元素 // 原生 js 写法
var div1 = document.getElementById("div1");
// 创建
var sp2 = document.createElement("span");
sp2.setAttribute("id", "sp2");
sp2.innerHTML = "This is a span element2.";
// 增加
div1.innerHTML = '<span id="sp1">This is a span element1.</span>';
div1.appendChild(sp2);
// 删除
sp2.parentNode.removeChild(sp2); // 删除节点 sp2
div1.innerHTML = ""; // 清空 div1 的内容
// jQuery 写法
$("#div1").html('<span id="sp1">This is a span element1.</span>');
$("#div1").append('<span id="sp2">This is a span element2.</span>');
$("#sp2").remove(); // 删除节点 sp2
$("#div1").empty(); // 清空 div1 的内容
8. Ajax // 原生 js 写法
function loadData(method, url, params, callback) {
var request = null;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
if (request == null) {
return;
}
request.onreadystatechange = callback;
request.open(method, url, true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send(params);
}
loadData("GET", "menu.json", null, function(){
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
});
// jQuery 写法
$.get("menu.json", null, function(data) {
alert(data);
}, "text");
9. 大量的 jQuery 插件[zTree jQuery树插件] http://www.ztree.me/v3/main.php#_zTreeInfo[jQuery 插件库] http://www.sd131.com/
[jQuery 插件1] http://www.oschina.net/project/tag/273/jquery/
[jQuery 插件2] http://developer.51cto.com/art/201102/245390.htm# 相关链接http://jquery.com/download/http://www.ichartjs.com/
http://dyccsxg.iteye.com/blog/771832
分享到:
相关推荐
jquery 替换节点 节点jquery 替换节点 节点
采用jquery的插件实现的图片无刷新替换,可以用于新闻图片及首页图片缩略图生成不正确的替换,采用php后台。
使用JQuery实现的图片拖拽效果
jquery图片栅格替换效果
jquery1.2.3到3.3.1版本都有: jquery-1.10.2.min.js jquery-1.11.1.min.js jquery-1.11.3.min.js jquery-1.2.3.min.js jquery-1.3.2.min.js jquery-1.4.2.min.js jquery-1.4.4.min.js jquery-1.5.2.min.js jquery-...
jquery图片栅格替换效果栅格替换效果图片栅格
1.jquery.inputer为替代select控件开发! 2.本控件经过测试,兼容IE,火狐! 3.本控件可以自由扩展! 4.本控件为原创,代码有些凌乱,但功能齐全! ---本控件代码为本人编写,完全处于分享拿出来的,有什么地方写的...
jquery 图片代替文字jquery 图片代替文字 jquery 图片代替文字 jquery 图片代替文字 jquery 图片代替文字
主要介绍了jQuery实现字符串全部替换的方法,结合实例形式对比分析了使用Replace进行替换的方法及使用正则进行全部替换的相关操作技巧,需要的朋友可以参考下
Jquery节点插入、复制和替换方法总结
jQuery 迁移插件, Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery uploadify 3.1版 用于多文件上传
jQuery替换字符串的实例代码。需要的朋友可以过来参考下,希望对大家有所帮助
2.1 jQuery 核心函数 17 2.1.1 jQuery(expression, [context]) 17 2.1.2 jQuery(html, [ownerDocument]) 18 2.1.3 jQuery(html, props) 19 2.1.4 jQuery(elements) 20 2.1.5 jQuery() 20 2.1.6 jQuery(callback) 21 ...
本文实例讲述了jQuery替换textarea中换行的方法。分享给大家供大家参考。具体分析如下: 昨天同事在学习jQuery的时候,希望使用替换掉textarea中的换行。 html部分: <textarea id="ncontent"></...
Selector 一个用于替换jQuery的微型JavaScript库,整个包只有5KB.
另外,在jQuery 1.7中移除了event.layerX和event.layerY这两个属性,以及jQuery.isNaN()和jQuery.event.proxy()方法,分别用event.originalEvent.layerX and event.originalEvent.layerY、jQuery.isNumeric()、...
jbox2.3 由于更新停止,目前在jquery1.8以下使用正常。但由于jquery1.9取消了$.browser.msie方法,导致高版本jquery无法使用。本文件使用其它判断方法替换了$.browser.msie,实测在jquery1.9以上可使用。
实现网页图片定时切换 Jquery图片定时切换展示
jquery图片栅格替换效果.zip