jQuery设计思想

72 阅读2分钟

1. jQuery 如何获取元素

选择某个网页元素,然后对其进行某种操作
将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。
css选择器

   $(document) //选择整个文档对象  
  
  $('#myId') //选择ID为myId的网页元素  
  
  $('div.myClass') // 选择class为myClass的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元素


位置选择API:

 $('div').next('p'); //选择div元素后面的第一个p元素
 $('div').parent(); //选择div元素的父元素
 $('div').closest('form'); //选择离div最近的那个form父元素
 $('div').children(); //选择div的所有子元素
 $('div').siblings(); //选择div的同级元素


过滤API:

 $('div').has('p'); // 选择包含p元素的div元素
 $('div').not('.myClass'); //选择class不等于myClass的div元素
 $('div').filter('.myClass'); //选择class等于myClass的div元素
 $('div').first(); //选择第1个div元素
 $('div').eq(5); //选择第6个div元素

2. jQuery 的链式操作是怎样的

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

$('div').find('h3').eq(2).html('Hello');

具体为

const api1 = jQuery('#test')
const api2 = api1.addClass('red')
const api3 = api2.addClass('gray')

3. jQuery 如何创建元素

jQuery接受参数为节点时,能够直接创建新元素。另外,API .clone()能够进行元素的复制。

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

4. jQuery 如何移动元素

1.直接移动该元素;2.移动其他元素,使得目标元素达到我们想要的位置。

  .insertAfter() .after()    //在现存元素的外部,从后面插入元素

  .insertBefore() .before()  //在现存元素的外部,从前面插入元素

  .appendTo() .append()      //在现存元素的内部,从后面插入元素

  .prependTo() .prepend()    //在现存元素的内部,从前面插入元素

区别
两者的元素编写位置不同:

  • B.insertAfter(A) //将B插入到A后
  • A.after(B) //在A后插入B

两个返回的元素不同:

  • B.insertAfter(A) //返回B
  • A.after(B) //返回A

5. jQuery 如何获取和修改元素的属性

利用函数重载,通过传参决定同一个函数进行取值或赋值操作。

  .html() //取出或设置html内容

  .text() //取出或设置text内容

  .attr() //取出或设置某个属性的值

  .width() //取出或设置某个元素的宽度

  .height() //取出或设置某个元素的高度

  .val() //取出某个表单元素的值