<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--引入JQUERY包-->

<script src="../jquery-1.11.2.min.js"></script>

<style type="text/css">

#a1{

	color:red;

	}

.aa{ width:100px; height:100px; background-color:#39F}

</style>

<title>无标题文档</title>

</head>

<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>

</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. 安卓基础之Get方式发送http请求

    本文参考作者:超超boy 链接:https://www.cnblogs.com/jycboy/p/post01.html 一.在android用Get方式发送http请求,使用的是java标准类. 主 ...

  2. Fiddler抓包使用教程-会话图标

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/72933882 本文出自[赵彦军的博客] 使用fiddler抓包时,会看到左侧按照顺 ...

  3. Kafka安装及使用

    zookeeper安装 下载地址:https://www.apache.org/dyn/closer.cgi/zookeeper/ 我这里下载的是zookeeper-3.4.13版本,下载后解压在E: ...

  4. JAVA内存管理 [转]

    首先我们要明白一点,我们所使用的变量就是一块一块的内存空间!!   一.内存管理原理:   在java中,有java程序.虚拟机.操作系统三个层次,其中java程序与虚拟机交互,而虚拟机与操作系统间交 ...

  5. Scala学习之路 （十）Scala的Actor

    一.Scala中的并发编程 1.Java中的并发编程 ①Java中的并发编程基本上满足了事件之间相互独立,但是事件能够同时发生的场景的需要. ②Java中的并发编程是基于共享数据和加锁的一种机制,即会 ...

  6. stl vector、红黑树、set、multiset、map、multimap、迭代器失效、哈希表(hash_table)、hashset、hashmap、unordered_map、list

    stl:即标准模板库,该库包含了诸多在计算机科学领域里所常用的基本数据结构和基本算法 六大组件: 容器.迭代器.算法.仿函数.空间配置器.迭代适配器 迭代器:迭代器(iterator)是一种抽象的设计 ...

  7. Node.js实战(八)之回调函数

    Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,Node 所有 API 都 ...

  8. VC++编译错误error C2065: “HANDLE”: 未声明的标识符及添加winbase.h后提示winbase.h(243): error C2146: 语法错误: 缺少“;”(在标识符“Internal”的前面)的解决办法

    问题描述: VC++程序编译时提示错误:error C2065: “HANDLE”: 未声明的标识符等众多错误提示,如下所示: error C2065: “HANDLE”: 未声明的标识符 error ...

  9. OpenCV——创建Mat对象、格式化输出、常用数据结构和函数（point，vector、Scalar、Size、Rect、cvtColor）

    创建Mat对象:

  10. nodeJS-使用buffer类处理二进制数据

    使用buffer类处理二进制数据 在客户端javascript脚本代码中,对于二进制数据并没有提供一个很好的支持.然后在nodejs中需要处理像TCP流或文件流时,必须要处理二进制数据.因此在node ...