js与jquery的用法

最新推荐文章于 2024-06-13 14:30:24 发布

akesuy0400

最新推荐文章于 2024-06-13 14:30:24 发布

阅读量72

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gaojunshan/p/6042735.html

版权

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />后面加上
   <script src="jquery-1.11.2.min.js"></script>

<body>
<div id="a1" style="width:100px; height:200px;">11</div>

<div class="aa" bs="1">aaaa</div>
<div class="aa" bs="2">bbbbb</div>
<div class="aa" bs="3">ccccc</div>

<div name="cc"></div>
<div bs="1"></div>
<input type="text" id="p1" />
<input type="button" id="b1" value="挂事件" />
<input type="button" id="b2" value="移除事件" />
<script type="text/javascript">

	//JS
	//根据ID取元素,取到的是具体的元素
	var a = document.getElementById("p1");
	根据CLASS取
	var a = document.getElementsByClassName("aa");
	//根据标签名取
       var a = document.getElementsByTagName("div");
	//根据name取
	var a = document.getElementsByName("cc");	
	alert(a); 
	
	//操作元素
	//操作内容
		//非表单元素
		a.innerText = "hello";
		a.innerHTML = "<span style='color:red'>world</span>";
		//表单元素
		a.value = "hello";
	//操作属性
		a.setAttribute("bs","1");
		a.getAttribute("bs");
		a.removeAttribute("bs");
	//操作样式
		a.style.color = red;
	
	//三个DIV隐藏
	var a = document.getElementsByClassName("aa");
	
	for(var i=0;i<a.length;i++)
	{
		a[i].style.display = "none";
	}
	
	//事件
	
	//Jquery
	//根据ID找元素,取到的是JQUERY对象
	var b = $("#a1");
	
	//根据CLASS取
	var b = $(".aa");
	
	//根据标签名取
	var b = $("div");
	
	//根据属性筛选
	var b = $("[name=aa]");
	
	//操作元素
	//操作内容
		//非表单元素
		b.text();
		b.html();
		//表单元素
		b.val();
	//操作属性
		b.attr("bs","1");
		b.attr("bs");
		b.removeAttr("bs");
	//操作样式
		alert(b.css("color"));
		b.css("font-size","50px");
	 
	alert(b[0]);  //取jquery对象用eq()取元素本身用[]
	
	
	//隐藏三个元素
	$(".aa").css("display","none");
	
	//Jquery【加】事件
	//页面加载完成
	$(document).ready(function(e) {
        
		/*//给a1加点击
		$("#a1").click(function(){
				alert('aa');
			})
		//给class为aa的所有元素加事件
		$(".aa").click(function(){
				//alert($(this).attr("bs"));
				$(".aa").css("background-color","#39F");
				$(this).css("background-color","red");
			})*/
			
		//第二种方式【挂】事件
		$("#b1").click(function(){
				
				$("#a1").bind("click",function(){
					
					alert("我是挂上的事件");
					
					});
			
			})
		$("#b2").click(function(){
			
				$("#a1").unbind("click");
			})
			
		
		
    });
	
	
	
</script>

</body>

转载于:https://www.cnblogs.com/gaojunshan/p/6042735.html

akesuy0400

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js与jquery的用法

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />后面加上 <script src="jquery-1.11.2.min.js"></script><body><div id="a1" style="width:100px; heigh...
复制链接

扫一扫