jQuery基础功能

112 阅读1分钟

什么是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('原有属性名', '修改后的属性名')