<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. bzoj 2763 [JLOI2011]飞行路线——分层图

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2763 分层图两种方法的练习. 1.把图分成k+1层,本层去上面一层的边免费.但空间时间都不算 ...

  2. 减少CXF日志打印

    场景:项目中引用cxf发布服务,服务调用产生的日志实在是太多了,实在是不能忍 官方文档:http://cxf.apache.org/docs/debugging-and-logging.html#De ...

  3. (转)使用PowerDesigner生成HTML功能

    本文转载自:http://www.cnblogs.com/CowboyProgrammer/archive/2009/04/28/1445423.html 使用PowerDesigner设计数据库关系 ...

  4. MySQL error : Deadlock found when trying to get lock; try restarting transaction

    在使用 MySQL 时,我们有时会遇到这样的报错:“Deadlock found when trying to get lock; try restarting transaction”. 在 14. ...

  5. 【转】Jmeter安装成功后的目录介绍

    1.bin目录 Jmeter.bat  打开Jmeter主界面 Jmeter使用的日志文件名称被定义到Jmeter.properties中,默认在Jmeter.log可查看日志 2.dosc和prin ...

  6. Vue.js:样式绑定

    ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...

  7. Python实现SSH连接远程服务器

    首先需要安装paramiko模块 #-*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import paramiko ssh = p ...

  8. Python之购物商场

    作业:购物商场 1.流程图 2.初始化用户账号存储文件 初始化存储一个空的用户账号字典,保存到文件 user.pkl.执行如下代码,即可初始化完成. #!/usr/bin/env python # - ...

  9. Flask之性能

    5.5 性能 一.不同角度的网站性能 普通用户认为的网站性能 网站性能对于普通用户来说,最直接的体现就是响应时间.用户在浏览器上直观感受到的网站响应速度,即从客户端发送请求,到服务器返回响应内容的时间 ...

  10. Java面向对象-String类

    1,实例化String对象 有两种方式,我们直接看代码: package com.java1234.chap03.sec08; public class Demo1 { public static v ...