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元素
链式操作
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():在现存元素的内部,从前面插入元素
修改元素属性
- 直接修改某种属性 如:改变img元素的 width 属性 $("img").attr("width","180");
- 使用函数来设置属性/值 语法: $(selector).attr(attribute,function(index,oldvalue))
设置多个属性/值对 语法: $(selector).attr({attribute:value, attribute:value ...})