你记不住的这里都有—— jQuery 初学语法合集(一)

目录

DOM和jQuery对象相互转换

DOM对象转jQuery对象

jQuery对象转DOM对象

jQuery选择器 

基本选择器

筛选选择器

筛选方法

 jQuery样式操作

操作css(简单样式)

操作类

 jQuery属性值操作

固有属性

自定义属性

数据缓存

文本属性值

设置表单值 

jQuery元素操作

遍历（each遍历）

创建

添加

删除

         jQuery尺寸操作

jQuery位置操作

---

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( 数值)   直接跳转到被卷去的位置

总结：多敲多练出奇迹！