jquery与javescript的区别

Posted 终极用户

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery与javescript的区别相关的知识,希望对你有一定的参考价值。

一.找元素:

<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>
</html>

 

  1.id

      javescript:var a = document.getElementById("aa");

      jquery:    var  a = $("#aa");

 

   2.class

      javescript:var a = document.getElementsByClassName("a1");

      jquery:  var a = $(".a1");

 

  3.name

      javescript:var a = document.getElementsByName("uid");

      jquery:    没有专门的方法

            var a = $("div");

            var a = $("[bs=1]");

二.操作内容:

  1.javescript:

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

  2.jquery:

//非表单元素
  alert(a.text());
  a.text("bbbbb");
  alert(a.html());
//表单元素
 a.val("hello");
View Code

三.操作属性

  1.javescript:

a.setAttribute("test","test");
a.removeAttribute("test");
alert(a.getAttribute("value"));
View Code

  2.jquery:

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"));
View Code

四.操作样式:

  1.javescript:

a.style.fontSize = "30px";
alert(a.style.color);

  2.jquery:

a.css("background-color","green");
alert(a.css("width"));

五.统一操作:

  1.javescript:

var d = document.getElementsByClassName("a1");
for(var i=0;i<d.length;i++)
{
    d[i].style.fontSize = "30px";
}

  2.jquery:

$(".a1").css("font-size","30px");
$(".ck").prop("checked",true);

 

以上是关于jquery与javescript的区别的主要内容,如果未能解决你的问题,请参考以下文章

JaveScript流程控制(JS知识点归纳四)

javescript定时器demo

Visual Studio 2012-2019的130多个jQuery代码片段。

jQuery应用 代码片段

很实用的JQuery代码片段(转)

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面