js和jQuery对比
jQuery可以说是js的封装,大多数情况下jquery比js简单,它们两个可以相互写对方的里面,使用jquery需要导入jquery文件。
<script src="jquery-1.1.min.js"></script>
jquery文件名格式为,jquery-版本号[.min] .js 其中min表示压缩版
$在jquery中专门用来做选择,相当于选择器
1.页面加载初始化
jQuery:
//方法一
$(function(){
})
//方法二
$(document).ready(function(){
})
js:
window.οnlοad=function(){
}
2.通过id、name、className、TagName获取对象、
js:
var a = document.getElementById("XX"); //id
var b = document.getElementsByClassName("XX");//classname
var d = document.getElementsByTagName("XX"); //tagname
var c = document.getElementsByName(XX"); //name
jQuery:
var aj = $("#XX"); //id
var bj = $(".XX"); //classname
var cj = $("XX"); //tagname
var dj = $("[name='XX']"); //name
var ej = $("div.test"); //div中class为test的元素,Jquery可以使用选择器找对象.
3.操作内容
js:
(ps:a, aj为对象)
a.innerText; //非表单元素的取值,赋值是:a.innerText = "aaaa";
a.innerHTML; //非表单元素的取值,赋值是:a.innerHTML = "<a>123</a>"; 可以解析html标签
a.value; //表单元素的取值,赋值是:a.value = "aaaa";
jQuery:
aj.text(); //非表单元素的取值,赋值是:aj.text("aaaa");
aj.html(); //非标单元素的取值,赋值是:aj.html("<a>123</a>"); 可以解析html标签
aj.val(); //标签元素的取值,赋值是:aj.val("aaaa");
4.操作样式
js:
a.style.backgroundColor = red; //设置样式
a.style.color; //获取样式,只能获取内联样式,也就是写在标签里面的样式
jQuery:
aj.css("color","yellow"); //设置样式
aj.css("color"); //可以获取到内嵌式的样式属性
5.显示与隐藏
js:
a.style.display = ''; a.style.display = 'none';
jQuery:
$(a).show(); $(a).hide();
6.jQuery中的事件
$(".test").click(function(){
alert($(this).text());
});
$(".test").bind("click",function(){ //绑定事件,注意可以同时绑定多个
alert($(this).text());
});
$("#btn").click(function(){
$(".test").unbind("click"); //解除绑定事件
});
$("#add").click(function(){
$(".test").bind("click",function(){
alert($(this).text());
});