浅谈 -- ♡ ‧₊˚ JS 与JQ的区别 ‧₊˚ ♡
jQuery是一个Javascript库,是对于ECMAScript、dom、bom的一个浅封装,让用户更方便操作。
让我们简单谈谈JS与JQ的区别吧!
♡ ‧₊˚ 定义 ‧₊˚ ♡
js是网页的脚本语言,js是语言.
jQuery是用js语言写出来的一个框架.
♡ ‧₊˚ 入口函数 ‧₊˚ ♡
JS:等到所有内容,以及我们的外部图片之类的文件加载完了之后,才会去执行。只能写一个入口函数。
jQUery:是在 html所有标签都加载之后,就回去执行。可以写多个。
-
// 原生JS与JQ入口函数的区别
-
// 原生JS入口函数
-
window.
onload =
function(
){
-
alert(
'我是入口函数1')
-
}
-
// 后面的会覆盖前面的
-
window.
onload =
function(
){
-
alert(
'我是入口函数2')
-
}
-
jQuery的入口函数
-
$(
function(
){
-
alert(
'我是入口函数1')
-
});
-
// 两个都会执行,依次弹出
-
$(
function(
){
-
alert(
'我是入口函数2')
-
});
♡ ‧₊˚ 创建DOM元素 ‧₊˚ ♡
JS:利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。
jQuery:使用$就可以直接创建DOM元素。
-
// 原生JS使用DOM去操作文本中的节点
-
var container =
document.
getElementById(
'container')
-
console.
log(container);
-
// 创建一个节点
-
var newP=
document.
createElement(
'p')
-
console.
log(newP);
-
// 给节点设置内容
-
newP.
innerHTML =
'我是一个大帅哥'
-
// 将节点添加到页面对应的结构中
-
container.
appendChild(newP)
-
-
-
// 使用JQ
-
$(
function(
){
-
// 创建一个div到body尾部
-
$(
'<div>我是一个div标签</div>').
appendTo(
'body')
-
})
♡ ‧₊˚ 获取DOM元素 ‧₊˚ ♡
-
// js:
-
document.
getElementById(
"elementId");
//返回一个元素,按元素的ID名称来访问
-
document.
getElementsByName(
"elementName");
// 返回一组元素,按元素的name名称来访问
-
document.
getElementsByTagName(
"tagName");
// 返回一组元素,按标签来访问
-
document.
getElementsByClassName(
"classname");
// 返回一组元素,按class来访问
-
-
// jquery:
-
// 通过id获取
-
$(
"#id").
event;
-
// 通过class获取,
-
$(.“css”).
event();
-
// 通过属性html标签获取
-
$(“p”).
event();
// 是选中所有的p标签元素
-
// 通过属性值获取,
-
$(“div[pig]”).
event()
// 是选中div的属性为pig的元素
-
$(
'div:first')
// 选中第一个div
-
$(
'div:last')
// 选中最后一个div
-
// event是对选中的元素的操作。
-
-
// $(“div.p1”)和 $(“div .p1”)的区别。
-
$(“div.
p1”)
// 是对所有div进行筛选,选出class="p1"的div。
-
$(“div .
p1”)
// 是选中div下面的class="p1"的元素,不是这个div
♡ ‧₊˚ 操作CSS样式 ‧₊˚ ♡
-
// JavaScript:
-
// 1.使用setAttribute设置class和style
-
document.
getElementById(
"first").
setAttribute(
"style",
"color:red");
-
// 2.使用.className添加一个class选择器
-
document.
getElementById(
"third").
className =
"san";
-
// 3.使用.style.样式直接修改单个样式。注意样式名必须使用驼峰命名法
-
document.
getElementById(
"four").
style.
fontWeight =
"900";
-
// 4.使用.style或.style.cssText添加一串行级样式:
-
document.
getElementById(
"five_times").
style =
"color: blue;";
//IE不兼容
-
document.
getElementById(
"six_times").
style.
cssText =
"color: yellow;font-size : 60px;";
-
-
// JQuery:
-
$(
"#div2").
css(
"color",
"yellow");
-
$(
"#div2").
css({
-
"color" :
"white",
-
"font-weight" :
"bold",
-
"font-size" :
"50px",
-
});