JavaScript-jQuery笔记
2017-02-11 01:22
573 查看
一.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']" 4000 )复合属性选择器,匹配有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
相关文章推荐
- JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
- [原]Java程序员的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)
- [Javascript - JQuery - Plugin] Flexigrid 使用笔记(一)
- XMPP高级编程---使用Jquery和Javascript学习笔记二
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
- [原]Java程序员的JavaScript学习笔记(8——jQuery选择器)
- Java程序员的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)
- javascript及php笔记:自己动手写一个ajax异步上传文件的jquery插件
- Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)
- jQuery学习笔记一:你必须知道的JavaScript知识
- 【代码笔记】HTML+CSS+JAVAScript+jQuery滑过图标下滑列表
- Java程序员的JavaScript学习笔记(8——jQuery选择器)
- [原]Java程序员的JavaScript学习笔记(11——jQuery-在“对象”层面扩展)
- javascript笔记 --- jQuery
- javascript笔记——jquery.each中使用continue和break的方式
- JQuery笔记:JQuery和JavaScript的联系与区别
- JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
- Java程序猿的JavaScript学习笔记(10—— jQuery-在“类”层面扩展)
- 前端学习笔记(JQuery+JavaScript)
- Java程序员的JavaScript学习笔记(11——jQuery-在“对象”层面扩展)