首页 > 代码库 > JS与JQuery的一些对比

JS与JQuery的一些对比

2024-09-07 17:58:44   214人阅读

主页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
#aa{ width:100px; height:100px;}
</style>
</head>
<body>
<div id="aa" style="color:red"><span>aaaaaa</span></div>
<div class="a1">div1</div>
<div class="a1">div2</div>
<span class="a1" bs="1">span1</span>
<input type="text" name="uid" id="bd" value="aa" />
<input type="checkbox" id="ck" /> 全选
<br />
<br />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
</body>
<script type="text/javascript">

//下面单独写出此内容

</script>
</html>

下面进行一些简单的对比

js:

//找元素
var a = document.getElementById("aa");
alert(a);
var a = document.getElementsByClassName("a1");
alert(a[2]);
document.getElementsByTagName("div");
var a = document.getElementsByName("uid");
alert(a[0]);

JQuery：

//找元素
var a = $("#aa");
alert(a);
var a = $(".a1");
alert(a.eq(2));
var a = $("div");
var a = $("[bs=1]");
alert(a);

js:

//操作内容
//非标单元素
alert(a.innerText); //文本
alert(a.innerHTML); //HTML代码
//表单元素
alert(a.value);
a.value="hello";

JQuery：

//操作内容
//非表单元素
alert(a.text());
alert(a.html());
//表单元素
a.val("hello");

JS:

//操作属性
a.setAttribute("test","test");
a.removeAttribute("test");
alert(a.getAttribute("value"));

//操作样式
a.style.fontSize = "30px";
alert(a.style.color);

JQuery：

  • 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//操作属性
a.attr("test","test");
a.removeAttr("test");
alert(a.attr("value"));
a.prop("test","test");
a.removeProp("test");
alert(a.prop("test"));

a.prop("checked",true);
alert(a.prop("checked"));

//操作样式
a.css("background-color","green");
alert(a.css("width"));

JS:

//统一操作元素
var d = document.getElementsByClassName("a1");
for(var i=0;i<d.length;i++)
{
    d[i].style.fontSize = "30px";
}

JQuery：

//统一操作元素
$(".a1").css("font-size","30px");
$(".ck").prop("checked",true);
//事件
$("#ck").click(function(){
    
    //alert($(this));
    //$(this)选取自身元素
    
    $(".ck").prop("checked",$(this).prop("checked"));
    
    }) //匿名函数

 

JS与JQuery的一些对比


联系
我们