锋利的jQuery--jQuery与DOM对象的互相转换，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);
});

转载于:https://www.cnblogs.com/zqzjs/p/4918841.html

锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)相关推荐

对象转数组的方法(常见三种)
对象转数组的方法(常见三种) Object.values(obj) //属性值 Object.keys(obj) //属性名 Object.entries(obj) //属性名和属性值
jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器
jQuery简介: jQuery是一个高效.精简并且功能丰富的javascript库,它提供的API简单易学,且兼容众多浏览器,极大地简化了javascript代码开发,包含内容:HTML 元素选取. ...
JavaScript-操作DOM对象-创建和插入dom节点
插入节点我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!会产生覆盖将标签追加到其他标签 ...
jQuery中通过JSONP来跨域获取数据的三种方式
第一种方法是在ajax函数中设置dataType为'jsonp' $.ajax({dataType: 'jsonp',url: 'http://www.a.com/user?id=123',succe ...
C# 中对象与JSON字符串相互转换的三种方法
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 关于内存对象和JSON字符串的相互转换,在实际项目中应比较广泛,经过一番搜索,找到如下 ...
java .class 实例对象_Java产生Class类的三种实例化对象的方法
Java产生Class类的三种实例化对象的方法 1.object.getClass 2.类名.class直接根据某个具体的类来取得Class实例化对象 3.Class.forName(String c ...
Spring中把一个bean对象交给Spring容器管理的三种方式
一.使用@Component,把bean对象依赖交给Spring容器注意,该注解不能使用,则说明未添加依赖,需要去该项目pom.xml文件内引入依赖,若该项目只是作为一个存放工具类的子模块项目,没有 ...
html语言字体上下滚动代码,div+css+jquery公告栏垂直(上下)文字单行滚动特效代码（三种样式）...
网站公告栏一般采用滚动形式,随着jquery的出现,特效做起来更加简单,所以目前大多数网站都有自己的公告栏目,采用文字滚动的形式,今天来分享几个垂直公告文字滚动特效,分别是全面版,常用版,以及极简版! ...
html dom对象常用事件,HTML Dom Event对象onkeydown事件
语法: οnkeydοwn="SomeJavaScriptCode" onkeydown 事件会在用户按下一个键盘按键时发生, ie浏览器使用event.keyCode获取被按下的 ...

锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)

锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)相关推荐

最新文章

热门文章