<!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. python 实现int函数

    拖了这么久,最终还是战胜了懒惰,打开电脑写了这篇博客,内容也很简单,python实现字符串转整型的int方法 python已经实现了int方法,我们为什么还要再写一遍,直接用不就好了?事实确实如此,但 ...

  2. JavaScript语法详解：运算符和表达式

    本文首发于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 我们在上一篇文章里讲到了JS中变量的概念,本篇文章讲一下运算符和表达式. 比 ...

  3. win10 安装microsoft.net framework3.5

    转载于:https://www.windows10.pro/win10-net-framework-3-5/ 之前手残不小心把microsoft.net framework3.5删了,结果导致Sql ...

  4. 全球首款完全开源的堡垒机，符合 4A 的专业运维审计系统Jumpserver

    Jumpserver是全球首款完全开源的堡垒机,是符合 4A 的专业运维审计系统. http://www.jumpserver.org https://github.com/jumpserver/ju ...

  5. Windows 下的文件被占用问题解决

    windows下,经常容易出现文件被其他程序占用的现象,令人十分头疼.更头疼的是,还看不到被谁占用. 实际上是有办法看到占用的进程的. 话不多说,以Win10为例: 1.打开资源监视器 a.直接程序栏 ...

  6. 【Alpha 冲刺】 12/12

    今日任务总结 人员 今日原定任务 完成情况 遇到问题 贡献值 胡武成 完成app端api编写 已完成 JAVA后端跨域访问没有处理(目前已解决),导致前端localhost请求失败而误以为自己操作失误 ...

  7. [python]pip 版本9.0.1升级到10.0.1故障解决办法

    问题背景: 在做android自动化时使用到第三方库uiautomator时,提示要安装,但安装该uiautomator库时提示当前的pip版本偏低,需要安装10.0.1版本方可.但在升级到升级到该版 ...

  8. jstl格式化日期

    <%@ page contentType="text/html" pageEncoding="GBK"%> <%@ page import=& ...

  9. 洛谷P1208

    #include <iostream>#include <algorithm>#include <cstdio>using namespace std; struc ...

  10. MySQL双主.md

    MySQL 双主配置 环境说明 系统 IP 主机名 mysql版本 CentOS 6.8 192.168.197.61 C6-node1 5.6.36 CentOS 6.8 192.168.197.6 ...