jQuery学习笔记之创建DOM元素_jquery

利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。

而jQuery使用$就可以直接创建DOM元素

复制代码 代码如下:

var oNewP = $("<p>使用jQuery创建的内容</p>");

以上代码等同于javascript

复制代码 代码如下:

            var oNewP2 = document.createElement("p");
            var oText = document.createTextNode("这是使用javascript方法创建的内容");
            oNewP2.appendChild(oText);

例:使用jQuery创建DOM

复制代码 代码如下:

<script type="text/javascript">
        $(function(){
            var oNewP = $("<p>使用jQuery创建的内容</p>");
            oNewP.insertAfter("#display");     //insertAfter方法
        })
       
        </script>
        <div id="display"></div>

使用jQuery大大缩短了代码长度。节省了编写时间。希望本文能给小伙伴们一些提示,有疑问请给我留言。

时间: 2024-09-13 11:53:34

jQuery学习笔记之创建DOM元素_jquery的相关文章

基于jquery的关于动态创建DOM元素的问题_jquery

复制代码 代码如下: <script type="text/javascript"> document.getElementById("testDiv").innerHTML ="动态创建的div"; </script> 而且用的应该是还是乐此不疲,但是有多少人知道这是错误的做法!错误的原因: (1) 在页面加载时改变了页面的结构. 在IE6中如果网络变慢或者页面内容太大就会出现"终止操作"的错误. 也

jQuery 创建Dom元素_jquery

代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb231

jQuery创建DOM元素实例解析_jquery

本文实例讲述了jQuery创建DOM元素的使用技巧.分享给大家供大家参考.具体分析如下: 利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery使用$就可以直接创建DOM元素 复制代码 代码如下: var oNewP = $("<p>使用jQuery创建的内容</p>"); 以上代码等同于javascript 复制代码

jQuery学习笔记之DOM操作、事件绑定(2)

jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https://github.com/iyun/jQueryDemo.git --------------------学习目录------------------------ 4.DOM操作(节点增删改查) 节点查找:节点分为三种类型:元素节点.属性节点.文本节点 创建节点 创建元素节点 使用 jQuery

jQuery学习笔记之入门_jquery

最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下: 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: $('#info').val('Hello World!'); 嗯,可以看

jQuery学习笔记之回调函数_jquery

1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法. 2.代码 JS代码 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opacity:0.1

Jquery 学习笔记(二)jQuery性能优化指南

Jquery 学习笔记(二) -jQuery性能优化指南 2009年11月30日 一 作者:   邦畿千里   1,总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HTML代码: <div id="content"> <form method="post" action="#"> <h2>交通信号灯<

jQuery学习笔记之jQuery的Ajax(3)

jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ---------------------------- 6.0 jQuery ajax 浏览器给我们提供的XMLHttpRequest的作用是来发送http请求. js代码发送一个http的请求 XMLHttpRequest的四步:创建对象.注册监听.建立连接.发送数据 异步交互的6个方法(发送http请求) ajax()

jQuery学习笔记之概念(1)

jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuery的Ajax ------------------------------------------------ 前言:当前流行的JavaScript库有: jQuery.MooTools.Prototype.Dojo.YUI.EXT_JS.DWR 1.概念: 核心库.UI和插件等. jQuery是继