js与jquery的区别

Posted 2020-09-03 ▍凉城空巷°

使用JQERY时要在head里加

<script src="jquery-1.11.2.min.js"></script>

//js找元素

<div id="aa"></div>
<div class="a1"></div>
<div class="a1"></div>
<div class="a1"></div>
<span class="a1"></span>
<input type="text" name="uid" />

<script type="text/javascript">
//根据id查
var a = document.getElementById("aa");
alert(a);

//根据class查
var a = document.getElementsByClassName("");
alert(a);
//查找其中一个就在括号a里加[]，在中括号里填写要查找的相应的参数
</script>

//根据标签名查
document.getElementsByTagName("div");
alert(a);

//适用于input
document.getElementsByName("uid");
alert(a[0]);

//js操作内容

//非表单元素
<div id="aa"><span>aaaaaaa</span></div>

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

alert(a.innerText);  //文本
alert(a.innerhtml);  //HTML代码

//表单元素
<input type="text" name="uid" id="bd" value="aa" />

var a = document.getElementById("bd");

alert(a.value);
a.value="hello";  //获取值

//js操作属性

var a = document.getElementById("bd");

a.setAttribute("test","test");  //设置属性
a.removeAttribute("text");  //移除属性
alert(a.getAttribute("value"));  //获取属性

 

 

//jq找元素

<div id="aa"></div>
<div class="a1"></div>
<div class="a1"></div>
<div class="a1"></div>
<span class="a1"></span>

<script type="text/javascript">
//根据id查
var a = document.getElementById("aa");
alert(a);

//根据class查
var a = document.getElementsByClassName("");
alert(a);
//查找其中一个就在括号a里加.eq()，在中括号里填写要查找的相应的参数
</script>

 

//根据标签名查
var a = $("div");
alert(a);

 

//根据属性查找     不只是name
var a = $("[name=uid]");
alert(a);

//jq操作

 

//非表单元素
<div id="aa"><span>aaaaaaa</span></div>

var a = $("#aa");

alert(a.text());  //获取文本
alert(a.text("bbb"));  //设置文本
alert(a.html());  //获取html代码
alert(a.html("bbb"));  //设置html代码

 

//表单元素
<input type="text" name="uid" id="bd" value="aa" />

var a = $("#bd");

alert(a.val());
alert(a.val("hello"));  //获取值

//操作属性
var a = $("#bd");

a.attr("test","test");  //设置属性
a.removeAttr("test");  //移除属性
alert(a.attr("value"));  //获取属性

//prop的设置、移除方法

　a.prop("test","test");
　a.removeprop("test");
　alert(a.prop("test"));