<p id=‘’hello”></p>

普通处理,通过标准JavaScript处理:

var p = document.getElementById('hello');

p.innerHTML = '您好!';

p.style.color = 'red';

jQuery的处理:

var $p = $('#hello');

$p.html('您好!').css('color','red');

jQuery对象转化成DOM对象

1.利用数组下标的方式读取到jQuery中的DOM对象

<div>元素一</div>
<div>元素二</div>
<div>元素三</div> var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
2.通过jQuery自带的get()方法
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法,转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

DOM对象转化成jQuery对象

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

jQuery对象与DOM对象及互相转化的更多相关文章

  1. jQuery对象和DOM对象和字符串之间的转化

    jQuery对象和DOM对象和字符串之间的转化 字符串---------->jQuery对象 $(HTML字符串): $('<div>我是祖国的一朵小花</div>') ...

  2. jQuery 对象与 Dom 对象转化

    首先,我们需要知道,为什么我们需要转化两者,原因在于,两者提供的方法不能共用. 比如: $("#id").innerHTML; document.getElementById(id ...

  3. JQuery学习笔记---jquery对象和DOM对象的关系

    1.DOM(Document  Object Model,文档对象模型).DOM树 { html (head&&body),  head(meta && title) ...

  4. jQuery对象和DOM对象的互相转换【 转】

    jQuery对象转换为dom对象 只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的 ...

  5. 关于jQuery对象与DOM对象

    今天遇到了关于jQuery对象与dom对象的区分问题.具体如下:对于元素<span id="aa" class="aa">hyz</span& ...

  6. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  7. 【Jquery系列】详解Jquery对象和Dom对象

    问题描述 本篇文章主要讲解Jquery对象和DOM对象,主要围绕如下五个方面来介绍: Jquery对象和dom对象定义 Jquery对象与dom对象区别 Jquery对象及运用举例 dom对象及运用举 ...

  8. jQuery对象转换为DOM对象(转)

    jQuery对象转换为dom对象 只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的 ...

  9. jQuery对象与DOM对象的相互转化

    jQuery是一个类数组对象,DOM对象就是一个单独的DOM元素,他们都是可以操作的DOM元素. 一.jQuery对象转化为DOM对象 有以下两种方法: 方法一:利用数组下标的方式读取jQuery中的 ...

随机推荐

  1. vscode使用Markdown文档编写

    首先安装vscode工具,具体的使用可以参考之前的博文:<Visual Studio Code教程:基础使用和自定义设置> VScode已经默认集成markdown文档编辑插件.可以新建一 ...

  2. Linux yum操作时出现Error: xz compression not available

    yum升级PHP版本的时候出现这个问题 由于CentOS6的系统安装了epel-release-latest-7.noarch.rpm 导致在使用yum命令时出现Error: xz compressi ...

  3. php-fpm使用

    /usr/local/php/sbin/php-fpm  --help -c <path>|<file> Look for php.ini file in this direc ...

  4. nextSibling VS nextElementSibling

    2. nextSibling vs nextElementSibling { //FF { 在Firefox中,link2的nextSibling并不是link3,因为两者之间有一个换行符. 这被认为 ...

  5. 【转】JMeter 聚合报告之90% Line参数说明

    其实要说明这个参数的含义非常简单,可能你早就知道他的含义,但我对这个参数一直有误解,而且还一直以为是“真理”,原于一次面试,被问到了这个问题,所以引起我这个参数的重新认识. 先说说我错误的认识: 我一 ...

  6. juc原子类之二:基本类型原子类AtomicInteger(AtomicLong、AtomicBoolean)

    一.AtomicInteger简介 AtomicInteger, AtomicLong和AtomicBoolean这3个基本类型的原子类的原理和用法相似.以AtomicInteger对基本类型的原子类 ...

  7. Java-Runoob:Java 运算符

    ylbtech-Java-Runoob:Java 运算符 1.返回顶部 1. Java 运算符 计算机的最基本用途之一就是执行数学运算,作为一门计算机语言,Java也提供了一套丰富的运算符来操纵变量. ...

  8. 大杀器TheFatRat

    项目地址:https://github.com/Screetsec/TheFatRat 安装TheFatRat root@sch01ar:/sch01ar# git clone https://git ...

  9. ceph 创建和删除osd

    ceph 创建和删除osd 1.概述         本次主要是使用ceph-deploy工具和使用ceph的相关命令实现在主机上指定磁盘创建和删除osd,本次以主机172.16.1.96(主机名ha ...

  10. MFC 文档/视图

    1.文档修改后,关闭时需要保存,主要用到2个函数,在需要更改文档内容的函数里调用SetModifiedFlag(TRUE),另一个就是SaveModified()函数,简单的例子: BOOL CMFC ...