jquery简单运用

jquery:js 库

官网:http://jquery.com/下载: downloadv3.1.1  -  最新版本3.x2.x1.xPast 

Releases  --  过去发布的版本

See all versions of jQuery Core.  -- 查看所有版本下载:

https://code.jquery.com/jquery/我们用的:jQuery Core 1.7.2    国内使用的,最稳定的版本

1.x  :  亚非拉ie 6 7 8 9 ff  chrome

2.x :    欧美不兼容 ie 6 7 83.

jquery :  用户群:不懂JS的人 (只会切图的前端    后台程序员)简单

原生js: 用户群:专业的前端工程师 难

jquery  能做的    原生 的JS 都能做到反之则不然

=========2016年11月23日 星期三 10:05:18 =========

获取元素:

document.getElementById //  ByTagName

--$('input')

就是css 中的写法

jquery里获取元素: css 中怎么写  jquery 就怎么写

原:  onclick

jq: click  --  事件不带on

*选择器

根据标签名:  $('input')

根据ID: $('#btn1')

根据class: $('.classname')

根据属性来获取:  [属性名='属性值']  //  '  "  交叉用:  外单引里双引,外双引里单引

.eq(2)  按索引找元素

伪类:

:first

:last

:even

:odd

:eq(索引值)

:lt(4)  小于索引值

:gt(4)   大于索引值

:contains(文本)  包含指定文本的 (如:包含 a 字母)

:has(标签名) 包含指定标签的

设置样式:

.css('background','yellow'); //设置一个

.css({'background':'yellow','width':200}); 设置多个样式

显示:  .show()

隐藏: .hide();

切换click事件,可以2个或多个: .toggle

mouseover

mouseout

--和原生的 on  事件,有同样的问题

移上,移走  切换的时候 :  hover

淡入淡出:  fadeIn  fadeOut

下拉显示: slideUp  slideDown

--不推荐使用

动画:animate

--推荐使用

=========2016年11月23日 星期三 12:21:36 =========

样式:

.css('width');  //获取一个样式,带单位  200px

.css('background','yellow'); //设置一个

.css({'background':'yellow','width':200}); 设置多个样式

属性:

.attr('属性名')  //获取一个属性

.attr('name','value'); //设置一个属性

.attr({

name1:'v1',

name2:20

}) //批量设置属性

=========2016年11月23日 星期三 14:27:25 =========

class操作:

addClass

removeClass

内容操作:

非表单元素的内容:

.html()  获取innerHTML

.html(设置的内容)  设置

表单标签:

.val()  获取内容

.val(设置的内容)  设置

=========2016年11月23日 星期三 14:35:40 =========

this:

一般情况下, this  还是原生 js  中的this

原生对象    jquery对象

* 原生对象的属性和方法,不能直接用于 jquery对象

* jquery对象的属性和方法, 不能  直接用于 原生对象

原生  -->  jquery    $(原生)

jquery --> 原生  [0]

=========2016年11月23日 星期三 15:07:32 =========

索引:

.index();

链式操作:

兄弟节点:siblings

=========2016年11月23日 星期三 15:40:31 =========

位置:

原生: offsetLeft  offsetTop

left  top

jquery:

var l = $('#div1').position().left;

var t = $('#div1').position().top;

普通位置:

.positon().left

.position().top

绝对位置:

.offset().left;

.offset().top;

=========2016年11月23日 星期三 16:02:39 =========

物体大小:

width    heigth

宽度:

.width()  普通宽度

.innerWidth() 普通宽度 + padding

.outerWidth() 普通宽度 + padding + border

高度:height

=========2016年11月23日 星期三 16:34:17 =========

事件:=========2016年11月23日 星期三 16:49:20 =========

jquery  都是绑定

.bind();

.unbind();

事件委托:

$('ul').delegate('li','click',function(){

alert($(this).html());

});

$('ul').undelegate();

阻止默认行为:

return false; -- 阻止默认行为 和 事件冒泡

ev.preventDefault();  --  阻止默认行为

ev.stopPropagation()  -- 阻止事件冒泡

=========2016年11月23日 星期三 16:49:20 =========

可视区:

alert($(window).width());

alert($(window).height());

例子:




智能社 - www.zhinengshe.com

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,684评论 0 11
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 115,055评论 24 450
  • 九月一日晚八点五十分家中电视机旁一年一度的开学第一课即将开始 九点整,伴随着开场舞<第一课>我进入了这一年一度的开...
    夜空之上刘星雨阅读 577评论 2 2
  • #摔跤吧爸爸#这周末用腾讯会员看完了这个电影,真的感触颇多,不仅看完的时候哭的一把鼻涕一把泪,而且还想起了自己似乎...
    海绵小凡阅读 205评论 0 0
  • 应家长的要求大学要在家附近选,还记得当时我的老师都想给家长打电话觉得家长太古板,后来还是听家长的话了,因...
    哏都的me阅读 208评论 1 1