python前端jQuery进阶知识点预习1.jQuery特殊效果2.链式调用3.属性操作4.jQuery循环5.jQu

知识点预习

1.jQuery特殊效果
2.链式调用
3.属性操作
4.jQuery循环
5.jQuery事件

01- jQuery的特殊效果

[AppleScript]

纯文本查看

复制代码

//1. 淡入淡出 fade

// $(".box").fadeIn();

// $(".box").fadeOut();

// $(".box").fadeToggle();

//2. 显示隐藏

// $(".box").hide();

// $(".box").show();

// $(".box").toggle();

//3.卷开卷起

// $(".box").slideDown();

// $(".box").slideUp();

// $(".box").slideToggle();

jQuery链式调用

jQuery对象的方法会在执行完后返回这个jQuery对象，所有jQuery对象的方法可以连起来写

03- 层级菜单案例

[AppleScript]

纯文本查看

复制代码

//1.点击分类的 '水果' 下面的ul 打开

var $next = $(this).next().slideToggle();

// 2. 每次只打开一个 ,其他的关闭 siblings()

// 2.1 $next 对象是你选中的 a 标签下面的 ul列表

// 2.2 $next 需要获取父元素 parent() li标签

// 2.3 通过li标签获取其他的同级元素siblings()

// 2.4 获取同级元素 li 下面的子元素 children()

// 2.5 li 子元素有两个过滤下 childer("ul")

// 2.6 slideup()

$next.parent().siblings().children("ul").slideUp();

jQuery操作属性

prop() 获取和设置标签属性
- 读取的时候用双引号包裹属性即可
- 设置属性时，要用{}包裹属性val() 获取及设置value属性 input标签的值获取及设置
html() 获取和修改标签包裹的内容

05- 对话框案例

val() 获取input标签的value

06- jQuery的循环遍历

each
遍历的函数内 this表示当前遍历出来的元素表示一个元素动态类型

07- 手风琴效果

更改当前点击li标签前面和后面的元素left值
去到右边的位置：

[AppleScript]

纯文本查看

复制代码

第 4 个到右边的位置：727 — 21

第 3 个到右边的位置：727 - 21*2

第 2 个到右边的位置：727 - 21*3

第 1 个到右边的位置：727 - 21*4

到右边的位置的公式：727-21*(5-$(this).index())

焦点事件
- focus() 让文本输入框自动获取焦点，
- blur() 失去焦点
09- 鼠标事件
- 进入子元素会触发事件
  - mouseover() 鼠标进入（进入子元素也触发）
  - mouseout() 鼠标离开（离开子元素也触发）
- 进入子元素不会触发事件 -- 建议使用
  - mouseenter() 鼠标进入（进入子元素不触发）
    - mouseleave() 鼠标离开（离开子元素不触发）
    - hover() 同时为mouseenter和mouseleave事件指定处理函数
    - [AppleScript]
      纯文本查看
      
      复制代码
      ?
      1
      2
      3
      $div01.hover(function (event) {
      $(this).animate({'margin-top':event.type == 'mouseenter' ? 100 : 50});
      })