锋利的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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/431187.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站显示不正常服务器怎么弄,你真的知道网站出现收录不正常的原因是什么吗...

当一个新网站构建起来时&#xff0c;每天所担心的就是一个收录量。当你偶然看到收录减少时&#xff0c;不免心有所寒。不知道怎么“得罪”蜘蛛大哥了&#xff0c;发生了什么事把收录量给“没收”了。作为SEOer&#xff0c;我们知道在搜索引擎蜘蛛的心里内容的质量占有很大比重&…

ajax status php,解决laravel 出现ajax请求419(unknown status)的问题

如下所示&#xff1a;这个是因为laravel自带csrf验证的问题解决方法方法一&#xff1a;去关掉laravel的csrf验证&#xff0c;但这个人不建议&#xff0c;方法也不写出来了。方法二&#xff1a;把该接口写到api.php上就好了方法三&#xff1a;首先在页面加上然后请求的在header里…

string 转比较运算符_运算符

1、概述算术运算符 - * /基本运算算术运算符%取模&#xff0c;取余数&#xff0c;计算整除算术运算符 --自增 自减比较运算符 !相等比较 不等比较逻辑运算符&& &逻辑与 短路与&#xff08;同真为真&#xff09;逻辑运算符|| |逻辑或 短路或&#xff08;一真则真&am…

神舟战神换cpu教程_神舟将十代i5称为“神U出世”?聊聊到底有哪些优势

在各个品牌大力的宣传之下&#xff0c;消费者对于笔记本电脑乃至各种数码硬件的要求都越来越高。既要好的处理器、显卡等性能配置&#xff0c;又要好的屏幕&#xff0c;甚至还得低定价&#xff0c;这就产生一种鱼与熊掌不可兼得的感觉了。就在今年的表白日&#xff0c;神舟电脑…

服务器系统杀毒系统崩溃怎么恢复,系统崩溃是什么原因导致的

大家在使用电脑的时候&#xff0c;经常都是需要安装一些软件和其他东西的。但是在安装软件的时候&#xff0c;很容易让一些病毒侵入电脑。一旦病毒侵入了电脑&#xff0c;就很容易让电脑系统崩溃。那么系统崩溃是什么原因导致的呢&#xff1f;下面就来告诉大家系统崩溃的原因及…

atom配置python环境_python与excel有段情之二:python的安装和环境配置

索引python与excel有段情之一&#xff1a;前述python与excel有段情之二&#xff1a;python的安装和环境配置python与excel有段情之三&#xff1a;python编程前的准备工作和基本概念python与excel有段情之四&#xff1a;案例1.把多excel表抽数生成新excel表python与excel有段情之…

x86服务器当虚拟化的存储,龙存科技-软件定义数据中心产品提供商

一、应用背景服务器虚拟化技术是云计算的核心技术&#xff0c;是将系统进行虚拟化应用于服务器之上的技术。面向应用集中化处理&#xff0c;能最大的程度上利用硬件资源&#xff0c;并且实现灵活分配。虚拟化技术是将计算机底层的硬件功能的模拟&#xff0c;需要复杂的语句和机…

使用python开发网页游戏_不敢想!不敢想!我用Python自动玩转2048游戏

近来在折腾selenium自动化, 感觉配合爬虫很有意思, 大多数以前难以模拟登录的网站都可以爬了&#xff0c;折腾了这么久,于是想自动玩个2048游戏&#xff01;嘿嘿, 我是一个不擅长玩游戏的人, 以前玩2048就经常得了很低的分&#xff0c;每每想起都”痛心疾首”, 所以我打算拿204…

【飞谷六期】爬虫项目4

经过了几天的摸索&#xff0c;照猫画虎的把爬虫的部分做完了。 但是很多原理性的东西都不是很理解&#xff0c;就是照着抄的&#xff0c;还需要继续学习。 看这个目录结构&#xff0c;只看.py的文件&#xff0c;.pyc的文件是运行的时候生成的不管它。 items.py:定义想要导出的数…

activex控件 新对象 ocx 初始化_Office已经支持64位的树控件Treeview了

之前在使用Office365时发现微软其实已经悄悄地开始提供了64位的Treeview树控件&#xff0c;只是并没有公开宣布。当时是在一个网友的电脑上说他可以在64位Excel中可直接使用64位树控件&#xff0c;当时以为他看到的只是一个假的树控件&#xff0c;后来经过远程他的电脑&#xf…

mysql 获取昨天凌晨_MySQL慢日志体系建设

慢查询日志是MySQL提供的一种日志记录&#xff0c;用来记录在MySQL中响应时间超过阈值的SQL语句&#xff0c;在很大程度上会影响数据库整体的性能&#xff0c;是MySQL优化的一个重要方向。在58的云DB平台建设中&#xff0c;慢SQL系统作为一个非常重要功能模块&#xff0c;不仅是…

十进制小数化为二进制小数的方法是什么_十进制转成二进制的两种方式

第一种&#xff1a;用2整除的方式。用2整除十进制整数&#xff0c;得到一个商和余数&#xff1b;再用2去除商&#xff0c;又会得到一个商和余数&#xff0c;如此重复&#xff0c;直到商为小于1时为止&#xff0c;然后把先得到余数作为二进制数的低位有效位&#xff0c;后得到的…

notes邮件正文显示不全_python实现一次性批量发邮件

在上次实现了批量修改文件名后&#xff08;链接&#xff1a;https://zhuanlan.zhihu.com/p/133727520&#xff09;&#xff0c;又拿来了同事编写的一次性批量发邮件小程序&#xff0c;小编每月向分公司发数据任务算是基本上实现了自动化 需要新建2个.py文件实现&#xff0c;一个…

用python画五角星中心颜色不同_画个五角星让它绕中心点旋转

李兴球Python画个五角星绕中心点旋转 画一个五角星让它旋转起来,这在Python中有几个方案可选,这里提供一个不是用自定义形状的方案,以下是部分源代码, 其实关键的代码函数&#xff0c;也就是starpoints这个函数&#xff0c;它是核心。代码已经给你了。接下来就看你的聪明才智了…

oracle 建表id自增长_oracle 左连接、右连接、全外连接、内连接、以及 (+) 号用法...

Oracle中的连接可分为&#xff0c;内连接(INNER JOIN)、外连接(OUTER JOIN)、全连接(FULL JOIN)&#xff0c;不光是 Oracle&#xff0c;其他很多的数据库也都有这3种连接查询方式。Oracle 外连接(OUTER JOIN)&#xff0c;又分为左外连接和右外连接&#xff0c;即左连接和右连接…

匿名函数自我调用_Python中的匿名函数及递归思想简析

匿名函数前言上次咱们基本说了一下函数的定义及简单使用&#xff0c;Python中的基本函数及其常用用法简析&#xff0c;现在咱们整点进阶一些的。同样都是小白&#xff0c;咱也不知道实际需要不&#xff0c;但是对于函数的执行顺序以及装饰器的理解还是很有必要的。首先咱们先简…

java解析dxf文件_浅析JVM方法解析、创建和链接

一&#xff1a;前言上周末写了一篇文章《你知道Java类是如何被加载的吗&#xff1f;》&#xff0c;分析了HotSpot是如何加载Java类的&#xff0c;干脆趁热打铁&#xff0c;本周末再来分析下Hotspot又是如何解析、创建和链接类方法的。二&#xff1a;Class文件中的Java方法Java类…

python解释器的提示符是shell嘛_python解释器怎么运行

python解释器怎么运行&#xff1f; 在Python可用的机器上&#xff0c;Python解释器通常放在 /usr/local/bin/python3.7 ; 把 /usr/local/bin 放到你 Unix shell 的搜索路径当中 , 这样就能键入命令:python3.7 就能运行了。安装时可以选择安装目录&#xff0c;所以解释器也可能在…

判断运营商_三大通信运营商步调一致,大流量互联网套餐陆续成绝版

此前笔者就发过一篇文章“预警”三大通信运营商的大流量互联网资费套餐面临调整&#xff0c;很可能一直流行的200G定向流量套餐都将会大幅缩减&#xff0c;不过未引起大家的注意。当初的判断&#xff0c;是基于卡商渠道和内部传言消息分析&#xff0c;同时也基于此前通信运营商…

python实现图形旋转_Python3+OpenCV2实现图像的几何变换

几何变换可以看成图像中物体&#xff08;或像素&#xff09;空间位置改变&#xff0c;或者说是像素的移动。 几何运算需要空间变换和灰度级差值两个步骤的算法&#xff0c;像素通过变换映射到新的坐标位置&#xff0c;新的位置可能是在几个像素之间&#xff0c;即不一定为整数坐…