目录
DOM和jQuery对象相互转换
DOM对象转jQuery对象
- 直接获取 语法:$( '选择器');
- 已经获取过原生 语法:$ (名称 )
//直接获取视频
$('video');
//先使用DOM获取了原生 再转为jQuery
var myvideo=document.querySelector('video');
$(myvideo);
jQuery对象转DOM对象
- 数组形式:语法:$("div") [index] index为索引号
- get方式:语法:$('div") .get(index) index 为索引号
//数组形式获取
$('video')[0].play();
//get方法获取
$('video')get().play();
jQuery选择器
基本选择器
筛选选择器
筛选方法
jQuery样式操作
操作css(简单样式)
- 获取某个属性值
语法:$("this").css("属性名");
举例:$("this").css("width");
返回值:带有单位的字符串,例如200px
- 修改某个属性值
语法:$("this").css("属性名","属性值");
举例:将宽度改为200px $("this").css("width","200px") ;
- 修改多组样式
语法:$(this),css({ "属性名1":"属性值1","属性名2":''属性值2"});
举例:$(this),css({ "color":"white","font-size":''20px"});
注意:复合属相必须采用驼峰命名法
操作类
- 添加类 $( "div" ).addClass("current'");
- 移除类 $( "div" ).removeClass("current'");
- 切换类 $( "div" ).toggleClass("current'");
- 注意: 类名不加点, 只是对指定的类进行操作 不会影响原先的类名。
jQuery属性值操作
固有属性
- 获取 prop("属性名")
- 设置 prop("属性",”属性名“)
自定义属性
- 获取 attr("属性名")
- 设置 attr("属性",”属性名“)
数据缓存
- 附加数据 data(“属性名”,“属性值”)
- 获取数据 data(“属性名”)
文本属性值
HTML: html 不会忽略标签 相当于原生的innerHTML
- 获取 element.html( )
- 设置 element.html( “修改的内容”)
text:text只会获取文本内容,会忽略标签 相当于原生的textHTML
- 获取 element.text( )
- 设置 element.text( “修改的内容”)
设置表单值
- 获取 element.val( )
- 设置 element.val( “修改的内容”)
jQuery元素操作
遍历(each遍历)
- 语法1:$("div"). each(function(i, domEle) { })
- 语法2:$. each (object , function (index, element) { } )
第一个参数 i :是索引号,索引号名字可以自定义;
第二个参数:DOM对象参数 ,需要转化为jQuery对象才可以使用。
创建
- 语法:$("<li> 添加的内容 </li>")
添加
内部添加(成为父子关系)
- 语法1:element.append(被添加的元素) 添加到父元素的最后面
- 语法2:element.prepend(被添加的元素) 添加到父元素的最前面
外部添加(成为兄弟关系)
- 语法1:element.after(被添加的元素) 添加到元素的后面
- 语法2:element.before(被添加的元素) 添加到元素的前面
删除
- 语法1:element.remove() 删除匹配的元素(本身)
- 语法2:element.empty() 删除匹配的元素集合中所有的子节点 (以及清空内部所有元素注册的事件)
- 语法3:element.html(" ") 删除匹配的元素集合中所有的子节点 (保存着元素的注册事件)
jQuery尺寸操作
- width() / height( ) 取得匹配元素宽度和高度值只算width / height
无参数 返回元素的宽度/高度(返回数字类型)
有参数(参数为数字) 修改该元素的宽度/高度
- innerWidth( ) / innerHieght( ) 取得匹配元素宽度和高度值包含padding
- outerWidth() / outerHeight( ) 取得匹配元素宽度和高度值包含padding、border
- outerWidth(true)/ outerHeight(true) 取得匹配元素宽度和高度值包含padding、borde、 margin
jQuery位置操作
offset系列:关于文档的偏移向坐标
- 语法:element.offset() 返回值:对象 (内置两个属性top/left代表偏移量)
- 修改偏移 语法:offset({ top:数字,left:数字})
- 获取偏移 语法:element.offset().top/left 获取上/左偏移
position系列:带有定位的父级偏移坐标
- 语法:element.position() 返回值:对象(内置两个属性top/left代表偏移量)
- 获取偏移 语法:element.position().top /left 获取上/左偏移
- 此系列不可修改!
scroll系列:页面卷去的位置
- 获取偏移 语法:$(document).scrollTop( ) 返回值:数字
- 修改偏移 语法:$(document).scrollTop( 数值) 直接跳转到被卷去的位置