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

　　

js与jquery的用法的更多相关文章

  1. JQuery之append和appendTo的区别，还有js中的appendChild用法

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

  2. JS和jQuery用法区别

    目录 JS和jQuery用法区别 外观区别 查找元素 操作标签 操作内容 操作属性 操作位置 操作样式 事件 JS和jQuery用法区别 外观区别 jQuery与JS最直观的区别就是外观上jQuery ...

  3. jquery.cookie用法详细解析，封装的操作cookie的库有jquery.cookie.js

    jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...

  4. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

  5. JS和JQuery的总结

    JS部分 一,  词法结构 区分大小 注意://单行  /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...

  6. jQuery $.each用法[转]

    jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...

  7. JS和JQuery总结

    目录目录    2js部分一.词法结构    1.区分大小写    2.注意   // 单行      /*  多行注释  */    3.字面量(直接量  literal)        12  / ...

  8. [转]Jquery Ajax用法

    原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源:   时间 ...

  9. JQuery datepicker 用法

    JQuery datepicker 用法   jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加 ...

随机推荐

  1. C++以对象管理资源

    先看下面一段代码: class Node {}; Node* CreateNode() { } void Solve() { Node *p=CreateNode(); //调用CreateNode函 ...

  2. Win8.1屏幕亮度自动调节关闭方法

    细心的朋友会发现,Win8.1系统的笔记本屏幕亮度有时候,会根据外界光线亮度以及温度自动调节屏幕亮度,尽管看似比较智能,但有时候我们并不希望笔记本屏幕亮度受光线影响,忽暗忽亮.如果我们希望Win8笔记 ...

  3. php课程---语句及函数

    语句:    一:分支语句        1.if(条件1){满足条件1执行}    2.if(条件1){满足条件1执行}else{不满足条件1执行}    3.if(条件1){满足条件1执行}els ...

  4. Oracle的自动统计信息不收集直方图的信息

    Oracle的自动统计信息不收集直方图的信息 在oracle9i中,默认的统计信息收集是不收集直方图信息的,也就是说默认的MOTHOD_OPT模式为FOR ALL COLUMNS SIZE 1 在10 ...

  5. Wordpress 标题设置

    使用标题格式:首页(网站标题 - 网站副标题),其他页面(页面标题 | 网站标题) 在后台找到头部文件head.php <?php wp_title('|', true, 'right'); e ...

  6. 录制简单的自动化测试工具SlikMobile初体验

    今天朋友推荐了款自动化测试工具SlikMobile,下载了个试用了下,感觉还是很容易入门和上手的,感觉和testin的工具差不多,跨平台,多语言支持,支持图片.文本和Native Class三种对象方 ...

  7. 简单粗暴下载Spring

    http://repo.springsource.org/libs-release-local/org/springframework/spring/4.3.3.RELEASE/(想要下载什么版本,替 ...

  8. JMeter学习-007-JMeter 断言实例之一 - 响应断言

    之前的文章中已经对如何录制 web 的请求进行了详细的描述,敬请参阅:JMeter学习-004-WEB脚本入门实战 同时,我们的手机应用(例如:京东.天猫.唯品会.携程.易迅 等等 App)所发出的请 ...

  9. mybatis父子表批量插入

    <!--父子表批量插入 --> <insert id="insertBatch" parameterType="com.niwopay.dto.beni ...

  10. Python开发【第九章】：线程、进程和协程

    一.线程 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务 1.t ...