jQurey 基本操作
2021-02-03 本文已影响0人
Adder
1.jQuery如何获取元素
$(document) //选择整个文档对象
$('#myDiv') //选择ID为myDiv的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元
$('p') //所有的<p>元素
$(':header') //所有的标题元素:<h1> ~ <h6>
$(':animated') //所有的动画元素
$('p:contains(xiedaimala)') // 所有包含文本为xiedaimala的<p>元素,(区分大小写)
$(':hidden') //获取所有的隐藏元素:width和height为0、display:none、type=hidden、
$('[href]') //属性选择器:获取所有含有属性为href的元素
$('div + p') //每个div相邻的下一个<p>元素
$('div ~ p') //获取跟div同级的所有的<p>元素
2.jQuery 的链式操作是怎样的
$('div') //找到div元素
.find('h1') //选择其中的h1元素
.eq(2) //选择第3个h1元素
.html('xiedaimala'); //将它的内容改为xiedaimala
链式调用是通过return this的形式来实现的。在对象上的方法中,return this,把对象返回回来,之后就可以继续调用方法,实现链式操作。
myBox= {
getMe:function(){
// …
return this; // 实现链式编程的核心this,this的关键字,表示当前对象。
}
}
3.jQuery 如何创建元素
.append() // 结尾插入内容
.prepend() //开头插入内容
.after() //之后插入内容
.before() // 之前插入内容
4.jQuery 如何移动元素
(1).insertAfter
;把div元素移动span元素后面
$('div').insertAfter($('span'));
(2).after
;把span元素加到div元素前面:
$('span').after($('div'));
5.jQuery 如何修改元素的属性
以下为常见的取值和赋值函数
$('h1').html(); 获取h1的值
$('h1').html('xiedaimala'); 对h1进行赋值
$("div").text() 获取div的内容
$("div").text('新的内容') 设置div的内容
$('a').attr('属性名A') 获取属性名A的值
$('a').attr('属性名A','新的属性值') 表示为属性名A设置新的属性值
$("div").width() 获取div的宽度
$("div").width(400) 设置div的宽度为400px
$("div").height() 获取div的高度
$("div").height(400) 设置div的高度为400px
$('input').val() 表示获取某个表单元素的值
$('input').val('value') 表示设置某个表单元素的值