jQuery知识点

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。

jQuery 能做什么?

 1、选取页面元素;

 2、ajax

 3、实现动画

4、jsonp

5、事件的操作

6、改变结果集

7、元素的操作

8、CSS的操作

 9、DOM的遍历和修改

 jQuery 对象和 DOM 原生对象有什么区别?如何转化?

jquery对象是通过jQuery去获取的对象,jQuery对象只能使用jQuery对象的方法和属性;

DOM对象是通过原生js去获取的对象,DOM对象只能使用DOM对象的方法和属性;

DOM对象转化成jQuery对象:  $(dom)

jQuery对象转化成DOM对象:  $('selector')[index]

jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

如何绑定事件:先获取jQuery对象,然后调用相关的API.

.bind()  为一个元素绑定一个事件处理程序

.unbind()  从元素上删除以前附加的一个事件处理程序

 .delegate()  为所有匹配选择器(selector参数)的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些目前已经匹配到的元素,也包括那些今后可能匹配到的元素。

 .live()    附加一个事件处理器到匹配目前选择器的所有元素,现在和未来。

 .on()      在选定的元素上绑定一个或者多个事件;

 .off()    移除一个事件处理函数


推荐使用.on()  和 .off() 这两个API


使用on绑定事件代理的写法:

$('ul').on('click','li',function() {  //事件代理,把事件委托在ul上,监听 li

console.log(this);

}


jQuery 如何展示/隐藏元素?

jQuery展示元素  :通过调用.show()

jQuery隐藏元素: 通过调用.hide()

 jQuery 动画如何使用?

调用.animate() 的方法

如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

1. 设置元素内部的HTML内容:  $('selector').html('HTML')

2. 获取元素内部的HTML内容:$('selector').html()

3. 设置元素内部文本:  $('selector').text("content");

4. 获取元素内部文本:  $('selector').text();

如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

1. 设置表单用户输入或选择的内容:  $('selector').val("Text")

2. 获取表单输入或者选择的内容:  $('selector').val()

3. 设置元素的属性:  $('selector').attr('property':'value')

4. 获取元素的属性:  $('selector').attr('property')

 使用 jQuery实现如下效果

效果1

. 使用 jQuery 实现如下效果

效果2

实现如下效果

效果3

  左右切换的 Tab 效果

左右切换

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

推荐阅读更多精彩内容

  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,360评论 0 8
  • 1、 jQuery 能做什么? jquery是一个丰富的js库,内部对js的很多复杂的方法进行了封装和加工,比如j...
    zh_yang阅读 1,415评论 6 13
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,673评论 18 503
  • 后会无期 这是去年看韩寒导演的作品的名字。很有文化,这电影名字。当然,电影内容也是不出我们所料,很有韩寒的风格。 ...
    没有故事的蜀黍阅读 164评论 0 0
  • 凛冬至,街旁冷肃,远行亦应归家。 寒夜深,空屋沉寂,遥想家乡暖炉。 抬头望,灯火依稀,离家游子仍在。 随笔书,三言...
    iManuel阅读 208评论 0 1