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


Posted in Javascript onOctober 29, 2015

只有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);

});
Javascript 相关文章推荐
javascript cookies操作集合
Apr 12 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
js倒计时简单实现方法
Dec 17 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 #Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 #Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 #Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 #Javascript
JavaScript操作URL的相关内容集锦
Oct 29 #Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 #Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 #Javascript
You might like
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
详解vue axios二次封装
2018/07/22 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
python中的reduce内建函数使用方法指南
2014/08/31 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
基于Python正确读取资源文件
2020/09/14 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
优秀演讲稿范文
2013/12/29 职场文书
红色旅游心得体会
2014/09/03 职场文书
2015年材料员工作总结
2015/04/30 职场文书
高中运动会前导词
2015/07/20 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers