jQuery的基本使用

jQuery的基本使用

---

1. 入口函数

1. 等待页面DOM加载完成后再去执行js代码

   $(doucument).ready(function() {
   	$('div').hide();
   })
   

   $(function() {
       $('div').hide();
   })
   

2. 顶级对象：$

​ $ 是jQuery的别称，同时也是jQuery的顶级对象

3. DOM对象和jQuery对象

• DOM对象： 用原生js获取过来的对象就是DOM对象

  var myDiv = document.querySelector('div');//myDiv是DOM对象
  console.dir(myDiv);
  

• jQuery对象： 用jQuery方式获取过来的对象就是jQuery对象

  本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）

相互转换：

1. DOM对象转换为jQuery对象： $(DOM对象)
2. jQuery对象转换为DOM对象： $(‘对象’)[index] index是索引号
3. $(‘对象’).get(index) index是索引号

4. jQuery选择器

1.jQuery基本选择器

• $(“选择器”)
• 里面选择器直接写css选择器即可，但是要加引号

​

2.jQuery层级选择器

​

3.jQuery筛选选择器

4.隐式迭代

便利内部DOM元素（伪数组形式存储）的过程叫做隐式迭代

—给匹配到的所有元素进行循环遍历，执行相应的方法

5.jQuery样式操作

5.1 操作css方法

• 参数只写属性名，则是返回属性值
  • $(this).css(“属性名”);
• 参数是属性名，属性值，是在设置一组样式，属性必须加引号，属性值如果是数字可以不加单位和引号
  • $(this).css(“属性名”,”属性值”);
• 参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不加引号
  • $(this).css({“属性名”:”属性值”,”属性名”,”属性值”});

5.2 设置类样式方法

• 添加类— addClass()
• 删除类— removeClass()
• 切换类— toggleClass()

6.jQuery效果

6.1 显示隐藏效果

1.语法规范

​ show ([speed,[easing][fn]])

​ hide([speed,[easing][fn]])

​ toggle ([speed,[easing][fn]])

2.参数

• 参数可以省略，无动画直接显示
• speed：三种预速度之一的字符串（“slow”，“normal”，“fast”）或者表示动画时长的毫秒数值
• easing：用来指定切换效果，默认是“swing”，可用参数“liner”
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

6.2 滑动效果

1.语法规范

​ slideDown ([speed,[easing][fn]]) 下拉滑动

​ slideUp ([speed,[easing][fn]]) 上拉滑动

​ slideToggle ([speed,[easing][fn]]) 切换滑动

2.参数

• 参数可以省略，无动画直接显示
• speed：三种预速度之一的字符串（“slow”，“normal”，“fast”）或者表示动画时长的毫秒数值
• easing：用来指定切换效果，默认是“swing”，可用参数“liner”
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

6.3事件切换

1.语法规范

​ hover([over,]out)

2.参数

​ 1）over：鼠标移动到元素上要触发的函数（相当于mouseover）

​ 2）out：鼠标移出元素要触发的函数（相当于mouseleave）

7.jQuery位置

1.offest()设置或获取元素偏移

• offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
• 该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
• 可以设置元素的偏移：offset({top: ,left: });

2.position获取元素偏移

• position()方法获取距离带有定位父级偏移，如果没有带有定位的父级，则以文档为主
• 该方法只能获取不能赋值

​