我爱编程

jQuery知识点

2017-07-15  本文已影响0人  sutingy

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 效果

左右切换

上一篇 下一篇

猜你喜欢

热点阅读