微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作

只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的dom操作。这就需要我们知道如何将jQuery对象和DOM的相互转换的方法

1.jQuery对象就是通过jQuery包装DOM对象后产生的对象。

2.jQuery对象和DOM对象的相互转换。

良好的书写风格:

代码如下:

jQuery获取的对象在变量前面加上$。

<1>jQUery对象转成DOM对象,两种方法:[index]和get(index)

a:var $cr=$("#cr") //jQuery对象 var cr=$cr[0] //DOM对象 b:var $cr=$("#cr") //jQuery对象 var cr=$cr.get(0); //DOM对象

<2>DOM对象转成jQuery对象

var cr=document.getElementById("cr"); //DOM对象 var $cr=$(cr);

3.解决与其他库的冲突

jQuery.noConflict()。 jQuery用$作为自身的快捷方式。

4.使用jQuery的优点

<1>简洁的写法 <2>支持CC1到CCS3 <3>完善的处理机制

运行上面的代码浏览器就会报错! 但是如果这么写的话:

代码如下:

浏览器不会因为没有这个元素而报错!

5.jQuery选择器

jQuery选择器是jQuery的重中之重!

jQuery过滤选择器与CSS中的伪类选择器相似。

<1>偶数与奇数选择器

偶数:$("tr:even") 奇数:$("tr:odd")

<2>CSS3 伪类选择器奇偶数

代码如下:

<2>表单类型选择器

<3>转义选择器防止出错

6.DOM操作分类(1:DOM Core 2.HTML-DOM 3.css-DOM)

1.DOM Core

DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它。它的用途并不仅限于处理网页。也可以用来处理任何一种使用标记语言编写出来的文档,例如:XML。

2.HTML_DOM

在使用JavaScript和DOM为HTML文件编写脚本时,有许多专属于HTML——DOM的属性。 HTML_DOM提供了一些更加简明的记号来描述各种HTML元素的属性。 如:

代码如下:

只能用于WEB

3.CSS_DOM

CSS_DOM是针对CSS的操作。主要是获取和设置style对象的各种属性。 通过改变style对象的各种属性。改变不同效果

代码如下:

7.遍历节点

1.children() 2.next() 3.prev() 4.siblings() 5.closest()

8.jquey的css

<1>可以使用opacity设置透明度,jQuery已经处理好了兼容性问题。

$("p").css("opacity","0.5");

<2>$("p").height(100) //100认单位是px,如果要用别的单位,必须要用字符串

<3>offset()方法

返回相对视窗的偏移

代码如下:

<4>position()

代码如下:
一个position样式的偏移。 var position=$("p").position(); var left=position.left; var top=position.top;

<5>scrollTop()和scrollLeft()

代码如下:

<6>pageX与pageY,获取鼠标在页面上的位置

代码如下:

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐