乐趣区

关于jquery:jQuery的功能

jiezi

抉择元素

将一个抉择表达式，放进构造函数 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 元素

扭转后果集范畴 

 $('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 元素

从后果集登程，挪动到左近的相干元素，jQuery 也提供了在 DOM 树上的挪动办法：

 $('div').next('p'); // 抉择 div 元素前面的第一个 p 元素

  $('div').parent(); // 抉择 div 元素的父元素

  $('div').closest('form'); // 抉择离 div 最近的那个 form 父元素

  $('div').children(); // 抉择 div 的所有子元素

  $('div').siblings(); // 抉择 div 的同级元素

获取元素

通过 attr() 办法来批改元素的属性，attr() 办法设置或返回被选元素的属性值。
依据该办法不同的参数，其工作形式也有所差别。语法为：
$(selector).attr(attribute,value)

获取节点属性名的值，相当于 getAttribute(key) 办法
$(this).attr(key);
设置节点属性的值，相当于 setAttribute(key,value) 办法
$(this).attr(key, value);
获取节点属性的值
var diywidgetid = $('#w_1').attr('diywidgetid');
获取某个元素节点的 value 值，相当于 $(this).attr(“value”);
$(this).val();
设置某个元素节点的 value 值，相当于 $(this).attr(“value”,value);
$(this).val(value);

链式操作

选中网页元素当前，能够对它进行一系列操作，并且所有操作能够连贯在一起，以链条的模式写进去 

 $('div') // 找到 div 元素

   .find('h3') // 抉择其中的 h3 元素

   .eq(2) // 抉择第 3 个 h3 元素

   .html('Hello'); // 将它的内容改为 Hello

原理就是每一步的 jQuery 操作，返回的都是一个 jQuery 对象，所以不同操作能够连在一起。

.end() 办法，使得后果集能够后退一步：

 $('div')

   .find('h3')

   .eq(2)

   .html('Hello')

   .end() // 退回到选中所有的 h3 元素的那一步

   .eq(0) // 选中第一个 h3 元素

   .html('World'); // 将它的内容改为 World

创立元素

把新元素传入 jQuery 的构造函数 

  $('<p>Hello</p>');

  $('<li class="new">new list item</li>');

  $('ul').append('<li>list item</li>');

挪动元素

两组办法，来操作元素在网页中的地位挪动。一组办法是间接挪动该元素，另一组办法是挪动其余元素，使得指标元素达到咱们想要的地位。
情景: 假设咱们选中了一个 div 元素，须要把它挪动到 p 元素前面。
办法 1. 应用.insertAfter()，把 div 元素挪动 p 元素前面：
$('div').insertAfter($('p'));
办法 2. 应用.after()，把 p 元素加到 div 元素后面：
$('p').after($('div'));

区别: 返回的元素不一样。第一种办法返回 div 元素，第二种办法返回 p 元素。依据须要，抉择应用哪一种办法。
四对操作方法:

  .insertAfter() 和.after()：在现存元素的内部，从前面插入元素

  .insertBefore() 和.before()：在现存元素的内部，从后面插入元素

  .appendTo() 和.append()：在现存元素的外部，从前面插入元素

  .prependTo() 和.prepend()：在现存元素的外部，从后面插入元素

批改元素的属性

addClass(): 向匹配的元素增加指定的类名。
attr(): 设置或返回匹配元素的属性和值。
hasClass(): 查看匹配的元素是否领有指定的类。
html(): 设置或返回匹配的元素汇合中的 HTML 内容。
removeAttr(): 从所有匹配的元素中移除指定的属性。
removeClass(): 从所有匹配的元素中删除全副或者指定的类。
toggleClass(): 从匹配的元素中增加或删除一个类。
val(): 设置或返回匹配元素的值。

退出移动版