jQuery
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
下面介绍jQuery的功能实现
一、获取元素
"选择某个网页元素,然后对其进行某种操作"。用‘$’符号代替jQuery构造函数。可以是id,也能是css选择器。
$('#test') //选择id为test的元素
$('.test') //选择classname是test的元素
二、jQuery 的链式操作是怎样的
jQuery 的链式:终选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来。
$('div').find('#child').addClass('red')
展开的话就是
$('div') //找到div元素
.find('#child') //选择其中的child元素
.addClass('red')//添加红色样式
jQuery 提供end()可以返回上一级元素
$('div').find('#child').addClass('red').end().addClass('yellow')
展开的就是
$('div') //找到div元素
.find('#child') //选择其中的child元素
.addClass('red')//添加红色样式
.end()//回到div元素
.addClass('yellow') 添加黄色样式
三、jQuery 如何创建元素
创建新元素的方法非常简单,只要把新元素直接传入jQuery的构造函数就行了
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');
四、jQuery 如何移动元素
有2种方法:一是直接移动该元素,另一种是方法是移动其他元素,使得目标元素达到我们想要的位置。
假定我们选中了一个div元素,需要把它移动到p元素后面。
第一种方法是使用.insertAfter(),把div元素移动p元素后面:
$('div').insertAfter($('p'));
第二种方法是使用.after(),把p元素加到div元素前面:
$('p').after($('div'));
表面上看,这两种方法的效果是一样的,唯一的不同似乎只是操作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。
使用这种模式的操作方法,一共有四对:
.insertAfter()和.after():在现存元素的外部,从后面插入元素
.insertBefore()和.before():在现存元素的外部,从前面插入元素
.appendTo()和.append():在现存元素的内部,从后面插入元素
.prependTo()和.prepend():在现存元素的内部,从前面插入元素
五、jQuery 如何修改元素的属性
获取匹配元素集中第一个元素的属性值,或为每个匹配元素设置一个或多个属性。
.arr(attributeName)
.arr(attributeName,value)
先要获取元素
addClass()为元素添加样式
removeClass()移除样式
六、遍历元素
利用each(fn)遍历元素
更多操作详细可阅读
jQuery API 中文文档 | jQuery 中文网www.jquery123.com