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

所属分类: 网络编程 / JavaScript 阅读数: 684
收藏 0 赞 0 分享

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

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

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

良好的书写风格:

复制代码 代码如下:

var $input=$("input")

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>完善的处理机制

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

复制代码 代码如下:

$('#tt').css("color","red");

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

5.jQuery选择器

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

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

<1>偶数与奇数选择器

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

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

复制代码 代码如下:

p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}

<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元素的属性。
如:

复制代码 代码如下:

document.forms
element.src

只能用于WEB

3.CSS_DOM

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

复制代码 代码如下:

element.style.color=“red”;

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()方法

返回相对视窗的偏移

复制代码 代码如下:

var offset=$("p").offset();
var left=offset.left;
var top=offset.top;

<4>position()

复制代码 代码如下:

//返回相对最近一个position样式的偏移。
var position=$("p").position();
var left=position.left;
var top=position.top;

<5>scrollTop()和scrollLeft()

复制代码 代码如下:

//返回滚动条距离顶端的距离与距离左侧的距离。
var $p=$("p");
var top=$p.scrollTop();
var left=$p.scrollLeft();
//同样可以设置滚动到指定位置:
$("ab").scrollTop(300);

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

复制代码 代码如下:

$(document).mousemove(function(e){
  $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多