11月8日上午Jquery的基础语法选取元素操作元素加事件挂事件及移除事件
Posted 飘逸De精灵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了11月8日上午Jquery的基础语法选取元素操作元素加事件挂事件及移除事件相关的知识，希望对你有一定的参考价值。
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")
（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移除事件 }) }) });
以上是关于11月8日上午Jquery的基础语法选取元素操作元素加事件挂事件及移除事件的主要内容，如果未能解决你的问题，请参考以下文章