jQuery设计思想

81 阅读1分钟

jQuery 如何获取元素

jQuery将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素

选择表达式可以是css选择器:

$(document) //选择整个文档对象 
$('#Id') //选择ID为Id的网页元素 
$('div.className') // 选择class为className的div元素 
$('input[name=first]') // 选择name属性等于first的input元素

也可以是jQuery特有的表达式

$('a:first') //选择网页中第一个a元素  
$('tr:odd') //选择表格的奇数行  
$('#myForm :input') // 选择表单中的input元素  
$('div:visible') //选择可见的div元素  
$('div:gt(2)') // 选择所有的div元素,除了前三个  
$('div:animated') // 选择当前处于动画状态的div元素

jQuery 的链式操作是怎样的

jQuery选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来

例如:$('#test').find('.test').html('hello') 

这个方法能够让我们更加方便的进行操作,其原理就是在每个函数操作完后都会返回这个操作的对象,这样就能继续下一步操作,同时jQuery还提供了回退的方法end() ,这样能够在进行操作后退回继续操作,例如:

$('#test').find('.test').html('hello').end().html('hi')
//此时操作在给idtest的元素下面的类名叫test的元素的内容改为hello
//然后回退到id选择器把idtest的元素的内容改为hi

jQuery 如何创建元素

创建新元素的方法非常简单,只要把新元素直接传入jQuery的构造函数就行了:

$('<p>Hello</p>')
$('<li class="new">new list item</li>')
$('ul').append('<li>list item</li>')

jQuery 如何移动元素

.insertAfter()和.after():在现存元素的外部,从后面插入元素  
.insertBefore()和.before():在现存元素的外部,从前面插入元素  
.appendTo()和.append():在现存元素的内部,从后面插入元素  
.prependTo()和.prepend():在现存元素的内部,从前面插入元素

a.insertAfter(b)b.after(a) 得到的效果虽然一样,区别在第一个是将a插入到b的后面,返回值是a,第二种是在b的后面增加a,返回值是b,其他方法用法以此类推

jQuery 如何修改元素的属性

$div.text(?) //读写文本内容
$div.html(?) //读写HTML内容
$div.css({'color': 'red'}) //读写css
$div.on('click', fn) //创建一个监听事件,鼠标点击后执行函数fn
$div.off('click', fn) //删除div的click事件

一般情况下:括号有内容就是改写,没有的就是读属性