jQuery基础
Posted ysdong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery基础相关的知识，希望对你有一定的参考价值。
1.jquery文件的引入，所有的js代码要写在下面那段代码下面。
<script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的，也要在其它引入的jquery文件上面-->
2.写jquery代码的位置
和js一样，jquery代码也是写在<script>开始和结束标签之间。
<script type="text/javascript">
</script>
jquery选取元素
1.根据id找元素
先在<body>里面写一个<div>
<div id="a1"></div>
（1）用js找，取到的是具体的元素。
var a = document.getElementById("a1");
alert(a);
（2）用jquery找，取到的是jquery对象。
var b = $("#a1");//用jquery找元素的写法,#也是代表根据id找。
alert(b);
alert(b[0]);//从对象里面取元素
2.根据class找元素
先先在<body>里面写2个<div>
<div class="aa"></div> <div class="aa"></div>
（1）用js找
var a = document.getElementsByClassName("aa");
alert(a);
（2）用jquery找
var b = $(".aa")
//alert(b);
//alert(b[0]);//取到第一个div
//alert(b[1]);//取到第二个div
alert(b.eq(0));//取jquery对象用eq()，取元素本身用[]。
3.根据标签名取元素
（1）用js找
var a = document.getElementsByTagName("div");
（2）用jquery找
var b = $("div");
alert(b);
4.根据name取
先先在<body>里面写1个<div>
<div name="cc"></div>
（1）用js找
var a = document.getElementsByName("cc");
（2）用jquery找
var b = $("[name=cc]");//根据属性筛选，只要是属性的，都可以找到。
//alert(b);
alert(b[0]);
jquery操作元素
1.操作内容
（1）非表单元素
<div id="a1">11</div>
var a = document.getElementById("a1");
//a.innerText = "hello";
a.innerhtml = "<span style=\'color:red\'>world</span>";
（2）表单元素
<input type="text" id="p1" />
var a = document.getElementById("p1");
a.value="hello";
2.操作元素
（1）非表单元素
赋值：
<div id="a1">11</div>
var b = $("#a1");
b.text("aaa")
//b.html("aaa")
取值：
var b = $("#a1");
alert(b.text());
//alert(b.html());
（2）表单元素
赋值
var b = $("#a1");
b.val("aaa")
取值
var b = $("#a1");
b.val();
3.操作属性
js操作属性
a.setAttribute("","");
a.setAttribute("");
a.removeAttribute("");
jquery操作属性
var b = $("#a1");
b.attr("bs","1");//添加
b.attr("bs");//获取bs属性的值
b.removeAttr("bs");//移除bs属性
4.操作样式
（1）js操作样式
js不能获取内嵌的属性，只能获取内联的。
a.style.color = red;
（2）jquery操作样式
jquery可以获取、设置内嵌的、外部的、内联的样式。
alert(b.css("width"));//获取样式
b.css("font-size","50px");//设置样式
隐藏3个div的做法
<style type="text/css">
.aa{ width:100px; height:100px; background-color:#0F0}<!--用内嵌的方式写属性-->
</style>
<div class="aa"></div> <div class="aa"></div> <div class="aa"></div>
（1）js的写法
var a = document.getElementsByClassName("aa");
for(var i=0;i<a.length;i++)
{
a[i].style.display = "none";
}
（2）jquery的写法
$(".aa").css("display","none");
jquery事件、挂事件、移除事件
<div id="a1">11</div> <div class="aa" bs="1">aaa</div> <div class="aa" bs="2">bbb</div> <div class="aa" bs="3">ccc</div> <input type="text" id="p1" /> <input type="button" id="b1" value="挂事件" /> <input type="button" id="b2" value="移除事件" />
//jquery加事件
$(document).ready(function(e) {//页面加载完成之后执行事件
//给a1加点击
/*$("#a1").click(function(){
alert(\'aa\');
})
//给class为aa的所有元素加事件
$(".aa").click(function(){
//alert(\'bb\');
//alert($(this).text());//取文本值。this点击哪一个就选取哪一个
//alert($(this).attr("bs"));//取属性值
$(".aa").css("background-color","#0F0");//先让所有的颜色变为原来的颜色
$(this).css("background-color","red");//点击哪一个背景颜色换成红色
})*/
//第二种方式挂事件
$("#b1").click(function(){//匿名函数
$("#a1").bind("click",function(){//bind表示挂事件
alert("我是挂上的事件");
})
$("#b2").click(function(){
$("#a1").unbind("click");//unbind移除事件
})
})
});
以上是关于jQuery基础的主要内容，如果未能解决你的问题，请参考以下文章
Visual Studio 2012-2019的130多个jQuery代码片段。
markdown 在WordPress中使用jQuery代码片段