jQuery学习-对象与选择器（锋利的jQuery）

本文介绍jQuery的基础用法，包括如何使用jQuery进行DOM操作、选择器的使用及示例代码。通过实际案例展示了如何利用jQuery简化JavaScript编程。

include in view/layouts/application.html.erb

  <%= javascript_include_tag 'jquery' %>
  <%= javascript_include_tag 'jquery_ujs' %>

gemfile

gem 'jquery-rails'

基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

DOM和jQuery对象

DOM(Document Obeject Model,文档对象模型),每一份DOM都可以表示成一棵树
这里写图片描述

DOM对象可以使用JavaScript中的方法，例：
var domOj = document.getElementById(“id”);//获取DOM对象
var OjHtml = domOj.innerHTML;//使用JavaSrcipt中的属性，innerHTML

jQuery对象
jQuery对象即通过jQuery包装DOM对象后产生的对象。
例：

$("#id").html();

jQuery对象无法使用DOM对象的任何方法，同理。

var $cr = $("#cr");//jQuery对象
var  cr = $cr[0];//DOM对象
//即jQuery对象转换成DOM对象，同理

var cr  = getElementById("cr");//DOM对象
var $cr = $(cr);//jQuery对象

jQuery选择器

css选择器

E{
  CSS规则;
}//标签选择器，以文档元素作为选择符

#ID{
  CSS规则;
}//ID选择器，以文档元素的唯一标识符ID作为选择符

E.className{
  CSS规则;
}//类选择器，以文档元素的class作为选择符

E1,E2,E3{
  CSS规则;
}//群组选择器，多个选择符应用同样的样式规则

E F{
  CSS规则;
}//后代选择符，元素E的任意后代元素F

*{
  CSS规则;
}//通配选择符，以文档的所以元素作为选择符

//子选择器
//即大于符号(>),用于选择指定标签元素的第一代子元素。如：
.food>li{
  border:1px solid red;
}//class名为food的子元素li

实例

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".one").css("color","red");
  });
});
</script>
<style>
div.one{
  width:110px;
  background-color:#aaa;
  font-size:15px;
}
div.mini{
  background-color:#bbffaa;
}

</style> 
</head>

<body>

<div class="one" id="one" title="test">
  id为one,class为one的div
   <div class="mini">class为mini</div>

</div>
<p>This is another paragraph.</p>
<button type="button">test</button>
</body>

</html>

检查某个元素是否存在，可使用以下方法：

if($("#tt").length>0){
  //do something
}//根据获取元素长度来庞端**重点内容**

if($("#tt")[0]){
  //转化成DOM对象来判断
}

jQuery选择器之基本选择器
基本选择器即最常用、最简单的选择器，通过元素id、class和标签名等来查找DOM元素。在网页中，id名称只能使用一次，class允许重复使用。

这里写图片描述

jQuery选择器之层次选择器
这里写图片描述

jQuery选择器之过滤选择器
这里写图片描述

jQuery选择器之内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上
这里写图片描述

jQuery选择器之表单选择器
这里写图片描述