jquery 操作属性[选择器为主]

$.formatMoney() 金额按千位逗号分割； 将千分位格式的字符串转换为浮点数；

 JSON.parse() JSON 通常用于与服务器端交换数据,在接收服务器数据时 一般是字符串,我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

  JSON.parse(text,[,reviver])  text:必需， 一个有效的 JSON 字符串。reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

   解析前要确保你的数据是标准的 JSON 格式，否则会解析出错

 

JSON.stringify() 和 JSON.parse()

 

 

 

 

 

过滤器选择器

这类选择器都带冒号:

名称	用法	描述
:eq(index)	$('li:eq(2)').css('color', 'red')	获取到的li元素中，选择索引号为2的元素， 索引号index从0开始。
:odd	$('li:odd').css('color', 'red')	获取到的li元素中，选择索引号为奇数的元素
:even	$('li:even').css('color', 'red')	获取到的li元素中，选择索引号为偶数的元素
:last		获取最后一个子元素

 

选择器筛选方法

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$('ul').children('li')	相当于$('ul > li')，子代选择器
find(selector)	$('ul').find('li')	相当于$('ul li'),后代选择器
siblings(selector)	$('#first').siblings('li')	查找兄弟节点，不包括自己本身。
parent()	$('#first').parent()	查找父亲
eq(index)	$('li').eq(2)	相当于$('li:eq(2)'),index从0开始
next()	$('li').next()	找下一个兄弟
prev()	$('li').prev()	找上一次兄弟

 

jquery操作css

设置单个样式

元素.css(name,val)

设置多个样式

元素.css({name:val,name:val,.....name:val})同时设置多个要用花括号{} 包裹

获取样式

元素.css(name)

 

添加类名

元素.addClass(name) 追加类名不会覆盖原有的类名

移除类名

元素.removeClass(name)

检查类名是否存在

元素.hasClass(name) 返回布尔值，true表示存在  false表示不存在

切换类名

元素.toggleClass(name)  有name就移除name 没有就添加

 

 

jQuery操作标签属性

设置单个标签属性

元素.attr(name,val)

设置多个标签属性

元素.attr({name:val,name:val,.....})   标签属性和自定义属性都可以设置

获取标签属性

元素.attr(name)

移除标签属性

元素.removeAttr(name)

 

prop操作标签属性

在jQuery1.6之后,对于checked、selected、disabled这类Boolean类型的属性来说,不能用attr方法,，只能用prop方法

 

获取属性值

元素.prop(name)

设置属性值

元素.prop(name,value)

 

 

操作标签内容

获取表单元素的内容

元素.val()

设置表单元素内容

元素.val(value)

 

获取非表单元素的内容

元素.text()

设置非表单元素的内容

元素.text(value)

 

获取非表单的内容

元素.html()

设置非表单元素的内容

元素.html(value)

 

jQuery动画实现

基本动画1 【一般情况下 tab切换用】

动画显示

元素.show(speed ，callback)

参数：① speed ，可选，表示动画执行时长，数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。② callback，可选，表示动画执行完后要执行的程序，用函数 表示。

 

动画隐藏

元素.hide(speed,callback)

• 参数：① speed ，可选，表示动画执行时长，数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。② callback，可选，表示动画执行完后要执行的程序，用函数 表示

动画切换

元素.toggle(speed,callback)

参数:① speed ，可选，表示动画执行时长，数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。② callback，可选，表示动画执行完后要执行的程序，用函数 表示。

基本动画2 【淡入淡出】

动画显示

元素.slideDown(speed,callback)

参数:① speed ，可选，表示动画执行时长，数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。② callback，可选，表示动画执行完后要执行的程序，用函数 表示。

 

动画隐藏

元素.slideUp(speed,callback)

参数:① speed ，可选，表示动画执行时长，数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。② callback，可选，表示动画执行完后要执行的程序，用函数 表示。

 

动画切换

元素.slideToggle(speed,callback)

参数:① speed ，可选，表示动画执行时长，数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。② callback，可选，表示动画执行完后要执行的程序，用函数 表示。

 

 

 

基本动画3 【向上出 向下入】

动画显示

元素.fadeIn(speed],[callback])

参数:① speed ，可选，表示动画执行时长，数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。② callback，可选，表示动画执行完后要执行的程序，用函数 表示。

 

动画隐藏

元素.fadeOut(speed],[callback])

① speed ，可选，表示动画执行时长，数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。② callback，可选，表示动画执行完后要执行的程序，用函数 表示。

 

动画切换

元素.fadeToggle([speed],[callback])

参数:① speed ，可选，表示动画执行时长，数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。② callback，可选，表示动画执行完后要执行的程序，用函数 表示。

 

自定义动画

元素.animate({params},[speed],[easing],[callback])

（注意:不支持颜色动画[这个都可以用 jQuery.color.js 插件来解决]，也不支持css3属性动画）

参数:① params ,必选。 表示运动的哪些样式属性，用对象 表示。

②[speed] ，可选，表示动画执行时长，数字 表示毫秒。

③[easing] ，可选，表示运动的方式，默认为swing（缓动）慢快慢 可以是linear（匀速）。

④ callback，可选，表示动画执行完后要执行的程序，用函数 表示。

例如:

$('button').click(function(){

     $('div').animate(

     {  // 要运动的样式属性

     width: 400,

     height: 400,

     top:200,

     left: 300,

     opacity: 1

     },

     3000, // 运动时长

     'linear', // 运动方式匀速

      function() { // 运动结束后要执行的代码

     console.log('动画结束');

     });

     });

 

 

动画的队列和动画停止

元素.stop([clearQueue], [jumpToEnd]);

参数：

clearQueue ，可选，表示是否清空动画队列。 默认为false。 若是false 时，会停止当前这一个动画，开始队列中的下一个动画。若是true 时，停止动画并清空所有的动画队列。

jupmToEnd ，可选，表示是否让当前动画直接达到目标值。默认为false若是false 时，会直接停止当前动画，不会达到目标值。若是true 时，则会停止当前动画，直接达到目标值。

 

 

jQuery操作节点

添加节点

父元素.append(子元素) 把一个子元素追加到父元素的最后面

子元素.appendTo(父元素)

 

父元素.perpend(子元素) 把一个子元素追加到父元素的最前面

子元素.prependTo(父元素)

 

兄弟元素.before(新元素) 把一个元素追加到一个同级兄弟元素前面

兄弟元素.after(新元素) 把一个元素追加到一个同级兄弟元素后面

 

删除节点

节点.remove( )

 

清空节点

元素.empty()不用添内容

元素.html(‘’) 直接为空就可以了

 

克隆节点

元素.clone(boolean);

默认false

若是true时，则会克隆和元素相关的事件。 深拷贝（拷贝的包括事件）

若是false时，则不会克隆和元素相关的事件。浅拷贝。（拷贝的不包括事件）

 

 

jQuery操作元素的尺寸

获取方式：

① width 和 height方法操作元素的大小，不包含内边距、边框 和 外边距。

获取：​ 元素.width();​ 元素.height();​

设置：​ 元素.width(value);​ 元素.height(value);

② innerWidth和innerHeight 

操作元素的大小，包含内边距 ，不包含边框 和 外边距。

获取：​ 元素.innerWidth();​ 元素.innerHeight();​

设置：​ 元素.innerWidth(value);​ 元素.innerHeight(value);

③ outerWidth 和 outerHeight 

操作元素的大小，包含内边距和边框 ，不包含外边距。

获取：元素.outerWidth ();​ 元素.outerHeight();​

设置：元素.outerWidth (value);​ 元素.outerHeight(value);

 

 

jQuery操作元素的位置

获取元素距离文档的位置

元素.offset()  返回一个对象,对象中包含left和top 分别表示距离文档左侧和文档顶部的位置

 

获取元素距离就近上级定位元素的位置

元素.position() 返回一个对象,对象中包含left和top分别表示距离就近上级定位的左侧和顶部的位置

 

操作页面卷去的距离

获取

元素.scrollTop()常用

元素.scrollLeft();

设置

 元素.scrollTop(value); 常用​

 元素.scrollLeft(value);

 

 

on方法注册事件

$(‘要注册事件的元素’).on(①[,②][,③],④)

参数①:绑定事件的名称可以是空格分隔的多个事件(标准事件或者自定义事件)

参数②:执行事件的后代元素,如果没有后代,那么事件将有自己执行(可选)

参数③:传递给处理函数的数据,事件触发的时候通过event,data来使用(可选)

参数④:事件处理函数

 

jQuery触发事件

元素.事件名()  记得不加on 如:

div.colick(function(){});点击事件

 

元素.trigger(‘event name’)

 

解除绑定事件

选择器.unbind() // 解除所有的事件

选择器.unbind(事件名) // 解除指定事件

 

选择器.undelegate()  // 解除所有事件

选择器.undelegate(事件名) //解除指定事件

 

选择器.off()解除匹配元素的所有事件

选择器.off(事件名) 解除匹配元素的所有该事件

 

获取事件对象

通过事件处理程序事件处理函数的第一个形参 获取到事件对象

选择器.事件名(function(e){}) // e就是 我们的  事件对象

 

事件对象常用的属性和方法

// screenX和screenY 对应屏幕最左上角的值

// clientX和clientY 距离页面左上角的位置（忽视滚动条）

// pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）

// event.keyCode 按下的键盘代码

// event.data 存储绑定事件时传递的附加数据

// event.stopPropagation() 阻止事件冒泡行为

// event.preventDefault() 阻止浏览器默认行为

// return false 既能阻止事件冒泡，又能阻止浏览器默认行为

 

 

 

什么是链式编程?

在jQuery中，在通过调用jQuery中的方法设置完一个操作时，还可以继续通过点的方式设置其他操作，这个现象就是链式编程

在通常情况下，只有设置操作才能把链式编程延续下去,因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

 

链式编程原理:

在通过调用方法设置完一个操作时,该方法内部会返回当前的jQuery元素对象

 

在jQuery链式编程的过程中,通过end方法可以返回当前jQuery元素对象之前的上一个使用jQuery元素对象

 

each方法:(记得要有jQuery插件)

选择器.each(function(index,element){})

参数index:表示当前元素所在匹配元素中的索引

参数element:表示当前元素(DOM对象)

 

多库共存问题

jQuery使用$ 作为标识符 但是如果与其他框架的$冲突时,jQuery可是释放$符的控制权

释放方法: var c = $.coConflict() // 释放$的控制权,并且把$的能力给c

 

 

转载于:https://www.cnblogs.com/maxiag/p/10324533.html