欢迎使用CSDN-markdown编辑器
来源:互联网 发布:淘宝女装网店名字 编辑:程序博客网 时间:2024/06/06 16:51
jQuery概述
jQuery是一个JS函数库,用于简化DOM操作,屏蔽浏览器兼容性问题。共提供了100多个函数,分为下列四类:
(1)DOM操作相关函数
(2)事件处理函数
(3)动画函数
(4)AJAX封装函数
jQuery中DOM操作相关函数:
查找元素: 使用 $(‘选择器’) 来查找元素
jQuery提供的选择器分为如下八类:
(1)基本选择器
(2)层级选择器
(3)可见性选择器
(4)属性选择器
(5)表单元素选择器
(6)基本过滤选择器
(7)内容过滤选择器
(8)子元素过滤选择器
2.jQuery知识体系脉络
(1)查找元素
(2)操作元素属性
(3)操作元素内容
(4)操作元素值
(5)操作元素样式
(6)遍历元素
(7)添加元素
(8)删除元素
(9)替换元素
(10)克隆元素
上节课学习的选择器用于查找元素,今天的课程主要学习操作元素,和增删改元素。
3.操作元素
(1)操作元素的属性
jq.attr(attr,value) //等价于element.setAttribute(attr,value)
jq.attr(attr) //等价于element.getAttribute(attr)
jq.removeAttr(attr) //等价于element.removeAttribute(attr)
(2)操作元素的值
jq.val(‘xx’) //等价于element.value = ‘xx’
jq.val() //等价于var v = element.value
(3)操作元素的内容
jq.html(‘xx’) //等价于element.innerHTML = ‘xx’;
var h = jq.html() //等价于var h = element.innerHTML ;
jq.text(‘xx’) //等价于element.innerText/textContent=’xx’;
var t = jq.text() //等价于var t = element.innerText/textContent;
(4)遍历元素
jq.parent() //等价于element.parentNode
jq.children([s]) //返回选定元素的直接子元素
jq.find(s) //找所有的子元素(直接+间接)
jq.next() //下一个兄弟
jq.nextAll() //后面所有的兄弟
jq.prev() //上一个兄弟
jq.prevAll() //上面所有的兄弟
jq.siblings() //上面和下面所有的兄弟
提示:上述方法有些情形下可以使用选择器代替;有些情况下,只能使用上述方法,例如:
jq.css( name, value ) //设置样式的值,$(‘div’).css(‘color’, ‘red’);
jq.css( {name:value, name:value} ) //连续设置多个样式
jq.addClass( className ) //为选定元素添加一个class
jq.removeClass( className ) //为选定元素删除一个class
jq.hasClass( className ) //判断选定元素是否有指定class
jq.toggleClass( className ) //切换class:有则删除,无则添加
4.添加新元素
DOM中添加新元素:
var child = document.createElement(‘div’);
parent.appendChild( child );
jQuery中添加新元素共提供了八种方法,可以循序渐进的掌握:
方法1:
var child = $(‘
方法2:
$(‘.parent’).append( ‘
$(‘.parent’).prepend( ‘
5.删除元素
DOM中:
parent.removeChild( child );
jQuery中:
6.替换元素
DOM中:
parent.replaceChild( newChild, oldChild );
jQuery中:
方法1:
newChild.replaceAll( oldChild );
方法2:
oldChild.replaceWith( newChild );
7.jQuery中的事件处理
面试题:jQuery中如下几个函数的区别:bind 、click 、delegate、on、live?
jQuery的历史上,先后出现了如下的事件处理函数:
(1)bind & unbind : 为选定元素绑定特定事件的处理函数
jq.bind( ‘事件名’, fn )
(2)one:为选定元素绑定一次事件处理函数
jq.one( ‘事件名’, fn )
(3)click / dblclick / mouseover / mouseout …. : bind()函数的简化
jq.click( fn ) 等价于 jq.bind(‘click’, fn)
注意:DOM所有事件中,只有一部分(23个事件)有简化版本
上述3种方法只能为DOM树已经存在的元素绑定监听函数,无法为后创建的元素绑定监听函数。
(4)delegate:子元素委托父元素代理处理自己的事件
$(‘父元素’).delegate(‘子元素’, ‘事件名’, fn)
(5)live:指定子元素把指定的事件全部委托给document对象——jQuery1.8之后删除了此方法。
类似delegate的使用方法(把监听函数委托在父元素上):
$(‘父元素’).on(‘事件名’, ‘子元素’, fn)
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- 欢迎使用CSDN-markdown编辑器
- caffe源码解析的三个博客分享
- [第二步]在NanoPi NEO UbuntuCore下安装homebridge(相关错误解决,希望能帮到同样遇到这些问题的朋友)
- 经典问题三.(环形区间dp) 项链 nyoj 460
- spark-两种运行模式流程yarn-clusert与yarn-client
- 会跳动的心
- 欢迎使用CSDN-markdown编辑器
- hiho121
- java.lang.UnsatisfiedLinkError: Native method not found: com.baidu.platform.comjni.engine.JNIEngine.
- android常用控件ViewPager(二) ViewPager与Fragment
- 汇编语言之寄存器(详细介绍)
- Java回顾之ORM框架
- 雷塞DMC1380的使用:常用编程函数
- [uboot] (第四章)uboot流程——uboot编译流程
- C语言文件概述