jQuery 写法示例

选择元素

$('.box') // CSS3 选择器
$('.el', $parent)
$().add('.el1').add('.el2')

$('.box').filter(':visible')
$('.box').filter(function(){
  var $this = $(this)
  return $this.index() > 3 && $this.hasClass('xxx')
})

$('.box').find('.box-header')

$('.box').closest('.wrap')
$('.box').parents('.wrap')
$('.box').offsetParent()

遍历元素

$el.each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

创建元素

var $newEl = $('<div>')

复制元素

$(el).clone()

元素的末尾插入子元素

$el.append($newEl)

元素的开始插入子元素

$el.prepend($newEl)

当前元素前面插入元素

$el.insertBefore($newEl)

当前元素后面插入元素

$el.insertAfter($newEl)

删除元素

$(el).remove()

判断两个元素是否相等

$(el).is($(otherEl))

内容

$el.text()
$el.text('text')
$el.html()
$el.html('<span>xxx</span>')

属性

$el.attr('href')
$el.attr('href', '//google.com')
$el.removeAttr('data-loading')
$el.prop('checked')
$el.prop('checked', true)

类名

$el.addClass('className')
$el.addClass('className1 className2')
$el.removeClass('className')
$el.hasClass('className')
$el.toggleClass('className')

样式

$el.css('color');
$el.css('color', 'red');
$el.css({
  'font-size': '16px',
  'border': 'none'
});

尺寸

$el.width()
$el.width(400)
$el.height()
$el.innerWidth()
$el.outerWidth()

位置

$el.position().top // 相对于其定位父元素
$el.position().left
$el.offset() // 相对于浏览器窗口
$el.offset({
  top: 10,
  left: 20px
})
$el.scrollTop(20) //滚动条滚动20px

父元素滚动到指定子元素的位置

$wrap.scrollTop($child.position().top)

注意:父元素需要是定位元素(position 不为 static)。

显示隐藏

$el.show()
$el.hide()
$el.toggle() //切换显示,隐藏的状态
$el.fadeIn()
$el.fadeOut()
$el.slideUp()
$el.slideDown()

事件

$el.click(function(){})
$el.on('click', '.child', function(){})
$el.off('click')
$el.click(function(event){
  event.stopPropagation(); // 阻止事件冒泡
  event.preventDefault(); // 阻止元素的默认行为
  event.target;// 触发事件的元素
  event.currentTarget === this; // true
  event.which();// 按下的键
})

$(document).ready(function(){})

$el.change()// 脚本触发事件

动画

$.animate({
  opacity: 0.6,
  left: '+=50',
  height: 'toggle'// 0 与 原高的切换
}, 2000, function(){
  // 动画完成
})

ajax

$.ajax({
  url: 'xxx',
  data: {}
})

$.ajax({
  url: 'xxx',
  type: 'post'
  data: {
    query: 'aaa'
  }
}).done(function(res){}).fail(function(){})

链式调用

$el.addClass('someClass')
   .html('xxx')
   .click()

工具方法

$.makeArray

将类似数组的对象转化成数组

function add() {
  var args = arguments;
  args = $.makeArray(args);
  var sum = 0;
  return args.reduce(function(prev, curr) {
    return prev + curr
  }, 0)
}
add(1,2,3);//输出6

类型判断

$.isArray() // 是否是数组
$.isFunction() // 是否是方法
$.isNumeric() // 是否是数组
$.isEmptyObject() // 是否是空对象
$.isPlainObject() // 是否是PlainObject。PlainObject的定义见[这里](http://api.jquery.com/Types/#PlainObject)

$.extend

对象合并

var defaultOpts = {a:'xxx', b:'xxx'}
function doSth(opts) {
  $.extend({}, defaultOpts, opts)
  // 也可以用 Object.assign({}, defaultOpts, opts)
}

其他

$.noop() // 返回一个空函数
$.now() // 返回自1970年1月1日 00:00:00 UTC到当前时间的毫秒数。也可以用 Date.now()
$.trim('   aa  ') // 去除字符串前后的空格。也可以用 '   aa  '.trim()

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏函数式编程语言及工具

Scalaz(23)- 泛函数据结构: Zipper-游标定位

外面沙尘滚滚一直向北去了,意识到年关到了,码农们都回乡过年去了,而我却留在这里玩弄“拉链”。不要想歪了,我说的不是裤裆拉链而是scalaz Zipper,一...

222100
来自专栏hbbliyong

ES6+ 开发 React 组件

在这里简要的说一下这些语言新特性对 React 应用的开发有什么影响,这些 ES6+ 特性使得 React 开发更简单更有趣。 类 迄今为止,最能体现我们使用 ...

36580
来自专栏天天

CSS3

24010
来自专栏C/C++基础

C#GDI绘制自定义字体

private void PaintMessageBox()         {             Graphics g = this.panel1....

11230
来自专栏老马寒门IT

03-老马jQuery教程-DOM操作(上)

在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索。目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作...

23500
来自专栏用户2442861的专栏

关于伪类元素:before和:after

:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下:

32110
来自专栏河湾欢儿的专栏

event事件对象

event: 事件对象,当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指定的地方-event对象,供我们在需要的时候调...

12420
来自专栏JadePeng的技术博客

MarkDown 常用语法教程

MarkDown 语法说明 [TOC] 标题 标题1 ====== 标题2 ----- ## 大标题 ### 小标题 #### 小标题 列表 无序列表 ...

28640
来自专栏HTML5学堂

CSS 1.0~3.0选择器(下)

HTML5学堂:对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用,我们那么有些选择器还是无法简单获取某元素,对于CSS3的选择器的产生,让我们更加方便...

33630
来自专栏阮一峰的网络日志

CSS选择器笔记

这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。

13720

扫码关注云+社区

领取腾讯云代金券