想到之前所学的javascript 我们会想到这几个方面：找元素； 操作内容； 操作属性；操作样式；统一操作元素；

jquery 也是从这几个方面来学习的。

 <head>

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

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

     <script src="jquery-1.11.2.min.js"></script>  //首先要引入jquery包

     <style type="text/css">

         #aa{ width:100px; height:100px;}

     </style>

 </head>

 <body> /*举了几个例子*/

 <div id="aa" style="color:red"><span>aaaaaa</span></div>

 <div class="a1">div1</div>

 <div class="a1">div2</div>

 <span class="a1" bs="1">span1</span>

 <input type="text" name="uid" id="bd" value="aa" />

 </body>

1 找元素：（1）javascript 找元素

 <script type="text/javascript">

     var a=document.getElementById("aa"); //获取ID

     var a=document.getElementsByClassName("a1");//获取class

     var a=document.getElementsByTagName("div");//找标签

     var a=document.getElementsByName();//表单元素用的比较多

 </script>

（2）jquery 找元素

 <script type="text/javascript">

 var a = $("#aa");

 var a = $(".a1");

 alert(a.eq(2)); //读取的是span的class

 var a = $("div");

 var a = $("[name=xx]");//如果是读取name值 可以直接赋值

 </script>

2 操作内容

（1）javascript



var a = document.getElementById("aa")


//非标单元素

alert(a.innerText); //文本

alert(a.innerHTML); //HTML代码

//表单元素

alert(a.value);

a.value="hello";




（2）jquery




var a=$("#aa")

//非表单元素

alert(a.text());

a.text("bbbbb");  //直接更改

alert(a.html());

//表单元素

a.val("hello");




3 操作属性


（1）javascript




a.setAttribute("test","test"); //设置属性和属性值

a.removeAttribute("test");

alert(a.getAttribute("value")); 




（2）jquery




a.attr("test","test"); //设置属性和属性值

a.removeAttr("test");//直接移除

alert(a.attr("value"));

a.prop("test","test");// 用prop 可以减少bug

a.removeProp("test");

alert(a.prop("test"));




4操作样式


（1）javascript




a.style.fontSize = "30px";  //无法获取外部样式表

alert(a.style.color);




（2）jquery




a.css("background-color","green");

alert(a.css("width"));  //这里是从外部样式表获得的，可以直接读出




5 统一操作样式


（1）javascript




var d = document.getElementsByClassName("a1"); //获取的是cLassname  是一个数组 要利用循环才能修改每一个class

for(var i=0;i<d.length;i++)

{

    d[i].style.fontSize = "30px";

}




（2）jquery




$(".a1").css("font-size","30px"); //利用jquery可以直接修改

$(".ck").prop("checked",true); //可以直接添加元素




下面是一个全选的例子，用jquery来写非常方便


当点击全选的时候  下面的选项都被选中，移除后，都不选中




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

 <script type="text/javascript">

 $("#ck").click(function() {

 //$(this); //获取自身

 //$(this).prop("checked"); 返回值是true,或者false 点击的时候是true,移除的时候是false

 $(".ck").prop("checked",$(this).prop("checked"))

 })






下面的例子是关于外部样式表的：




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

 <style type="text/css">

 .aa{ width:100px; height:100px; float:left; background-color:green; margin:2px;}

 </style>

 </head>

 <body>

 <div class="aa"></div>

 <div class="aa"></div>

 <div class="aa"></div>

 <div class="aa"></div>

 </body>




如图所示：流式布局


我想做一个效果，就是点击某一个方块的时候就让它变红色（其他的方块是绿色的）


运用jquery来写




//首先要引用jquery包，我就不写了 从网上下载就可以

<script type="text/javascript">

$(".aa").click(function(){

    $(".aa").css("background-color","green"); //原本的都是绿色的

    $(this).css("background-color","red"); //点击的这个方块变红色

    })

</script>




效果如图所示：
												


											
jquery 的基础知识，以及和Javascript的区别的更多相关文章
	

    
								
  1. js基础知识温习：Javascript中如何模拟私有方法
		
    本文涉及的主题虽然很基础,在很多人眼里属于小伎俩,但在JavaScript基础知识中属于一个综合性的话题.这里会涉及到对象属性的封装.原型.构造函数.闭包以及立即执行表达式等知识. 公有方法 公有方法 ...
    
		
    2. 
						
  2. 【jquery】基础知识
		
    jquery简介 1 jquery是什么 jquery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后 ...
    
		
    3. 
						
  3. jquery选择器基础知识（复制w3c）
		
    jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro")  ...
    
		
    4. 
						
  4. jQuery笔记——基础知识
		
    jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起 始的.而这 ...
    
		
    5. 
						
  5. jquery选择器基础知识
		
    $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("di ...
    
		
    6. 
						
  6. HTML DOM 基础知识，成为javascript晋级高手的必备手册
		
    一.DOM 简介,什么是 DOM? 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口. 标记语言,也称置标语言,是一种将文本( ...
    
		
    7. 
						
  7. Canvas和SVG的基础知识，以及两者的区别(小白)
		
    首先我们来说一下Canvas是什么,它有什么作用以及它的知识点. Canvas是<HTML5>的新标签,它通常用于通过脚本(也就是JavaScript)来绘制图像.但是它本身并没有绘制能力 ...
    
		
    8. 
						
  8. java基础知识2--String,StringBufffer,StringBuilder的区别
		
    String,StringBufffer,StringBuilder的区别 1.可变不可变方面 String类中使用字符数组保存字符串  ,final 修饰当然是不可变的,用String来操作字符串的 ...
    
		
    9. 
						
  9. C#基础知识 结构与类的区别
		
    网上看到struct与class之间的区别,都写的很多,当然说的是对的,也很详细.不过我个人不喜欢照本宣科,还是要有自己的理解和认识,方便记忆. (前提:对于值类型与引用类型有一定的认识) 结构最重要 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. AngularJs ui-router 路由的介绍
			
    AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...
    
			
    2. 
						
  2. weblogic 集群部署时上传jsp不更新问题
			
    在进行集群部署的时候,进行“源可访问性”设置的时候,要注意选择“我要使部署能够通过下列位置进行访问”: 前提是必须有共享存储:
    
			
    3. 
						
  3. WInform 创建一个简单的WPF应用
			
    (一)创建一个简单的WPF应用 首先,在这里我要说明的是:这里的例子,都是通过控制台程序来创建WPF应用,而非使用现成的WPF模版.因为WPF模版封装了创建WPF应用所需要的各种基本元素,并不利于我们 ...
    
			
    4. 
						
  4. nodejs 中使用 mocha + should + jscoverage 生成 单元测试覆盖率报告
			
    最近一直在做nodejs,而关于js的单元测试覆盖率网上资料比较少而且吧比较零散,我从网上找来一些资料整理一下分析给大家,希望大家可以少走弯路. 首先我是从windows环境下测试的,用到的工具有 m ...
    
			
    5. 
						
  5. SQL Server-索引故事的遥远由来，原来是这样的？
			
    前言 前段时间工作比较忙,每天回来也时不时去写有关ASP.NET Core的文章,无论是项目当中遇到的也好还是自学的也好都比较严谨的去叙述,喜欢分享,乐于分享这是我一直以来的态度,当然从中也会有些许错 ...
    
			
    6. 
						
  6. 访问 Neutron 外部网络 - 每天5分钟玩转 OpenStack（143）
			
    前面我们学习了位于不同 Neutron subnet 的 instance 可以通过 router 通信,今天开始讨论 instance 如何访问外部网络. 这里的外部网络是指的租户网络以外的网络.租 ...
    
			
    7. 
						
  7. C#进阶系列——使用Advanced Installer制作IIS安装包（一：配置IIS和Web.config）
			
    前言:大过年的,写篇文章不容易,还是给自己点个赞~~年前找了下.net安装包的制作方法,发现Visual Studio自带的制作工具使用起来非常麻烦,需要单独下载安装包,并且什么激活认证等等屁事相当麻 ...
    
			
    8. 
						
  8. UE4里的渲染线程
			
    记的上次看过UniRx里的源代码,说是参考微软的响应式编程框架,响应式编程里的一些理论不细说,只单说UniRx里的事件流里的事件压入与执行,与UE4的渲染线程设计有很多相同之处,如果有了解响应式编程相 ...
    
			
    9. 
						
  9. Javascript日期格式化指定格式的字符串实现
			
    代码部分 TypeScript /** * format a Date object * 将 Date 转化为指定格式的String * @param {Date} date 源日期对象 * @par ...
    
			
    10. 
						
  10. Java IO流学习总结三：缓冲流-BufferedInputStream、BufferedOutputStream
			
    Java IO流学习总结三:缓冲流-BufferedInputStream.BufferedOutputStream 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/ ...
    
			
    11.