1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <!--引入JQUERY包-->
  6. <script src="../jquery-1.11.2.min.js"></script>
  7.  
  8. <style type="text/css">
  9. #a1{
  10. 	color:red;
  11. 	}
  12. .aa{ width:100px; height:100px; background-color:#39F}
  13. </style>
  14.  
  15. <title>无标题文档</title>
  16. </head>
  17.  
  18. <body>
  19.  
  20. <div id="a1" style="width:100px; height:200px;">11</div>
  21.  
  22. <div class="aa" bs="1">aaaa</div>
  23. <div class="aa" bs="2">bbbbb</div>
  24. <div class="aa" bs="3">ccccc</div>
  25.  
  26. <div name="cc"></div>
  27. <div bs="1"></div>
  28. <input type="text" id="p1" />
  29. <input type="button" id="b1" value="挂事件" />
  30. <input type="button" id="b2" value="移除事件" />
  31. <script type="text/javascript">
  32.  
  33. 	//JS
  34. 	//根据ID取元素,取到的是具体的元素
  35. 	var a = document.getElementById("p1");
  36. 	//根据CLASS取
  37. 	var a = document.getElementsByClassName("aa");
  38. 	//根据标签名取
  39. 	var a = document.getElementsByTagName("div");
  40. 	//根据name取
  41. 	var a = document.getElementsByName("cc");
  42. 	alert(a); 
  43.  
  44. 	//操作元素
  45. 	//操作内容
  46. 		//非表单元素
  47. 		a.innerText = "hello";
  48. 		a.innerHTML = "<span style='color:red'>world</span>";
  49. 		//表单元素
  50. 		a.value = "hello";
  51. 	//操作属性
  52. 		a.setAttribute("bs","1");
  53. 		a.getAttribute("bs");
  54. 		a.removeAttribute("bs");
  55. 	//操作样式
  56. 		a.style.color = red;
  57.  
  58. 	//三个DIV隐藏
  59. 	var a = document.getElementsByClassName("aa");
  60.  
  61. 	for(var i=0;i<a.length;i++)
  62. 	{
  63. 		a[i].style.display = "none";
  64. 	}
  65.  
  66. 	//事件
  67.  
  68. 	/**************************************************/
  69.  
  70. 	//Jquery
  71. 	//根据ID找元素,取到的是JQUERY对象
  72. 	var b = $("#a1");
  73.  
  74. 	//根据CLASS取
  75. 	var b = $(".aa");
  76.  
  77. 	//根据标签名取
  78. 	var b = $("div");
  79.  
  80. 	//根据属性筛选
  81. 	var b = $("[name=aa]");
  82.  
  83. 	//操作元素
  84. 	//操作内容
  85. 		//非表单元素
  86. 		b.text();
  87. 		b.html();
  88. 		//表单元素
  89. 		b.val();
  90. 	//操作属性
  91. 		b.attr("bs","1");
  92. 		b.attr("bs");
  93. 		b.removeAttr("bs");
  94. 	//操作样式
  95. 		alert(b.css("color"));
  96. 		b.css("font-size","50px");
  97.  
  98. 	alert(b[0]);  //取jquery对象用eq()取元素本身用[]
  99.  
  100. 	//隐藏三个元素
  101. 	$(".aa").css("display","none");
  102.  
  103. 	//Jquery【加】事件
  104. 	//页面加载完成
  105. 	$(document).ready(function(e) {
  106.  
  107. 		//给a1加点击
  108. 		$("#a1").click(function(){
  109. 				alert('aa');
  110. 			})
  111. 		//给class为aa的所有元素加事件
  112. 		$(".aa").click(function(){
  113. 				//alert($(this).attr("bs"));
  114. 				$(".aa").css("background-color","#39F");
  115. 				$(this).css("background-color","red");
  116. 			})
  117.  
  118. 		//第二种方式【挂】事件
  119. 		$("#b1").click(function(){
  120.  
  121. 				$("#a1").bind("click",function(){
  122.  
  123. 					alert("我是挂上的事件");
  124.  
  125. 					});
  126.  
  127. 			})
  128. 		$("#b2").click(function(){
  129.  
  130. 				$("#a1").unbind("click");
  131. 			})		
  132.  
  133.     });
  134.  
  135. </script>
  136.  
  137. </body>
  138. </html>

11.8 开课二个月零四天 （Jquery）的更多相关文章

  1. 11.8 开课二个月零四天 （Jquery取属性值，做全选，去空格）

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. 11.11 开课二个月零七天（ajax和bootstrp做弹窗）

    1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  3. 11.10 （下午）开课二个月零六天（ajax验证用户名，ajax调数据库）

    用ajax验证用户名是否可用 testuid.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  4. 11.10 （上午）开课二个月零六天（ajax基础，ajax做登录）

    test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  5. 11.7 （下午）开课二个月零三天 （PDO）

    PDO访问方式操作数据库   mysqli是专门访问MySQL数据库的,不能访问其它数据库.PDO可以访问多种的数据库,它把操作类合并在一起,做成一个数据访问抽象层,这个抽象层就是PDO,根据类操作对 ...

  6. 测开之路一百零四：jquery操作样式

    jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...

  7. 2、JavaScript 基础二 （从零学习JavaScript）

     11.强制转换 强制转换主要指使用Number.String和Boolean三个构造函数,手动将各种类型的值,转换成数字.字符串或者布尔值. 1>Number强制转换 参数为原始类型值的转换规 ...

  8. 【阿里聚安全·安全周刊】阿里双11技术十二讲直播预约|AWS S3配置错误曝光NSA陆军机密文件

    关键词:阿里双11技术十二讲直播丨雪人计划丨亚马逊AWS S3配置错误丨2018威胁预测丨MacOS漏洞丨智能风控平台MTEE3丨黑客窃取<权利的游戏>剧本|Android 8.1   本 ...

  9. 第四百零四节，python网站第三方登录，social-auth-app-django模块，

    第四百零四节,python网站第三方登录,social-auth-app-django模块, social-auth-app-django模块是专门用于Django的第三方登录OAuth2协议模块 目 ...

随机推荐

  1. Android网络编程系列之Volley总结

    前言 Volley的中文翻译为“齐射.并发”,是在2013年的Google大会上发布的一款Android平台网络通信库,具有网络请求的处理.小图片的异步加载和缓存等功能,能够帮助 Android AP ...

  2. springboot 学习之路 17(webflux 入门 (1))

    Webflux: webflux是在springboot2系列引入的技术:补充一些概念: 1> Reactive Streams 是 JVM 中面向流的库标准和规范: 处理可能无限数量的元素 按 ...

  3. CentOS7安装mysql后无法启动服务，提示Unit not found

    首发日期: 2018-01-30 现象: 在centOS7中启动MySQL数据库提示: Failed to start mysqld.service: Unit not found [明明已经安装了, ...

  4. 【python】字典/dictionary操作

    字典(dictionary) 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值 key=>value 对用冒号:分割,每个键值对之间用逗号,分割,整个字典包括在花括号 {} 中 ...

  5. SQL Server 如何设置数据库的默认初始大小和自动增长大小

    我们在SQL Server中新建数据库的时候,可以选择数据库文件及日志文件的初始大小.自动增长大小和最大大小,如下图所示: 可以通过设置更改数据库初始大小.自动增长大小和最大大小: 但是其实在SQL ...

  6. windows环境下lib和dll的区别和联系详细

    https://blog.csdn.net/ghevinn/article/details/43759655 c++中共有两种库:1.LIB包含了函数所在的DLL文件和文件中函数位置的信息(入口),代 ...

  7. Dalvik指令备忘

    跳转指令 if-eq vx, vy, 目标 如果vx == vy注2,跳转到目标.if-ne vx,vy, 目标 如果vx != vy注2,跳转到目标. if-lt vx,vy, 目标 如果vx &l ...

  8. VS 代码整理插件推荐：CodeMaid

    一直在用,觉得很不错,其他插件基本上不用了,所以拿来记录并分享一下.CodeMaid 说明文档CodeMaid 下载安装不用说明了,使用看说明文档就好. CodeMaid和ReSharp类似,开源且免 ...

  9. SDN 第三次作业

    SDN 第三次作业 列举openflow1.0的12元组? 12元组 入端口(Ingress port) 源MAC地址(Ether Source) 目的MAC地址(Ether Des) 以太网类型(E ...

  10. Math.min() / Math.max() 使用方法

    首先弄懂apply 和 call 都是js函数自带的方法.区别如下: apply和call的用法只有一个地方不一样,除此之外,其他地方基本一模一样 1. a.call(b,arg1,arg2…) 2. ...