什么是jQuery?
jQuery是目前使用最广泛的javascript函数库。是目前使用最广泛的javascript函数库。截止目前,全球已有90%的网站在使用。
1. jQuery 如何获取元素
jQuery的基本思想和用法就是选择某个网页元素,然后再对其进行操作。
使用的第一步,其实就是将一个选择表达式放进构造函数jQuery()[简写为$]然后得到被选中的元素。
选择表达式可以时CSS选择器,也可以时jQuer特有的表达式。
以下为CSS选择器表达式:
$(document) //选择整个文档对象
$('#testId') //选择ID为testId的网页元素
$('div.testClass') // 选择class为testClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素
以下为jQuery特有选择器表达式:
$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择除了前三个之外的所有div元素
$('#myForm :input') // 选择表单中的input元素
$('div:animated') // 选择当前处于动画状态的div元素
2. jQuery的链式操作
链式操作就是指,选中网页元素以后,可以对他进行一系列的操作,而这些操作连接在一起,可以以链条的样式写出来。
$('div').find('h1').eq(1).html('Hello');
可以拆解为
$('div') //找到div元素
.find('h1') //选择其中的h3元素
.eq(1) //选择第2个h1元素
.html('Hello'); //将它的内容改为Hello
3. jQuer如何创建元素
创建新元素的方法非常简单,只要把新元素直接传入jQuery的构造函数就行了:
$("<p>我是新段落。</p>").appendTo($("body")); //这样就能创建新的段落
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');
4. jQuery如何移动元素
即操作元素在网页中的位置移动。
移动元素的方法也有两种:
1.直接移动元素到目标位置
2.移动其他元素,使得目标元素到达理想位置。
使用.insertAfter()把div元素移动到p元素后面:
$('div').insertAfter($('p'));
使用.after()把p元素加到div前面:
$('p').after($('div'));
其他的方法:
.insertBefore()和.before():在现存元素的外部,从前面插入元素
.appendTo()和.append():在现存元素的内部,从后面插入元素
.prependTo()和.prepend():在现存元素的内部,从前面插入元素
如何修改jQuery的属性
可以通过 attr( ) 函数修改标签的属性值
使用方法:
$('#id定位标签').attr('原有属性名', '修改后的属性名')