JQuery
1. Jquery与DOM对象是不一样的
DOM对象:
<p id=”imcoo”></p>
<script>
var p=document.getElementById(‘imooc’);
p.innerHTML=’您好,好好学习’;
p.style.color=’red’;
</script>
通过DOM原生的DOM模型获取DOM元素,再通过innerHTML与stryle属性处理
JQuery:
<p id=”imcoo”></p>
var p=$(‘#imooc’);
p,html(“好好学习”).css(‘color’,’red’);
通过$方式获取$p的JQuery对象,$P是一个类数组对象,这个对象里面包含DONM对象的信息,然后封装了很多操作,调用自己的方法Html,css,得到效果与JavaScript处理的结果一致
2. JQuery对象转化为DOM对象
JQuery库本身还是JavaScript代码,它只是对JavaScript进行封装,为了是提供更好的操作。JQuery是一个类数组对象,DOM对象是一个单独的DOM元素。
JQuery转化为DOM元素
<div>元素1</div>
<div>元素2</div>
var $div=$(‘div’)//JQuery对象
var div=$div[0]//转化为DOM对象
var div=$div.get(0)//通过get方法获取
3. DOM元素转化为JQuery对象
<div>元素1</div>
<div>元素2</div>
获取DOM元素
var div =docment.getElementByTagName(‘div’);//DOM元素
var $div=$(div),转化为JQuery对象(类数组)
4. JQuery-ID选择器
页面元素的操作都需要节点的支持,JQuery提供一种根据Id属性直接获取的方法:$(“#id”) 注意在页面中id属性是唯一的。
ID选择器在JQuery中使用JS的docment.get ElementById的方法。
5. 类选择器
通过class样式进行获取节点的
$(“.class”) 类选择器相对id选择器来说,效率相对低一点但是优势是可以多选。jQuery使用js原生的get ElementByClassName函数来实现的,内部实现了很多方法。
/通过原生方法处理
//样式是可以多选的,所以得到的是一个合集
//需要通过循环给合集中每一个元素修改样式
var divs =document.getElementsByClassName('aaron');
for (var i = 0; i <divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
<script type="text/javascript">
//通过jQuery直接传入class
//class选择器可以选择多个元素
$(".aaron").css("border", "3px solidred");
</script>
6. 元素选择器
根据给定的(html)标记名称选择所有的元素
$(“element”)搜索制定的元素签名的所有节点,这个是集合操作。同样的也是js原生getElemrntByTagName函数实现的
<script type="text/javascript">
//通过原生方法处理
//获取到所有的节点标记名为div的元素
//给每一个div加上蓝色的边框
var divs =document.getElementsByTagName('div');
for (var i = 0; i <divs.length; i++) {
divs[i].style.border ="3px solid blue";
}
</script>
<script type="text/javascript">
//通过jQuery直接传入标签名p
//标签是可以多个的,所以得到的同样也是一个合集
$("div").css("border", "3px solid red");
</script>
7. 全选择器
选中页面中所有的元素$(“*”)
是使用js原生方法getElementByTagName函数在传入参数为*
8. 层级选择器
$(“parent>child”):子选择器:选择所有指定“parent”元素中指定的“child”的直接子元素
$(“ancestor descendant”):后代选择器
$(“prev+next”):相邻兄弟选择器
$(“prev~sibings”):一般选择器,匹配‘prev’元素后的所有兄弟元素
//子选择器
//$('div >p') 选择所有div元素里面的子元素P
//后代选择器
//$('div p') 选择所有div元素里面的p元素
//相邻兄弟选择器
//选取prev后面的第一个的div兄弟节点
//一般相邻选择器
//选取prev后面的所有的div兄弟节点
9. jQuery的属性
操作DOM方法主要有三个,getAttribute、setAttribute、removeAttribute方法。Jquery中使用attr()方法获取合设置属性
art()表达式:
1. attr(传入属性名):获取属性值
2. attr(属性名,属性值):设置属性值
3. attr(属性名,函数名)通过函数返回值设定属性的值
4. attr(attributes):通过键值对,对属性赋值
removeAttr删除方法
html()方法(DOM中的innerHtml)
1. html()不传入值,就是获取集合第一个匹配元素的html内容
2. html(htmlString)设置每一个匹配元素的html内容
3. html(function(index,oldhtml))用来返回设置html内容的函数
html与text的异同:
html处理的是元素的内容,text处理的是文本内容
val方法
1. val()无参数,获取匹配的元素集合中的第一个元素
2. val(value)设置匹配的元素集合的所有值
3. val(function),一个用来返回设置的函数
注意:1.通过val处理select元素,当没有选中的项时,它返回null
2.val多用来处理表单元素
3.select元素有multiple(多选)属性,并且至少有一个被选中,val方法返回的是一个数组
.html(),.text()和.val()的差异总结:
1.html(),text(),val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的html内容(包括html标签),text()用来读取元素的纯文本内容,包括其后代元素,val()是用来读取表单元素的"value"值。其中html()和text()方法不能使用在表单元素上,而val()只能使用在表单元素上;另外html()方法使用在多个元素上时,只读取第一个元素;val()方法和html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是text()和他们不一样,如果text()应用在多个元素上时,将会读取所有选中元素的文本内容。
2 html(htmlString),text(textString)和val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。
3 html(),text(),val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
addClass()增加一个样式,在元素本身拥有的样式的基础上再次增加
addClass(className1吃lassName2 …)可以一次增加多个样式
removeClass()删除样式
toggleClass():在匹配元素集合中的每一个元素上添加或者移除一个或多个样式,没有加,有删
css():获取或者设置元素的样式。
获取:css(样式的属性名),withd、height、background-color
设置:css(propertyName,value)