javascript与jQuery语法比较(js和jquery的关系)
toyiye 2024-09-09 08:56 3 浏览 0 评论
jQuery就对javascript的一个扩展, 封装, 就是让javascript更好用, 更简单。
人家怎么说的来着, jQuery就是要用更少的代码, 漂亮的完成更多的功能。
javascript与jQuery常用方法比较
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() 简化为$(function(){ //... })
实例1:
$(document).ready(){
function first(){
alert('first');
}
function second(){
alert('second');
}}
实例2:
$(document).ready(function(){
first();
} )
$(document).ready(function(){
second();
} ) //两条均会执行
可以简化为:
$(function(){
first();
});
$(function(){
second();
});
jQuery加载与普通加载区别
方法 window.onload $(document).ready()
执行时机 必须等待网页中的所有内容加载完毕后 网页中的所有DOM结构绘制完毕后就执行,
(包括图片才能执行) 可能DOM元素关联的东西并没有加载完
编写个数 不能同时编写多个(后者会"覆盖"前者) 能同时编写多个
简化写法 无 $()
2 获取ID
javascript: document.getElementById('idName')
jQuery: $('#idName')
3 获取name和class
javascript: document.getElementsByName('name') name属性
jQuery: $('.className') class属性
4 获取TagName
javascript: document.getElementsByTagName('tagName')
jQuery: $('tagName')
js中元素不存在使用它会报错
var div = document.getElementsByTagName("div")[0];
div.onclick = function(){
console.log("javascript");
}
jQuery不会报错
var $div = $("div");
$div.click(function(){
console.log("jQuery");
})
5 创建对象并加入文档中
javascript:
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
//将p元素追加为Id为div1的lastchild子节点,如果想将新创建的p元素插入到已存在的某个元素之前,可以使用insertBefore()方法
jQuery:
jQuery提供了4种将新元素插入到已有元素(内部)之前或者之后的方法:
append()、appendTo(目标)、prepend()、prependTo(目标)。 (prepend()、prependTo(目标)插在子元素之前)
格式:$(html);
HTML代码:
<p>World!</p>
jQuery代码:
$('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)
将一个img元素插入一个段落之前。
HTML代码:
<img src="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种将新元素插入到已有元素(外部)之前或者之后的方法:before()、insertBefore(目标)、after()、insertAfter(目标)。
格式:$('html');
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(bool)
这个方法只有一个布尔型的参数, 它的可取值只能是true或者false。该参数决定是否把被复制节点的子节点也一同复制到新建节点里去。
jQuery:
clone() //复制节点后,被复制的新元素并不具有任何行为 ,默认值false,也复制子节点
clone(true) //复制节点内容及其绑定的事件
备注:该方法通常与appendTo()、prependTo()等方法结合使用。
8 删除节点
javascript:
reference = element.removeChild(node)
removeChild()方法将一个给定元素里删除一个子节点
jQuery:
remove();
remove()方法作用就是从DOM中删除所有匹配的元素,remove()方法还可以与其他的过滤选择器结合使用,非常方便。
将ul li下的title不是"Hello"的li移除:
$('ul li').remove(li[title!='Hello']);
empty(); 删除匹配的元素集合中所有的子节点。
从DOM中把所有段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove();
把所有段落的子元素(包括文本节点)删除
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();结果:
<p></p>
9 包裹节点
javascript: javascript暂无
jQuery:
wrap() //将匹配元素用其他元素的结构化标记单独包裹起来
wrapAll() //将所有匹配的元素用一个元素包裹起来
wrapInner() //将匹配元素的子内容用其他结构化的标记包裹起来
把所有的段落用一个新创建的div包裹起来
jQuery 代码:
$("p").wrap("<div class='wrap'></div>");
用一个生成的div将所有段落包裹起来
jQuery 代码:
$("p").wrapAll("<div></div>");
把所有段落内的每个子内容加粗
jQuery 代码:
$("p").wrapInner("<b></b>");
10 属性操作:设置属性节点、查找属性节点
javascript:
document.getElementsByTagName('tagName').title
document.getElementsByTagName('tagName').title="My title";
document.getElementsByTagName('tagName')['title']="My title";
document.getElementsByTagName('tagName').getAttribute('My title');
document.getElementsByTagName('tagName').setAttribute('title','My title');
document.getElementsByTagName('tagName').removeAttribute('title','My title');
jQuery:
jQuery中设置和查找属性节点都是:attr() 。
$('p').attr('title'); //获取p元素的title属性
$('p').attr('title','My title'); //设置p元素的title属性
$('p').removeAttr('title') //删除p元素的title属性
$('p').attr('title':'My title','class':'myClass'); //当需要添加多个属性时, 可以用"属性":"值"对的形式, 中间用逗号隔开。
11 替换节点
javascript:
var reference = element.replaceChild(newChild,oldChild)
该方法是将一个给定父元素里的一个子节点替换为另外一个节点。
jQuery:
replaceWith()、replaceAll()
replaceWith() 与 replaceAll() 作用相同。差异在于语法:内容和选择器的位置, 以及 replaceAll() 无法使用函数进行替换。
$(selector).replaceWith(content) 用指定的HTML内容或元素替换被选元素
$(content).replaceAll(selector) 用指定的HTML内容或元素替换被选元素。
<p>hello</p> 想替换为: <h2>Hi</h2>
jQuery代码:
$('p') .replaceWith('<h2>Hi</h2>');
或者可以写成:
$('<h2>Hi</h2>').replaceAll('p');
12 删除节点
javascript:removeChild()
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
jQuery:
$("p").remove();
13 CSS操作
javascript:
格式:element.style.property
CSS-DOM能够读取和设置style对象的属性, 其不足之处是无法通过它来提取外部CSS设置的样式信息, 而jQuery的css()方法是可以的。
document.body.style.backgroundColor="red";
jQuery:
格式:$(selector).css()
css()方法获取元素的样式属性
此外, jQuery还提供了height()和width()分别用来获取元素的高度和宽度(均不带单位), 而css(height)、css(width)返回高宽, 且带单位。
$("p").css({color: "#ff0011", background: "blue", "font-size":"16px" });
$("p").css({color: "#ff0011", background: "blue", fontSize:"16px" }); jQuery也支持
注意点:CSS中的如"font-size"这样有"-"的属性, 要使用首字母小写的驼峰式表示, 如fontSize。
jQuery中的css()的带横线的属性可以原样输出, 但需带引号, 也可以使用首字母小写的驮峰式表示。
javascript:
className属性
DOM对象.className = "className";
DOM对象.className += " claaaName";
DOM对象.className = "";
jQuery:
addClass(class|fn)
removeClass(class|fn)
toggleClass(class|fn)
14 表单value值的操作
javascipt:
formNode.value
formNode.attr('value');
formNode.attr('value',信息值);
jQuery:
val([val|fn|arr])
$().val(); //获得value属性值
$().val(value值); //设置value属性的值(文本框)
$().val([,,]); //设置value属性的值(单选框、复选框、下拉式列表)
该val()方法在复选框、单选按钮、下拉列表的使用有凸出表现。
15 事件的属性
相同之处
altKey Alt键是否被按下. 按下返回true
ctrlKey ctrl键是否被按下, 按下返回true
shiftKey Shift键是否被按下, 按下返回true
screenX/Y 对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标
type 事件的名称,如click、mouseover等
以上为javascript和jQuery相同的属性
不同之处
javascript:
clientX/Y 鼠标指针在客户端区域的坐标, 不包括工具栏、滚动条
jQuery:
pageX/Y 鼠标指针在客户端区域的坐标, 不包括工具栏,滚动条;
16 事件的兼容性
事件目标:
javascript:
IE:srcElement 标准DOM:targe
jQuery:
target 引起事件的元素/对象
keyCode和CharCode:
javascript:
charcode keycode(keypress) keycode(keydown、keyup)
IE 无 按键的Unicode值 按键的数字代码
标准DOM 按键的Unicode值 按键的数字代码 按键的数字代码
jQuery:
keyCode 对于keyup和keydown事件返回被按下的键。不区分大小写, a和A都返回65;
鼠标事件,值对应按下的鼠标键
javascript:
button IE中的按键 Firefox中的按键
0 未按下案件 左键
1 左键 中键(滑轮)
2 右键 右键
3 同时按下左、右键 不支持组合键,未按下任何键时button值为undefined
4 中键(滑轮)
5 同时按下左、中键
6 同时按下右、中键
7 同时按下左、中、右键
jQuery:
which 对于键盘事件, 返回触发事件的键的数字编码。对于鼠标事件, 返回鼠标按键号(1左,2中,3右);
15 事件设置
DOM1级事件设置
<input type="text" onclick="过程性代码" value=’tom’ />
<input type="text" onclick="函数()" />
node.onclick = function(){}
node.onclick = 函数;
DOM2级事件设置
node.addEventListener(类型,处理,事件流);
node.removeEventListener(类型,处理,事件流);
node.attachEvent();
node.detachEvent();
jquery事件设置
$().事件类型(事件处理函数fn); //设置事件
$().事件类型(); //触发事件执行
$().bind('事件类型',fn); //绑定事件
$().one('事件类型',fn); //绑定事件(一次)
$().live('事件类型',fn); //绑定事件(委派)
16 处理页面中的元素
javascript:
使用javascript脚本获取页面内容的方式主要有两种, 第一种是通过表单获取表单元素的value值。格式为:
表单名称.元素名.value;
该方式只能获取表单中的元素值,对于其他标签元素则无能为力。
第二种方式通过id名来获取页面中任意标签的内容。格式为:
document.getElementById('id'). value;
document.getElementById ('id').innerText;
使用第二种方式时要注意, 标签的id名必须存在且唯一, 否则就会出现错误。
为标签内容赋值时, 则使用如下格式:
id.innerHTML ='要显示的内容';
jQuery:
html([val|fn]) 返回值:String
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
在一个 HTML 文档中, 我们可以使用html()方法来获取任意一个元素的内容。
如果选择器匹配多于一个的元素, 那么只有第一个匹配元素的 HTML 内容会被获取。
val String
function(index, html) Function
此函数返回一个HTML字符串。接受两个参数, index为元素在集合中的索引位置, html为原先的HTML值。
text()
text([val|fn]) 返回值:String
val String 用于设定HTML内容的值
function(index, html) Function 此函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值。
17 事件对象
javascript:
node.onclick = function(oEvent){
if(window.event) oEvent = window.event; //兼容性写法
}
在IE浏览器中事件对象是window对象的一个属性window.event;
在标准的DOM中规定event对象必须作为唯一的参数传给事件处理函数。
因此, javascript要处理好各浏览器的事件对象的兼容性。
jQuery:
$().bind('click',function(evt){ window.event });
$().click(function(evt){});
$().bind('mouseover',f1);
function f1(evt){}
事件对象:就直接使用的evt即可, 在jQuery框架内部对各浏览器的事件对象作出了兼容处理。
18 阻止浏览器默认动作、阻止事件冒泡
javascript:
DOM2级浏览器默认动作阻止:
事件对象.preventDefault(); 主流浏览器
事件对象.returnValue = false; IE(6,7,8)浏览器
DOM2级事件冒泡阻止:
事件对象.stopPropagation(); 主流浏览器
事件对象.cancelBubule = true; IE(6,7,8)浏览器
jQuery:
$().bind('click',function(evt){
evt.preventDefault();
evt.stopPropagation();
});
preventDefault()方法是jQuery的方法, 名字与javascript底层代码的名字一致, 并且对各浏览器作出了兼容处理。
stopPropagation()方法是jQuery的方法, 名字与javascript底层代码的名字一致, 并且对各浏览器作出了兼容处理。
return false 与event.preventDefault()区别
1. return false 实际上执行了三种操作
event.preventDefault()
event.stopPropation()
终止函数执行并立即执行
2 .为了避免对程序执行过多的隐式操作造成的Bug,建议
只需要阻止事件默认行为时,应该使用event.preventDefault()
只需要阻止事件冒泡时,应该使用event.stopPropagation()
只有当同时阻止事件冒泡和阻止事件默认行为时,才使用return false
19 页面滚动
javascript:
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
<script>
function scrollWindow(){
window.scrollTo(100,500);
}
</script>
<input type="button" onclick="scrollWindow()" value="滚动条" />
jQuery:
offset([coordinates]) 获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性: top 和 left, 以像素计。此方法只对可见元素有效。
$("p:last").offset({ top: 10, left: 30 });
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
x=$("p").offset();
$("#span1").text(x.left);
$("#span2").text(x.top);
});
});
</script>
</head>
<body>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>获得 offset</button>
</body>
</html>
输出结果: 本段落的偏移是 8 left 和 8 top。
scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
$(".btn1").click(function(){
$("div").scrollLeft(100);
});
相关推荐
- 为何越来越多的编程语言使用JSON(为什么编程)
-
JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...
- 何时在数据库中使用 JSON(数据库用json格式存储)
-
在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...
- MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)
-
前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...
- JSON对象花样进阶(json格式对象)
-
一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...
- 深入理解 JSON 和 Form-data(json和formdata提交区别)
-
在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...
- JSON 语法(json 语法 priority)
-
JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...
- JSON语法详解(json的语法规则)
-
JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...
- MySQL JSON数据类型操作(mysql的json)
-
概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...
- JSON的数据模式(json数据格式示例)
-
像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...
- 前端学习——JSON格式详解(后端json格式)
-
JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...
- 什么是 JSON:详解 JSON 及其优势(什么叫json)
-
现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...
- PostgreSQL JSON 类型:处理结构化数据
-
PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...
- JavaScript:JSON、三种包装类(javascript 包)
-
JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...
- Python数据分析 只要1分钟 教你玩转JSON 全程干货
-
Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...
- 比较一下JSON与XML两种数据格式?(json和xml哪个好)
-
JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)