<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. asp.Net2.0中TextBox设置只读后后台获取不到值的解决方法

    http://www.cnblogs.com/yxyht/archive/2013/03/02/2939883.html   ASP.NET中TextBox控件设置ReadOnly="tru ...

  2. spidermark sensepostdata ntp_monlist.py

    试NTP 时间服务器用的,ntp_ip_enum.py,源码如下:#!/usr/bin/env python"""Basic script to pull address ...

  3. 生成一行html

    //压缩 一行html Regex regReplaceBlank = new Regex(">(\\s+)<", RegexOptions.IgnoreCase); ...

  4. rbd命令

    chen@admin-node:~$ rbd --help usage: rbd [-n <auth user>] [OPTIONS] <cmd> ... where 'poo ...

  5. java.lang.UnsupportedClassVersionError: Bad version number in .class file异常

    java.lang.UnsupportedClassVersionError: Bad version number in .class file异常 部署工程时也出现过因为版本不同引起的问题,那时我 ...

  6. Android开发常见问题系列之一：eclipse中adb.exe启动失败或者无法启动

    这种情况下大多数是因为存在kadb.exe在执行,或者adb.exe端口被占用. 1,检查是否存在kadb.exe程序正在执行 打开任务管理器,打开详细信息,按照字母顺序找到kadb.exe,结束进程 ...

  7. StringBuffer与StringBuilder有什么区别

    package String比较; /* * StringBuffer与StringBuilder有什么区别 * StringBuilder是JDK5增加的一个新类,功能几乎与StringBuffer ...

  8. 针对ajax执行后swiper特效无法执行解决方案

    ajax执行后重新绑定swiper事件.

  9. Oracle的Connect By理解

    connect by中的条件就表示了父子之间的连接关系 比如 connect by id=prior pid,但如果connect by中的条件没有表示记录之间的父子关系那会出现什么情况? 常见的,c ...

  10. [BS-30] 你真的会用storyboard开发吗？

    你真的会用storyboard开发吗?   随着苹果大屏手机的推出,苹果公司马上推出了屏幕适配的一些东西Constraints and Size Classes同时,在开发项目时候,是使用sb还是写代 ...