未加星标

Jquery基础 jQuery jQuery教程 jQuery代码 Jquery基础

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

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’元素后的所有兄弟元素

$(“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)

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: jQueryJavaScriptJavaHTML删除
分页:12
转载请注明
本文标题:Jquery基础 jQuery jQuery教程 jQuery代码 Jquery基础
本站链接:http://www.codesec.net/view/523150.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(76)