牛叉的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 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
php数组键值用法实例分析
2015/02/27 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
php取出数组单个值的方法
2018/03/12 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
js css自定义分页效果
2017/02/24 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
uni-app实现点赞评论功能
2019/11/25 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现电子词典
2020/04/23 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
static函数与普通函数有什么区别
2015/12/25 面试题
应届生.NET方向面试题
2015/05/23 面试题
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
后进生评语大全
2015/01/04 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
2015年大学生工作总结
2015/04/21 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
学生会部长竞选稿
2015/11/19 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python