jQuery-02

1 css操作

css(name,value)
css(obj)
css(name)

2 class操作

2.1 addClass(name) 添加类
2.2 removeClass(name) 删除类
2.3 toggleClass(name) 切换类
2.4 hasClass(name) 判断类  (boolean)

3. 三组简单动画

1.show()显示   hide()隐藏     toggle()切换          //不传参数,没有动画效果
2.slideUp()滑出   slideDown()滑入   slideToggle()滑出划入切换   //不传参也有动画效果
3.fadeIn()淡入  fadeOut()淡出  fadeToggle()淡入淡出切换    //不传参也有动画效果

4. 自定义动画

easing linear 匀速
       swing  先慢再快再慢
animate(obj, speed, easing, callback)

5. 动画队列

  停止当前动画  stop()
  stop(参数1,参数2)
  参数1: true 清空动画队列  (默认false)
  参数2: true 立刻抵达当前动画目标值 (默认false)

6. 节点操作

  $(htmlStr) 创建节点
  添加节点
  append  1. append("<p>123</p>")
          2. append($('<p>123</p>'))
          3. 页面已经存在的元素进行append append($p)  剪切的效果

  append 添加到当前元素 子元素的 最后面
  prepend 添加到当前元素 子元素的 最前面
  before 作为兄弟元素 添加到当前元素 的前面
  after 作为兄弟元素 添加到当前元素 的后面

7. html() text() innerHtml innerText

html()
当该方法用于返回内容时,则返回第一个匹配元素的内容(整个html结构),只返回divDOM集合中的第一个div内容
var boxCon = $("div").html();
      console.log(boxCon);

当该方法用于设置内容时,则重写所有匹配元素的内容。
 $("div").html("<p>hello box</p>")//所有的div内容都被修改为<p>hello box</p>

 text()
当该方法用于返回一个值时,它会返回所有匹配元素的组合的文本内容(会删除 HTML 标记即只返回文本)。

$("div").text("你好")
$("div").text("<h3>你好</h3>")
当该方法用于设置内容时,则重写所有匹配元素的内容。(传入什么就渲染什么)

8. empty() 清空内容. 清理门户 (防止内存泄露) remove() 自杀

    empty() 清空内容. 清理门户 
    $("#bigBox").empty()//删除#bigBox所有的元素,


     remove()  自杀  //删除被选元素子元素和自身

9. clone()

 1. 不传参也会深度复制(即标签中的内容)
 2. 传了 true clone(true) 不仅会深度复制, 连方法也会赋值
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,200评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,379评论 0 2
  • JQuery 1、JQuery特点 (1)轻量级(2)链式语法(3)简单(4)写的更少,做的更多 2、本地调用: ...
    Lizzy95阅读 273评论 0 1
  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 748评论 0 9
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,679评论 18 503