一、jQuery简介

就是一个JS的文件

jQuery的书写步骤：

    1. 引入jQuery文件
    2. 换新的一行,再写script标签
    3. $(function(){})
    4. 想用什么就通过$('')选择

二、jQuery对象和DOM对象

DOM对象：document 选出的对象

jQuery对象:$('') jQuery对象

    *：对象之间的方法和属性是不能共用的。

三、jQuery控制CSS和HTML的控制

  • jQuery控制css:  .css()

  1. 单属性修改:
    • 参数1:属性名
    • 参数2:属性值
    • .css('属性名', '属性值')
  2. 单属性获取:
    • 参数1:属性名  
    • .css('属性名');
  3. 多属性修改:
    • .css({‘属性名1’:’属性值1’,’属性名2’:’属性值2’…});

*’属性名’可以不带’单引号’，但如果是符合属性名，如font-size就必须带上’单引号’

  • jQuery控制html的标签属性:  .attr()

  1. 单属性修改:
    • 参数1:属性名
    • 参数2:属性值
    • .attr('属性名', '属性值')
  2. 单属性获取:
    • 参数1:属性名 
    • .attr('属性名');
  3. 多属性标签修改也可以实现，但是应用比较少

  • jQuery控制html的内容属性:  .html('')

  1. 设置HTML的内容:  .html('内容');
  2. 获取HTML内容:  .html()

四、jQuery简单动画

  1. .hide() 隐藏
  2. .show() 显示
  3. .toggle() 切换

 *:括号中可以加时间。就会有不同时间长度

  • 滑动动画:
  1. .slideUp()滑动隐藏
  2. .slideDown()滑动显示
  3. .slideToggle() 滑动切换

*括号中可以加时间

五、jQuery选择器

  • 基本选择器
    1. id选择器:$('#id');
    2. 元素选择器:$('div');
    3. 类选择器: $('myClass');
    4. 所有元素:$('*');
    5. 多条件选择器: $('h1,h2,h3');
    6. 后代选择器：$('.ul01 .myclass03');
    7. 子代选择器：只选择第一级后代$('.da>div');
    8. 选中指定标签后面紧挨着的一个同级标签：$('.myclas01+li');
    9. 选中指定标签后面的所有同级的某种标签:$('.myclas01~li');
  • 过滤选择器
    1. 过滤出第一个:$('div:first');
    2. 过滤出最后一个:$('div:last');
    3. 排除指定元素:$('div:not(".myDiv")');
    4. 按索引值过滤:$('ul li:eq(4)');   $('ul li').eq(4);
    5. 过滤大于指定索引值:$('div:gt(索引值)');
    6. 过滤小于指定索引值:$('div:lt(索引值)');
  • 筛选选择器:父、子、兄
    1. 筛选出当前元素的父级元素:$('div').parent();
    2. 筛选出当前元素的子级元素:$('div').children();
    3. 筛选出当前元素:$(this)
    4. 筛选出当前元素的兄弟姐妹元素(小伙伴):$(this).siblings()

六、jQuery动画排队机制

  • stop():可以用来清空动画的排队机制，一定要写在执行动画的的前面。
  • hover方法:鼠标移入和移出的综合体
$('.all>ul>li').hover(function() {
    // 鼠标移入
    $(this).children().stop().slideDown();
}, function() {
    // 鼠标移出
    $(this).children().stop().slideUp();
});
  • index()索引值：

在jQuery中用选择器选出来的元素都有一个index()，可以返回这个元素的索引值。

  • jQuery中的链式编程

在jQuery中但凡针对同一个目标进行的所有操作都可以通过“点”语法来连续书写，叫做链式编程。

Eg:

var myIndex = $(this).index();
$('ul li').eq(myIndex).attr('class', 'current').siblings().attr('class', '');

 

版权声明：本文为圆子同学的学习笔记原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/yuanZi666/p/16337453.html