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

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

  1.  <head>
  2.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3.      <title>无标题文档</title>
  4.      <script src="jquery-1.11.2.min.js"></script>  //首先要引入jquery包
  5.      <style type="text/css">
  6.          #aa{ width:100px; height:100px;}
  7.      </style>
  8.  </head>
  9.  <body> /*举了几个例子*/
  10.  <div id="aa" style="color:red"><span>aaaaaa</span></div>
  11.  <div class="a1">div1</div>
  12.  <div class="a1">div2</div>
  13.  <span class="a1" bs="1">span1</span>
  14.  <input type="text" name="uid" id="bd" value="aa" />
  15.  </body>

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

  1.  <script type="text/javascript">
  2.      var a=document.getElementById("aa"); //获取ID
  3.      var a=document.getElementsByClassName("a1");//获取class
  4.      var a=document.getElementsByTagName("div");//找标签
  5.      var a=document.getElementsByName();//表单元素用的比较多
  6.  </script>

（2）jquery 找元素

  1.  <script type="text/javascript">
  2.  var a = $("#aa");
  3.  var a = $(".a1");
  4.  alert(a.eq(2)); //读取的是span的class
  5.  var a = $("div");
  6.  var a = $("[name=xx]");//如果是读取name值 可以直接赋值
  7.  </script>

2 操作内容

（1）javascript

  1.  
  1. var a = document.getElementById("aa")
  1. //非标单元素
  2. alert(a.innerText); //文本
  3. alert(a.innerHTML); //HTML代码
  4. //表单元素
  5. alert(a.value);
  6. a.value="hello";

（2）jquery

  1. var a=$("#aa")
  2. //非表单元素
  3. alert(a.text());
  4. a.text("bbbbb");  //直接更改
  5. alert(a.html());
  6. //表单元素
  7. a.val("hello");

3 操作属性

（1）javascript

  1. a.setAttribute("test","test"); //设置属性和属性值
  2. a.removeAttribute("test");
  3. alert(a.getAttribute("value"));

（2）jquery

  1. a.attr("test","test"); //设置属性和属性值
  2. a.removeAttr("test");//直接移除
  3. alert(a.attr("value"));
  4. a.prop("test","test");// 用prop 可以减少bug
  5. a.removeProp("test");
  6. alert(a.prop("test"));

4操作样式

（1）javascript

  1. a.style.fontSize = "30px";  //无法获取外部样式表
  2. alert(a.style.color);

（2）jquery

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

5 统一操作样式

（1）javascript

  1. var d = document.getElementsByClassName("a1"); //获取的是cLassname  是一个数组 要利用循环才能修改每一个class
  2. for(var i=0;i<d.length;i++)
  3. {
  4.     d[i].style.fontSize = "30px";
  5. }

（2）jquery

  1. $(".a1").css("font-size","30px"); //利用jquery可以直接修改
  2. $(".ck").prop("checked",true); //可以直接添加元素

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

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

  1.  <script src="jquery-1.11.2.min.js"></script>
  2.  <script type="text/javascript">
  3.  $("#ck").click(function() {
  4.  
  5.  //$(this); //获取自身
  6.  //$(this).prop("checked"); 返回值是true,或者false 点击的时候是true,移除的时候是false
  7.  
  8.  $(".ck").prop("checked",$(this).prop("checked"))
  9.  
  10.  })

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

  1.  <script src="jquery-1.11.2.min.js"></script>
  2.  <style type="text/css">
  3.  .aa{ width:100px; height:100px; float:left; background-color:green; margin:2px;}
  4.  </style>
  5.  </head>
  6.  
  7.  <body>
  8.  
  9.  <div class="aa"></div>
  10.  <div class="aa"></div>
  11.  <div class="aa"></div>
  12.  <div class="aa"></div>
  13.  
  14.  </body>

如图所示：流式布局

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

运用jquery来写

  1. //首先要引用jquery包，我就不写了 从网上下载就可以
  2.  
  3. <script type="text/javascript">
  4.  
  5. $(".aa").click(function(){
  6.     $(".aa").css("background-color","green"); //原本的都是绿色的
  7.     $(this).css("background-color","red"); //点击的这个方块变红色
  8.     })
  9.  
  10. </script>

效果如图所示：

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

  1. js基础知识温习：Javascript中如何模拟私有方法

    本文涉及的主题虽然很基础,在很多人眼里属于小伎俩,但在JavaScript基础知识中属于一个综合性的话题.这里会涉及到对象属性的封装.原型.构造函数.闭包以及立即执行表达式等知识. 公有方法 公有方法 ...

  2. 【jquery】基础知识

    jquery简介 1 jquery是什么 jquery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后 ...

  3. jquery选择器基础知识（复制w3c）

    jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...

  4. jQuery笔记——基础知识

    jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起 始的.而这 ...

  5. jquery选择器基础知识

    $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("di ...

  6. HTML DOM 基础知识，成为javascript晋级高手的必备手册

    一.DOM 简介,什么是 DOM? 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口. 标记语言,也称置标语言,是一种将文本( ...

  7. Canvas和SVG的基础知识，以及两者的区别(小白)

    首先我们来说一下Canvas是什么,它有什么作用以及它的知识点. Canvas是<HTML5>的新标签,它通常用于通过脚本(也就是JavaScript)来绘制图像.但是它本身并没有绘制能力 ...

  8. java基础知识2--String,StringBufffer,StringBuilder的区别

    String,StringBufffer,StringBuilder的区别 1.可变不可变方面 String类中使用字符数组保存字符串  ,final 修饰当然是不可变的,用String来操作字符串的 ...

  9. C#基础知识 结构与类的区别

    网上看到struct与class之间的区别,都写的很多,当然说的是对的,也很详细.不过我个人不喜欢照本宣科,还是要有自己的理解和认识,方便记忆. (前提:对于值类型与引用类型有一定的认识) 结构最重要 ...

随机推荐

  1. redhat5安装phantomjs

    Linux 64-bit Download phantomjs-2.1.1-linux-x86_64.tar.bz2 (22.3 MB) and extract the content. Note: ...

  2. centos 安装mysql 5.5.12

    1.安装gcc-c++  gcc make cmake编译器 2.安装ncurses 3.添加用户组 groupadd mysql useradd -r -g mysql mysql 4.安装 tar ...

  3. Activity的生命周期与加载模式——Activity的生命周期演示

    当Activity处于Android应用中运行时,它的活动状态由Android以Activity栈的形式管理.当前活动的Activity位于栈顶.随着不同应用的运行,每个Activity都有可能从活动 ...

  4. iOS oc和swift中协议的使用

    创建一个空的工程 在工程中我们新建一个类 继承与NSObject 定义一个协议‘ @protocol UpdateAlertDelegate <NSObject> //这里的红色字体就是我 ...

  5. Quercus

    其实,我不确定Quercus是否可以被认定为一门JVM语言:其次Quercus这个东东分开源版与商业版,开源版只能解释执行.而商业版能编译成Java字节码. 但我知道国内,阿里巴巴很早就在使用它,当然 ...

  6. Valgrind使用记录

    0.安装valgrind wget http://valgrind.org/downloads/valgrind-3.11.0.tar.bz2 tar xvf valgrind-3.11.0.tar. ...

  7. JSP中使用Taglib

    http://blog.163.com/jany_1016/blog/static/4604400620091112114127341/ http://blog.csdn.net/yuebinghao ...

  8. LinkedHashMap遍历

    第一种: Map map = new HashMap(); Iterator iter = map.entrySet().iterator(); while (iter.hasNext()) { Ma ...

  9. java基础概略总结

    /*************************************************/ String b=""; String c=""; // ...

  10. 学习篇之String（）

    // 3个特殊的引用类型:Boolean,Number,String var s1 = "some text"; ,); // me t ,); // me ,-); // so ...