js与jquery的基本用法与区别

使用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"));  //获取属性

//js操作样式

//js例子
<style type="text/css">
#aa{ widte:100px; height:100px;}
</style>      //给div设置一个样式

<div id="aa" style="color:red"><span>aaaaa</span></div>

a.style.fontSize = "30px";  //把字体设置为30px
alert(a.style.width);  //js不能获取内嵌与外部样式只能获取内联的
alert(a.styke.color);

//js统一操作元素

//例子
<div class="a1">div1</div>
<div class="a2">div2</div>
<span class="a1" bs="1">span1</span>

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

//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"));  //获取值

//jq操作属性

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

//jq操作样式

//jq例子
<style type="text/css">
#aa{ widte:100px; height:100px;}
</style>   

<div id="aa" style="color:red"><span>aaaaa</span></div>

var a = $("aa");

a.css("background-color","green");  //把背景颜色设置为绿色
alert(a.css("a.width"));  //jq可以获取内嵌、外部样式、内联的

//jq统一操作元素

$(".a1").css("font-size","30px");

//jq点击事件

//例子  
<input type="checkbox" id="ck" />全选

<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />
<input type="checkbox" class="ck" />

$("#ck").click(function(){
        alert("aa")  //给一个元素添加事件

    })  //匿名函数

$(".ck").click(function(){
        alert("bb")  //给多个元素添加事件

    })

$("#ck").click(function(){
        alert($(this))  //$(this)选取自身元素

    })

//多选

$("#ck").click(function(){
        alert("ck").prop("checked",$(this)).prop("checked"));

); })

js与jquery的基本用法与区别

推荐阅读