<!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. Sofware-Engineering Zero

    第一部分:结缘计算机 与大部分同学一样,也是刚刚进入大学才接触编程,在第一堂C语言课上敲下了第一行属于自己的代码""Hello World",然后在摸索中开始自己的Cod ...

  2. LeetCode 题解之Linked List Cycle II

    1.题目描述 2.问题分析 使用快慢指针方法判断链表是否有环,然后寻找环开始的节点. 3.代码 ListNode *detectCycle(ListNode *head) { if( head == ...

  3. 一次失败的生产系统中AlwaysOn AG切换经历

    14:25分左右,某数据库主副本服务器崩溃报错,在数据库无法接收SQL语句进行调整的情况下重启了主副本服务器. 由于服务器重启时间会比较长,为了保证主副本服务器重启期间数据库能正常进行写入,强制将主库 ...

  4. extends CakeRequest,重写is方法

    背景:Cakephp开发环境版本是2.3.8,服务器的cakephp版本是2.3.5,测试好的代码上传到服务器上后发现总爆如下的警告: Warning (2): strtolower() expect ...

  5. centos7 修改中文字符集

    CentOS 7字符集的问题与6有点区别,会出现下面问题,查看是中文,vi进入就变成乱码了 生产中修改配置文件   [root@ce1d2002a999 ~]# cat /etc/locale.con ...

  6. python的学习之路day7-socket网络编程

    python基础部分学习完了,时间也已经过了两个月左右,感觉没学到什么,可能是我学习之后忘记的太多了. 由于没钱买书,要是去培训就更没钱了,所以在网上找了一本书,感觉还不错,讲的比较好,比较详细. P ...

  7. Linux运维之——每日小技巧，谈进程与线程的区别

    线程是进程中执行运算的最小单位,是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,只拥有一点在运行中必不可少的资源,但它可与同属一个进程的其它线程共享进程所拥有的全部资源. ...

  8. ip 报文头

  9. Linux基础第一课——基础知识了解

    前言 发展历史 linus 林纳斯 赫尔辛基大学 在自己的笔记本上安上自己写的操作系统 基于Linux内核 Linux内核 也是基于unix内核开发出来 unix 不开源 只能军方和大学使用 Linu ...

  10. Spring之强制修改某个方法的行为（Arbitrary method replacement）

      A less commonly useful form of method injection than Lookup Method Injection is the ability to rep ...