2015.11.14

jQuery学习笔记

很多时候,都会很头疼如何选择一个或几个HTML里的元素,下面是一些最基本的用法:

jQuery 元素选择器 
$(this) 当前 HTML 元素

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

$("ul li:first") 每个 <ul> 的第一个 <li> 元素

$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

$("p:first") 第一个 <p> 元素

$("tr:odd") 所有奇数 <tr> 元素

$("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)

$("ul li:lt(3)") 列出 index 小于 3 的元素

$("input:not(:empty)") 所有不为空的 input 元素

$(":header") 所有标题元素 <h1><h2>...

$(":contains(‘W3School‘)") 包含文本的所有元素

jQuery 属性选择器 
$("[href]") 选取所有带有 href 属性的元素。

$("[href=‘#‘]") 选取所有带有 href 值等于 "#" 的元素。

$("[href!=‘#‘]") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$=‘.jpg‘]") 选取所有 href 值以 ".jpg" 结尾的元素。

$(":checked") 所有被选中的 input 元素

jQuery CSS 选择器 
$("p").css("background-color","red");

更高级的请参照这里: 
http://w3school.com.cn/jquery/jquery_ref_selectors.asp

jQuery 名称冲突(这个还是挺好玩的):

var jq=jQuery.noConflict(),用jq来代替 $ 符号。

(当 HTML 文档就绪可用) 
$(selector).click(function) 被选元素的点击事件 
$(selector).dblclick(function) 被选元素的双击事件 
$(selector).focus(function) 被选元素的获得焦点事件 
$(selector).mouseover(function) 被选元素的鼠标悬停事件

更多事件,请参照: 
http://w3school.com.cn/jquery/jquery_ref_events.asp

hide() 
show() 
slideToggle()来回显示=显示/隐藏 
fadeTo("slow",0.25)后面加速度和程度 
fadeOut() 
fadeIn()(其中fadeIn需要把要显示的内容display:none) 
slideDown(其中slideDown需要把要显示的内容display:none) 
slideUp 
animate({width:300},"slow");参数是{属性:值},"速度" 
也可以传多个参数,比如: 
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"},3000); 
属性包括:(位置不变)width,length,(运动型)left,top,fontSize 
其中都可以加数字,表示毫秒数

注:HTML 元素默认是静态定位,且无法移动。

如需使元素可以移动,请把 CSS 的 position 设置为 relative 或 absolute。

可以设置一个效果结束之后再执行下一个函数,如下: 
$("p").hide(1000,function(){ 
alert("The paragraph is now hidden"); 
});

$("p").html("Google");html() 函数改变所匹配的 HTML 元素的内容(innerHTML)。

$("p").append(" Google");在p标签后面加上Google,也可以写<b>Google</b>(在p标签里面)跟prepend用法相同

$("p").after(" Google.");在p标签后面加上Google,(在p标签外面)

还有几个常用的:addClass()添加类;remove()移除元素;wrap()把匹配的元素用指定的内容或元素包裹起来;val()设置或返回匹配元素的值。 
更多文档方法,请参阅: 
http://w3school.com.cn/jquery/jquery_ref_manipulation.asp

jQuery CSS: 
$("p").css("background-color","yellow"); 
$("p").css({"background-color":"yellow","font-size":"200%"}); 
获得id为abc的width属性的css 
$("#abc").html($(this).css("width"));

定义高度: 
$("#abc").height("200px"); 
$("#abc").width("200px");

导入txt里面的内容 
$(‘#abc‘).load(‘/jquery/test1.txt‘) 
比较常用的Ajax技术: 
$(selector).load(url,data,callback) 把远程数据加载到被选的元素中 
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中 
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据 
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据 
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据 
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件

时间: 2024-08-06 14:52:00

2015.11.14的相关文章

Hadoop自测题及参考答案(持续更新中--2015.6.14)

单选题 1.与其他几项不同的是 A. Mesos B. Mongodb C. Corona D. Borg E. YARN 注:其他几项都是资源统一管理系统或者资源统一调度系统,而 Mongodb一种非关系型数据库. 2.[java基础] 以下不属于线程安全的数据结构是 A. HashMap B. HashTable C. CopyOnWriteArrayList D. ConcurrentHashMap 3.hadoop2.x采用什么技术构建源代码 A. ant B. ivy C. maven

11.14 Daily Scrum

通过一天的努力,大家的任务基本已经完成,主界面的功能也日趋完善,后续的数据库处理和软件搜索等工作也已经开始陆续开展,到目前一共出现了三个问题急待解决,一是我们的燃尽图工作开展较晚,导致了大量已经展开的工作出现无法记录的情况,二是数据库开展的方面出现了不少的问题,由于我们才刚刚开始学习数据库的基本知识,有许多问题还没有得到解决,我们的方案是通过实例学习掌握数据库的基本技能.三是工作难题越来越多,工作量越来越大,有很多问题悬而不决,只有通过团队的合作意识的不断深入,分工的具体化的不断加深,这些问题就

2015.11.06 学习Ubuntu下常用命令

2015.11.06 学习Ubuntu下常用命令 1.关闭防火墙:ufw disable 2.开启防火墙:ufw enable 3.防火墙状态:ufw status 4.查看占用的端口:#lsof -i 5.查看某一个端口:#lsof -i:8080  或者是: #netstat -apn|grep 8080————接着:#ps -aux|grep 进程号 6.结束占用端口的进程:#killall 进程名 7.自己写一遍,记得牢!

PCB设计软件CadSoft Eagle Professional v7.5 Multilingual +DownStream Products 2015.11

PCB设计软件CadSoft Eagle Professional v7.5 Multilingual Win64 1CDCadSoft Eagle Professiona是一款简单易用的印刷电路板设计软件,其中包含原理图编辑器.PCB编辑 器和自动布线器三个模块,方便设计者更方便操作.CadSoft Eagle Professiona支持中文版 DownStream Products 2015.11 1CD业界领先的PCB后处理解决方案CadSoft.Eagle.Professional.v7

分布式系统一周技术动态 2015.11.22

分布式系统实践 1. 直观理解paxos http://drmingdrmer.github.io/pdf/paxos-slide/paxos.pdf 要点: paxos协议一直以难以理解著称, 以至于该论文发表10年后才被人们认识到重要性, 这篇文章通过具体的例子来阐述paxos协议, 让人感觉到paxos协议不是发明出来的, 而是演化而来的, 让paxos协议不再那么难以理解了. 2. NoSQL数据库模型 http://darkhouse.com.cn/blog/4?hmsr=toutia

我关注的一周技术动态 2015.11.15

分布式系统实践 1. 一致性哈希算法 http://www.javaranger.com/archives/1781?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io 要点: 一致性hash算法是解决分布式系统数据划分的有效手段, 解决了传统hash算法在机器扩容时需要大量移动数据的问题. 这篇文章对一致性hash算法做了简要的介绍, 如果你还不了解一致性hash算法, 那么请读读这篇文章吧 2. 巧用CAS解决数据一致

2015.11.04 学习 Ubuntu下安装gocode

2015.11.04 学习 Ubuntu下安装gocode 1.go get github.com/nsf/gocode,如果不成功 2.网页http://github.com/nsf/gocode,下载包,然后解压,解压后的文件名为gocode-master,修改为gocode. 3.复制gocode文件夹到go的安装目录~/go/github.com/nsf/gocode,(没有的话自行创建) 4.然后命令行执行go install github.com/nsf/gocode.确保安装目录的

2015.11.02 学习 Ubuntu下安装gosublime插件及其配置

2015.11.02 学习 Ubuntu下安装gosublime插件及其配置 1.Ctrl+shift+P 打开package control 输入pcip 回车 2.出现的框中输入gosublime,回车 3.preferences---package setting--gosublime--setting default 打开后在env{}中添加GOROOT和GOPATH 4.保存后全部复制到preferences---package setting--gosublime--setting

http://blog.rainy.im/2015/11/25/extract-color-themes-from-images/

许多从自然场景中拍摄的图像,其色彩分布上会给人一种和谐.一致的感觉:反过来,在许多界面设计应用中,我们也希望选择的颜色可以达到这样的效果,但对一般人来说却并不那么容易,这属于色彩心理学的范畴(当然不是指某些伪神棍所谓的那种).从彩色图像中提取其中的主题颜色,不仅可以用于色彩设计(参考网站:Design Seeds),也可用于图像分类.搜索.识别等,本文分别总结并实现图像主题颜色提取的几种算法,包括颜色量化法(Color Quantization).聚类(Clustering)和颜色建模的方法(颜