jQuery使用总结

138 阅读1分钟

jQuery

如何获取元素

  1. 通过css选择器获取
 $(document) //选择整个文档对象
 $('#myId') //选择ID为myId的网页元素  
 $('div.myClass') // 选择class为myClass的div元素  
 $('input[name=first]') // 选择name属性等于first的input元素
  1. jQuery特有选择器
$('a:first') //选择网页中第一个a元素  
 $('tr:odd') //选择表格的奇数行  
 $('#myForm :input') // 选择表单中的input元素 
 $('div:visible') //选择可见的div元素  
 $('div:gt(2)') // 选择所有的div元素,除了前三个
 $('div:animated') // 选择当前处于动画状态的div元素

链式操作

jQuery核心设计思想,选中网页元素以后,可以对它进行操作,并且操作之后可以继续操作,像链条一样,比如:

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

这段代码执行的操作是 1.找到div元素 2.选择div元素中的h3元素 3.选择h3元素中的第三个 4.对这第三个元素修改他的html内容为hello

创建元素

1、使用$函数创建新元素

var $newElement=$('<div><p>段落</p></div>');//创建元素,返回jQuery对象

2.添加子元素 普通字符串(可包含各种html标签)

$('body').append('html字符串');

jQuery对象

 $getParagraph=$("p");
 $("div").append($getParagraph);//运行后p段落会变成div的子元素

使用clone方法克隆页面中已经有的元素(jQuery对象)

$getParagraph=$("p").clone();//这样就避免了上一个方法中p段落会变成div的子元素,实现复制

3.其他操作方法(与append类似)

  • prepend 将参数内容插入到每个匹配元素内部的 最前面
  • appendTo 将匹配的元素插入到目标元素内部的最后面(同append)
  • prependTo 将匹配的元素插入到目标元素内部的最前面(同prepend)

移动元素

两种方式

 $('div').insertAfter($('p')); //div移动到p前面
$('p').after($('div')); //div移动到p后面

这两种方式效果一样,只是顺序不同,但是实际上他们有很大的区别,就是返回的元素不同,第一种方法返回div,第二种返回p。 共有4对这样的操作方法

  • .insertAfter()和.after():在现存元素的外部,从后面插入元素
  • .insertBefore()和.before():在现存元素的外部,从前面插入元素
  • .appendTo()和.append():在现存元素的内部,从后面插入元素
  • .prependTo()和.prepend():在现存元素的内部,从前面插入元素

修改元素属性

  1. 直接修改某种属性 如:改变img元素的 width 属性 $("img").attr("width","180");
  2. 使用函数来设置属性/值 语法: $(selector).attr(attribute,function(index,oldvalue))

设置多个属性/值对 语法: $(selector).attr({attribute:value, attribute:value ...})