jQuery学习-对象与选择器(锋利的jQuery)
来源:互联网 发布:linux配置javahome 编辑:程序博客网 时间:2024/06/06 05:39
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选择器之表单选择器
阅读全文
0 0
- jQuery学习-对象与选择器(锋利的jQuery)
- 学习笔记《锋利的jQuery》-jQuery选择器
- 锋利的jQuery(jQuery选择器)
- 《锋利的jQuery》学习笔记---第2章 jQuery选择器
- 锋利的jquery--CH2 选择器
- 《锋利的jQuery》二、jQuery的选择器
- 《锋利的jQuery》要点归纳(一) jQuery选择器
- 《锋利的jQuery》读书笔记第二章(jQuery选择器)
- 【锋利的JQuery】0x02 JQuery选择器
- 【锋利的jQuery阅读笔记】jQuery选择器
- 锋利的jquery读书笔记--jquery选择器
- 《锋利的jQuery》第二章、jQuery选择器
- 锋利的jQuery | jQuery选择器一览
- 锋利的jquery学习
- 锋利的Jquery——学习笔记(二)Jquery选择器
- 锋利的jQuery(第二版)学习笔记之一:选择器
- 锋利的jQuery学习笔记(三)————DOM对象和jQuery对象
- 锋利的jquery —— 选择器
- leetcode---triangle---dp
- POJ3363
- Ubuntu常用操作汇总与问题解决汇总
- 乙胺卮园劳挖诼倩部难乩乓写劳乩
- 基于Tensorflow+Python实现降噪自动编码器(DAE)
- jQuery学习-对象与选择器(锋利的jQuery)
- [bzoj-2049][Sdoi2008]Cave 洞穴勘测 题解
- 点击按钮显示多个框
- 如何向Vive Port中上传htc vive应用
- 2017沈阳网络赛 1008 HDU 6201 transaction transaction transaction(树形dp)
- TTTAttributedLabel 高度计算
- Hello
- hdu 6201 深度优先搜索
- MVP+Retrofit+RxJava简单事例