jQuery学习简单总结

132 阅读1分钟

最近简单了解了一下jQuery,将学习的内容做一个总结。

jQuery如何获取元素

基础语法:

$(selector).action() 

jQuery可以通过元素的id、类、类型、属性、属性值等等来查找选择HTML元素。
比如:

$('p')  //可以选取页面中所有的<p>元素
$('#test') //选取id = 'test'的元素
$('.test') // 选取class='test'的元素
$('[href]') //选取带有href属性值的元素
$('*') //同样可以使用通配符来选取所有元素

jQuery的链式操作是怎样的

$('#test').css.('border','1px solid red').attr('title','new style') 

上面的代码的意思是,id为test的元素调用了css()方法修改了样式,接着调用了attr()方法修改了属性。这样把调用的方法像链条一样串起来使用就叫做“链式操作”。
链式操作可以使代码更加整洁,不然上面的代码就需要先写一句来调用css()方法,再写一句调用attr()方法。

jQuery如何创建、移动元素

append() // 在被选取的元素结尾插入内容
prepend() // 在被选取的元素开头插入内容
after() // 在被选取的元素之后插入内容
before() // 在被选取的元素之前插入内容

上面四个方法可以在html里添加内容,下面用一个例子来做一下说明。
原结构:

<p>原内容</p>

接下来使用jQuery。

$('p').append('<span>插入结尾</span>')
$('p').prepend('<span>插入开头</span>')
$('p').after('<span>之后插入</span>')
$('p').before('<span>之前插入</span>')

可以得到下面的结果:

<span>之前插入</span>
<p>
    <span>插入开头</span>
    原内容
    <span>插入结尾</span>
</p>
<span>之后插入</span>

可以看到append()prepend()可以在元素内添加内容,after()before()可以在元素外面添加内容。
同样,追加元素还可以使用appendTo()prependTo()方法。与上面的方法的不同之处是,这两个方法追加的必须含有html元素。

$('p').appendTo(selector) //追加一个元素在所选元素结尾
$('p').prependTo(selector) //追加一个元素在所选元素开头

jQuery如何修改元素的属性

jQuery中的attr()方法可以用来设置元素的属性。
语法:

 $(selector).attr('attribute','value')

attr()也可以同时设置多个属性的值。

$('#test').attr({
   'href':'http://test.com/',
   'title':'new title'
})