牛叉的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 相关文章推荐
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
js实现的折叠导航示例
Nov 29 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
js轮播图代码分享
Jul 14 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
javascript 动态添加表格行
2006/06/22 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
给Python入门者的一些编程建议
2015/06/15 Python
Python编程中的文件操作攻略
2015/10/16 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
python中的print()输出
2019/04/12 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
python中selenium库的基本使用详解
2020/07/31 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
初中科学教学反思
2014/01/21 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫