JavaScript-jQuery笔记

一.Dom对象和JQuery对象相互转换

Dom对象代表HTML元素(标签)对象,
jQuery对象是包装DOM对象产生的对象,
jQuery不能用DOM方法,同理DOM也不能用jQuery方法。

1).Dom对象转为JQuery对象  
    var $jQ = $(document.getElementById("username"));
    alert($jQ.val());

2).JQuery对象转为Dom对象
    // 1.通过[index]转换
    var dom = $("#id1")[0];
    alert(dom.value);
    // 2.通过get(index)转换
    var dom = $("#id2").get(0);
    alert(dom.value);

二.选择器

1).基本选择器

$("div") 匹配名为"div"的元素       
$("#one") 匹配id属性值为"one"的元素      
$(".two") 匹配class属性值为"two"的元素           
$("*")    匹配所有元素
$("div, #one, .two") 匹配多个选择器合并结果

2).层次选择器

$("ancestor descendant")匹配后代元素      
$("parent > child)  匹配子元素       
$("prev + next")    匹配之后紧接元素    
$("prev ~ siblings")匹配之后同辈元素    
$("p").siblings("siblings")匹配所有同辈元素 

三.过滤选择器

1).基础过滤器

$("div:first")匹配找到的第一个元素        
$("div:last")匹配找到的最后一个元素        
$("div:not(#one)")匹配id不为one的div元素
$("div:even") 匹配索引值为偶数的div元素(从0开始)      
$("div:odd")  匹配索引值为奇数的div元素(从0开始)      
$("div:eq(0)")匹配索引值等于0的div元素(从0开始)      
$("div:gt(0)")匹配索引值大于0的div元素(从0开始)  
$("div:lt(2)")匹配索引值小于2的div元素(从0开始)      
$(":header")匹配标题元素,如h1, h2, h3等
$(":animated")匹配正在执行动画的元素

2).内容过滤器

$("div:contains('xx')")匹配含有给定文本的元素      
$("div:empty")匹配不含子元素或者文本的空元素       
$("div:has(p)")匹配含有p元素的div元素        
$("div:parent")匹配含有子元素或者文本的元素

3).可见过滤器

$("div:hidden")匹配不可见元素,如在css中display:none和<input type="hidden"/>
$("div:visible")匹配可见元素

4)属性过滤器

$("div[id]")匹配有id属性的div元素
$("div[id='id2']")匹配有id属性值为id2的div元素
$("div[id!='id2']")匹配没有id属性或id属性值不为id2的div元素,等价于div:not([id='id2'])
$("div[id^='i']")匹配有id属性值以i开头的div元素
$("div[id$='2']")匹配有id属性值以2结束的div元素
$("div[id*='d']")匹配有id属性值包含d的div元素
$("div[id][name$='e']")复合属性选择器,匹配有id属性且name属性值以e结尾的div元素

5)子元素过滤器

$("div :nth-child(index/even/odd)")匹配div元素下的第i个子元素(从1开始)/奇偶元素
    注意: div后必须有空格,才能匹配子元素   
$("div p:first-child") 匹配div元素的第一个p元素   
$("div :last-child")匹配div元素的最后一个子元素 
$("div :only-child")div元素只有一个子元素,才会被匹配!

6).表单属性过滤器

$("input:enabled")匹配可用的input元素
$("input:disabled")匹配不可用的input元素
$("input:checked")匹配被选中的input元素(复选框/单选框等,不包括select中option)
$("select option:selected")匹配被选中的option元素

7).表单过滤器

$(":input")匹配所有表单元素,如input/select/textarea元素 
$(":text")匹配的单行文本框元素
$(":password")匹配密码框元素
$(":radio")匹配单选按钮元素
$(":checkbox")匹配复选框元素
$(":submit")匹配提交按钮元素

四.操作Html/Css

1).内部插入

append(content) 在被选元素内部结尾插入content元素
appendTo(content) 将被选元素插入到content元素内部结尾
prepend(content) 在被选元素内部开头插入content元素
prependTo(content) 将被选元素插入到content元素内部开头

2)外部插入

after(content) 在被选元素后插入content元素
insertAfter(content) 将被选元素插入到content元素后
before(content) 在被选元素前插入content元素
insertBefore(content) 将被选元素插入到content元素前

3)操作属性

attr(..,..) 增改查
removeAttr(..) 删
val(..)
    1).设置/获取表单value属性
    2).传入function(index, value)参数
    2).选中select/checkbox/radio的选项

3)操作文本

text(..); 纯文本内容
html(..); html内容

4)创建元素

$("<input />")

5)删除元素

remove() 删除所选元素(包括后代元素)
empty() 清空元素所有后代(包括文本但不包含属性).

6)克隆节点

clone(true)(true表明要复制事件)

7)替换节点

replaceWith()
replaceAll()

8)样式操作

addClass()追加class属性
removeClass()移除class属性
toggleClass()切换class属性
hasClass()判断是否含有某个class属性
css() 设置或返回一个或多个样式属性
height() 被选元素的宽度
width() 被选元素的高度

9)事件

$().ready() 页面加载完成后执行
click() 点击元素事件
blur() 元素失去焦点
focus() 元素获得焦点

10)查找

children() 所有子元素(不考虑后代元素)
next()     后面紧邻同辈元素
prev()     前面紧邻同辈元素
siblings() 所有同辈元素    
parent()   父元素

简书: http://www.jianshu.com/p/cff6b507ef20
CSDN博客: http://blog.csdn.net/qq_32115439/article/details/54978867
GitHub博客:http://lioil.win/2017/02/10/JQuery.html
Coding博客:http://c.lioil.win/2017/02/10/JQuery.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,794评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,050评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,587评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,861评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,901评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,898评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,832评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,617评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,077评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,349评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,483评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,199评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,824评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,442评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,632评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,474评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,393评论 2 352

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,649评论 18 139
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,376评论 0 44
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,581评论 0 11
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,643评论 18 503
  • 丛林百鸟舞东风,剪燕翱翔捕害虫。倥偬双飞衔草泥,只为梁上筑丽宫。(平声起,首句入韵。)
    e4230d735f98阅读 334评论 0 0