JQuery的使用（工具方法、CSS属性及方法、筛选、文档处理、事件、动画）后续

旧城等待， 2024-03-23 09:53 121阅读 0赞

工具方法、CSS属性及方法

1、JS与JQuery转换

1）概述

  • $类似java中的类
  • $()类似java中的类的构造方法

2）JS与jQuery转换

js转换jQuery：

  1. $(js对象)  //作用：转换作用

jQuery转换js
1.可以通过下标转换成js对象

  1. var a= $("#a");
  2.  console.log(a[0].innerHTML)
  3.  console.log(a.innerHTML);

2.可以通过get方法+下标获取

  1. console.log($oDiv.get(0).innerHTML);

2、$工具方法

JQuery有许多的$怎么用的方法，要更多方法怎么用的可以参考JQuery官方API文档
我就列举一下

  1. 1.$.each()：遍历数组、对象、对象数组中的数据
  2. 2.$.trim()：去除字符串两边的空格
  3. 3.$.type(obj)：得到数据的类型
  4. 4.$.isArray(obj)：判断是否是数组
  5. 5.$.isFunction(obj)：判断是否是函数
  6. 6.$.parseJSON(obj)：解析json字符串转换为js对象/数组

3、JQuery属性和css

属性

  1. attr()：//获取某个标签属性的值，或设置某个标签属性的值
  2. removeAttr()：//删除某个标签属性
  3. addClass()：//给某个标签添加class属性值
  4. removeClass(): //删除某个标签class属性值
  5. prop(): 和 attr()类似，//区别在于prop用于属性值为Boolean类型的情况，比如多选
  6. html(): //获取某一个标签体内容（注意：该标签体中可以包含子标签）
  7. text()：//获取某一个标签体内容(注意：该标签体不能包含子标签)
  8. val()：//主要用户获取/设置输入框的值

更多属性查看API文档

CSS

  1. css()：设置标签的css样式

    css(“样式名”);//获取样式值：
    css(“样式名”,”样式值”);//设置单个样式：
    css({

    1. "样式名"："样式值"，"样式名"："样式值"});//设置多个样式：

  2. 位置

    offset()：//相对整个大容器的相对位置
    position()：//相对父容器的相对位置

  3. 尺寸

    width(): //容器宽
    height(): //容器高
    innerWidth()：//width+padding
    innerHeight()：//height+padding
    outerWidth(): //width+padding+border
    outerHeight(): //height+padding+border

筛选、文档处理

1、筛选

过滤

  1. first()：获取匹配的第一个元素
  2. last()：获得匹配的最后一个元素
  3. eq(N)：获取匹配的第N或-N个元素
  4. filter(selector)：筛选出与指定表达式匹配的元素集合
  5. has(selector)：筛选出包含特定特点的元素的集合
  6. not(selector)：筛选出不包含特定特点的元素的集合

在jQuery对象数组中，过滤出一部分元素来

查找

  1. children()：子标签中找
  2. find()：后代标签中找
  3. parent()：父标签
  4. prevAll()：前面所有的兄弟标签
  5. nextAll()：后面所有的兄弟标签
  6. siblings()：前后所有的兄弟标签

在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签

2、文档处理

增

内部插入
  1. append()：将内容添加到指定的元素后面
  2. appendTo()：和append()颠倒
  3. //后面
  4. prepend()：将内容添加到指定元素前面
  5. prependTo():和prepend()颠倒
  6. //前面
外部插入
  1. after()：在匹配元素之后插入内容
  2. before()：在匹配元素之前插入内容

删

  1. empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）
  2. remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）

改

  1. replaceWith()：将所有匹配的元素替换成指定的内容

事件、动画

事件

1、加载DOM的两种方式

  1. window.onload方式：所有页面内容加载完后才执行。只能编辑一个。
  2. JQuery方式：页面结构绘制完成后执行。可以编辑多个。

2、绑定事件的两种方式

  1. 1. 元素.on("时间名",function(){
  2.     });
  3. 2. 元素.时间名(function(){
  4.     });

3、合成事件、事件切换

  1. hover() //鼠标悬停事件--移入移出
  2. toggle() //鼠标点击合成事件

4、事件冒泡事件

传播：小》中》大
阻止传播：事件后面加 return false

5、事件坐标

  1. offsetX(); //当前元素左上角
  2. client(); //窗口左上角
  3. pageX(); //网页左上角

6、移除事件

  1. 元素.unbind("时间名");

动画效果

基本

  1. 显示：show(time);
  2. 不显示：hide(time);
  3. 切换：toggle(time);

滑动

  1. slideUp(time);//动画收缩--向上
  2. slideDown(time);//动画张开--向下
  3. slidetoggle(time);//动画切换

淡入淡出（透明度）

  1. fadeIn(time);//淡入（透明度）
  2. fadeOut(time);//淡出（透明度）
  3. fadeToggle(time);//切换

自定义动画

  1. 元素.animate({
  2.     属性：属性值},time);
  3. 缩放：width    height
  4. 移动：top    left
  5. 移动本元素，距离：top="+="    left="-="

上一章：JQuery（入门~选择器）

发表评论

表情：
评论列表 （有 0 条评论，121人围观）

还没有评论，来说两句吧...

相关阅读