JQuery和JavaScript常用方法的一些区别
1、加载DOM区别
JavaScript:
window.onload
function first(){
alert('first');
}
function second(){
alert('second');
}
window.onload = first;
window.onload = second;
//只会执行第二个window.onload;不过可以通过以下方法来进行改进:
window.onload = function(){
first();
second();
}
Jquery:
$(document).ready()
$(document).ready(){
function first(){
alert('first');
}
function second(){
alert('second');
}
$(document).ready(function(){
first();
}
$(document).ready(function(){
second();
}
//两条均会执行
}
2、获取ID
JavaScript:
document.getElementById('idName')
JQuery:
$('#idName')
3、获取Class
JavaScript:
JavaScript没有默认的获取class的方法
JQuery:
$('.className')
4、获取TagName
JavaScript:
document.getElementsByTagName('tagName')
JQuery:
$('tagName')
5、创建对象并加入文档中
JavaScript:
var para = document.createElement('p');
//创建一个p元素
document.body.appendElement(para);
//将p元素追加为body的lastchild子节点,如果想将新创建的p元素插入到已存在的某个元素之前,可以使用insertBefore()方法
JQuery:
JQuery提供了4种将新元素插入到已有元素(内部)之前或者之后的方法:append()、appendTo()、prepend()、prependTo()。
格式:$( html );
eg,html代码:
<p>World!</p>
$('p').append('<b>Hello!</b>');
//输出:<p>World!<b>Hello!</b></p>
$('<b>Hello!</b>').appendTo('p'); //输出:同上
$('p').prepend('<b>Hello!</b>');
//输出:<p><b>Hello!</b>World! </p>
$('<b>Hello!</b>').prependTo('p');
//输出:同上
6、插入新元素
JavaScript:
insertBefore() 语法格式:
parentElement.insertBefore(newElement,targetElement)
eg, 将一个img元素插入一个段落之前。
html代码:
<img src="data:image.jpg" id="imgs" />
<p>这是一段文字</p>
JavaScript代码:
var imgs = document.getElementById('imgs');
var para = document.getElementsByTag('p');
para.parenetNode.insertBefore(imgs,para);
JQuery:
JQuery提供了4种将新元素插入到已有元素(外部)之前或者之后的方法:after()、insertAfter()、before()、insertBefore()。
格式:$( html );
eg,html代码:
<p>World!</p>
JQuery代码
$('p').after('<b>Hello!</b>');
//输出:<p>World! </p><b>Hello!</b>
$('<b>Hello!</b>'). insertAfter ('p');
//输出:同上
$('p').before('<b>Hello!</b>');
//输出:<b>Hello!</b><p>World! </p>
$('<b>Hello!</b>').insertBefore('p');
//输出:同上
7、复制节点
JavaScript:
reference = node.cloneNode(deep)
这个方法只有一个布尔型的参数,它的可取值只能是true或者false。该参数决定是否把被复制节点的子节点也一同复制到新建节点里去。
JQuery:
clone() //复制节点后,被复制的新元素并不具有任何行为
clone(true) //复制节点内容及其绑定的事件
备注:该方法通常与appendTo()、prependTo()等方法结合使用。
8、删除节点
JavaScript:
reference = element.removeChild(node)
removeChild()方法将一个给定元素里删除一个子节点
JQuery:
remove();
remove()方法作用就是从DOM中删除所有匹配的元素,remove()方法还可以与其他的过滤选择器结合使用,非常方便。
eg,将ul li下的title不是"Hello"的li移除:
$('ul li').remove(li[title!='Hello']);
empty();
empty()方法作用是清空节点。
9、包裹节点
JavaScript:
JavaScript暂无
JQuery:
wrap() //将匹配元素用其他元素的结构化标记单独包裹起来
wrapAll() //将所有匹配的元素用一个元素包裹起来
wrapInner() //将匹配元素的子内容用其他结构化的标记包裹起来
10、属性操作:设置属性节点、查找属性节点
JavaScript:
document.getElementsByTagName('tagName')
JQuery:
JQuery中设置和查找属性节点都是:attr() 。
$('p').attr('title'); //获取p元素的title属性;
$('p').attr('title','My title'); //设置p元素的title属性
$('p').attr('title':'My title','class':'myClass'); //当需要添加多个属性时,可以用"名:值"对的形式,中间用逗号隔开。
11、替换节点
JavaScript:
reference = element.replaceChild(newChild,oldChild)
该方法是将一个给定父元素里的一个子节点替换为另外一个节点。
JQuery:
replaceWith()、replaceAll()
eg:
<p>hello</p>
想替换为:
<h2>Hi</h2>
JQuery代码:
$('p') .replaceWith('<h2>Hi</h2>');
或者可以写成:
$('<h2>Hi</h2>').replaceAll('p');
12、CSS-DOM操作
JavaScript:
格式:element.style.property
CSS-DOM能够读取和设置style对象的属性,其不足之处是无法通过它来提取外部CSS设置的样式信息,而JQuery的.css()方法是可以的。
注意点:CSS中的如"font-size"这样有"-"的,要使用首字母小写的驼峰式表示,如fontSize。
JQuery:
格式:$(selector).css()
css()方法获取元素的样式属性
此外,JQuery还提供了height()和width()分别用来获取元素的高度和宽度(均不带单位),而css(height)、css(width)返回高宽,且带单位。
JQuery和JavaScript常用方法的一些区别的更多相关文章
- JQuery笔记:JQuery和JavaScript的联系与区别
来源:http://www.ido321.com/1019.html ps:LZ觉得这个标题有点大了,超出了能力范围,不喜勿碰.目前只记录LZ能力范围内的,日后持续补充. 一.JQuery对象和DOM ...
- JQuery 和JavaScript的区别
Google提供的jquery包: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js jQuery官方的jquery包: ...
- jQuery 是javascript的一个库(常用插件、处理器)
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery就是javascript的一个库,把我 ...
- JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...
- jQuery中.attr()和.prop()的区别
之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...
- jQuery学习-----(二)JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj = ...
- 【二】jquery之基础概念与jquery对象与dom对象的区别及混合使用
一:jquery基本概念 1.jquery是一个javascript框架,它是一个轻量级的js库 2.当下流行的js库有: jquery MooTools Prototype 3.$(ducoment ...
- Jquery中.attr()和.data()的区别
$.attr()和$.data()本质上属于DOM属性和Jquery对象属性的区别. 一个简单的例子 <!DOCTYPE html> <html> <head> & ...
- jQuery中first-child与first选择器区别
1.first-child first-child为每个父级元素匹配第一个子元素,可以匹配出多个元素: 示例代码: <!DOCTYPE html> <html lang=" ...
随机推荐
- 微信H5授权登陆
Controllerpackage com.iimscloud.auth.provider.controller; import org.springframework.beans.factory.a ...
- CSS3:CSS3 简介
ylbtech-CSS3:CSS3 简介 1.返回顶部 1. CSS3 简介 对CSS3已完全向后兼容,所以你就不必改变现有的设计.浏览器将永远支持CSS2. CSS3 模块 CSS3被拆分为&quo ...
- DXP 常用功能
1. PCB布板篇 t+s: 从原理图对应到pcb图中 F11: 修改顶层,底层信息 v+f: 回到PCB板中 i+l: 放置到画的矩形框内 对齐功能: ctrl + shift + t: 顶部对齐 ...
- bagging和boosting以及rand-forest
bagging: 让该学习算法训练多轮,每轮的训练集由从初始的训练集中随机取出的n个训练样本组成,某个初始训练样本在某轮训练集中可以出现多次或根本不出现,训练之后可得到一个预测函数序列h_1,⋯ ⋯h ...
- java oop第06章_异常处理
一. 异常的概念: 若程序都按我们事先设定的计划运行为正常执行,但通常会出现我们事先预料之外的其他情况,称为程序发生异常, 在java中会对一些可能出现异常的代码进行分类,达到尽量对可能发生的异常进行 ...
- js 阻止事件
event.stopPropagation();//阻止事件冒泡 ,可阻止父类事件的发生 event.preventDefault();//阻止默认行为 如A标签
- AtCoder Beginner Contest 132 E - Hopscotch Addict
bfs 位置+状态 just need to calculate min value(only it is useful), so O(1*x) 挺有趣的一道题... #include <cst ...
- JavaScript 数据值校验工具类
/** * 数据值校验工具类 */ var checkService = { // 不校验 none: function () { return true; }, //非空校验 isEmpty: fu ...
- 牛客多校第六场 B Shorten IPv6 Address 模拟
题意: 给你一个二进制表示的IPv6地址,让你把它转换成8组4位的16进制,用冒号分组的表示法.单组的前导0可以省略,连续多组为0的可以用两个冒号替换,但是只允许替换一次.把这个地址通过这几种省略方式 ...
- spss logistic回归分析结果如何分析
spss logistic回归分析结果如何分析 如何用spss17.0进行二元和多元logistic回归分析 一.二元logistic回归分析 二元logistic回归分析的前提为因变量是可以转化为0 ...