首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从零开始学 Web 之 jQuery(四)元素创建添加与删除,自定义属性

一、元素创建添加和删除 1、方式一:以对象方式创建元素 append,appendTo :在被选元素所有元素结尾插入内容(增加元素)。...prepend,prependTo:在被选元素所有元素开头插入元素(增加元素)。 before:在当前被选元素之后插入内容(相当于增加兄弟元素)。...")); // 元素添加(主动) 元素.appendTo(父元素); // $("......mouseleave(function () { $(this).css("backgroundColor",""); }); }); 注意:获取元素通过...); 3、元素删除 3.1、清除父元素中所有的元素 语法1: 父元素.html(""); 语法2: 父元素.empty(); 3.2、清除单个子元素 语法: 元素.remove(); 二、元素 value

2.2K30
您找到你想要的搜索结果了吗?
是的
没有找到

JavaWeb04-jQuery(Java真正全栈开发)

Bootstrap 是基于 HTML、CSS、JAVASCRIPT ,它简洁灵活,使得 Web 开发更加快捷 2.jQuery介绍 jQuery是继prototype之后又一个优秀Javascript...UI版本:集成了UI组件 mobile版本:针对移动端开发 qunit版本:用于js测试 jquery官网 http://jquery.com/ 我们接触到版本 3.导入jQuery 通过script...获得jQuery对象,底层使用数组进行维护,可以存放多个对象。 //然后通过get()可以从jquery对象转换成 dom对象。参数:数组下标,可以省略。如果省略下标获得dom 数组。...4.替换 A.replaceWith(B) 使用B替换掉A A.replaceAll(B) 使用A替换掉所有的B 5.删除 empty() 清空标签体内容,删除所有元素 remove() 将指定对象移除...6.包裹 wrap(...) : 每一个匹配元素使用指定内容包裹。 wrapAll(...):所有的元素使用一个指定内容包裹 wrapInner(...):节点使用指定内容包裹。

2.3K90

JavaScript理解记录(5)

('c1 c2 c3');                  //参数中class有多个时,只关心名称,顺序无关紧要; 通过CSS选择器: document.querySelectorAll...()返回值为一个JQuery对象表示匹配元素集,JQuery对象是一个类数组,可以用标准数组标示方括号来访问JQuery对象内容;也可以用toArray()方法来将JQuery对象转化为真实数组...:也是返回纯文本,但不返回元素内容;FireFox不支持;     5、 节点增删:操作文档进行文档节点增加和删除          1、创建节点:document.createElement...Node方法appendChild()和insertBefore();                appendChild():插入节点使其成为节点最后一个节点;                  ...,已存在节点将会自动从它的当前位置删除并在新位置从新插入,可以用来做单页表格排序等,不改变表格数据,只改变节点顺序;          3、删除和替换节点:删除节点:removeChild() 替换节点

1.4K20

jQuery学习笔记

jQuery初学者笔记 一 Mirror王宇阳 by jQuery语法 jQuery语法是通过选取HTML元素,并对选取元素进行操作 基础语法: 所有jQuery语句用“$”符号开始 <!...选择器允许基于元素id、class、type、属性、属性值等选择方法来找到指定HTML元素 jQuery事件: |Event 函数 |绑定函数至 | |$(document...、或将函数绑定到指定元素 double click 事件 | |delegate() |向匹配元素的当前或未来元素附加一个或多个事件处理器 | |die() |移除所有通过...after() 被选元素后插入元素 before() 被选元素前插入元素 删除元素 remove() 删除被选元素元素 接受一个参数,过滤被删除元素(即指定删除) removeClass()...删除元素class加载 empty() 删除被选元素元素 jQuery CSS 获取/设置 addClass() 向被选元素添加一个或多个Class类 removerClass() 从被选元素删除指定一个或多个

7.4K30

JQuery最全常用方法指南

b>”); 给某元素设置内容 $(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定属性以及该属性值 $(”元素名称”).removeClass(”class”) 给某元素删除指定样式...检测用户浏览器针对当前页显示是否基于w3c CSS盒模型 jQuery.isFunction(obj) 检测传递参数是否为function function stub() { } var objs...- 1 jQuery.unique(array) 删除数组中所有重复元素,返回整理后数组 1、关于页面元素引用 通过jquery$()引用元素包括通过id、class、元素名以及元素层级关系及...$("#msg").addClass("select"); //为元素增加名称为selectclass $("#msg").removeClass("select"); //删除元素名称为select...,我们无需在html元素上直接写事件,而可以直接为通过jquery获取对象添加事件。

10.9K20

好久不用 jQuery, 来复习一下

jQuery 选择器基于元素 id、类、类型、属性、属性值等查找或选择 HTML 元素。 它基于已经存在 CSS 选择器,除此之外,它还有一些自定义选择器。...1.2.1 基本选择器   基本选择器是 jQuery 中最常用选择器,也是最简单选择器,它通过元素 id、class 和标签名等来查找 DOM 元素。...☞ 元素过滤选择器 ? ☞ 表单对象属性过滤选择器 ? 1.2.4 表单选择器   为了更加灵活地操作表单,jQuery 中专门加入了表单选择器。...属性操作 ☞ 通用属性操作 操作 说明 attr() 获取/设置元素属性 removeAttr() 删除属性 prop() 获取/设置元素属性 removeProp() 删除属性 attr 和...而通过 jQuery (document).ready() 方法注册事件处理程序,在 DOM 完全就绪时就可以被调用。

5.5K40

jQuery中常用函数和属性详细解析

"); 给某元素设置内容 $("元素名称").removeAttr("属性名称") 给某元素删除指定属性以及该属性值 $("元素名称").removeClass("class") 给某元素删除指定样式...] ) 反绑定,从每一个匹配元素删除绑定事件。...add( expr ) 把与表达式匹配元素添加到jQuery对象中。 children( [expr] ) 取得一个包含匹配元素集合中每一个元素所有元素元素集合。...JQuery Utilities 方法说明 jQuery.browser .msie 表示ie jQuery.browser.version 读取用户浏览器版本信息 jQuery.boxModel 检测用户浏览器针对当前页显示是否基于...-1 jQuery.unique( array ) 删除数组中所有重复元素,返回整理后数组 来自

2.5K10

JQuery笔记

JQuery语法 (selector).action() 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery action() 执行对元素操作...删除元素 remove() - 删除被选元素(及其元素) empty() - 从被选元素删除元素 CSS类 addClass() - 向被选元素添加一个或多个类 removeClass() -...从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除切换操作 css() - 设置或返回样式属性 CSS方法 返回CSS属性 $("p").css("background-color...方法返回被选元素所有祖先元素,它一路向上直到文档元素 () parentsUntil() 方法返回介于两个给定元素之间所有祖先元素 后代 children() 方法返回被选元素所有直接元素...不匹配这个标准元素会被从集合中删除,匹配元素会被返回 not() 方法返回不匹配标准所有元素 AJAX load方法 load() 方法从服务器加载数据,并把返回数据放入被选元素中 语法

6.1K20

JQuery常用命令

元素过滤选择器 — 重点  在每个父元素中进行分组,查找指定元素,下标从 1 开始 (1). :first-child 第一个元素 语法: $('li:first-child'); (2)....无法为后添加元素执行绑定 (2). on()函数第二种使用方法——委托给父元素进行事件代理 ①. $('parent').on('事件名称', '元素选择器', fn) A....JQuery函数第三部分:动画函数 — 隐藏和显示动画 隐藏和显示函数通过使用定时器修改目标元素 width / height / opcaity 三个样式值来实现动画 (1). $(..)....JQuery函数第三部分:动画函数 — 折叠展开/收起动画 折叠展开/收起动画函数通过使用定时器修改目标元素height 一个样式值来实现动画: (1). $(..).slideUp( )...JQuery函数第三部分:动画函数 — 淡入/淡出动画 淡入/淡出动画函数通过使用定时器修改目标元素 opacity 一个样式值来实现动画: (1). $(..).fadeIn( )

6.4K10

jQuery基本操作

,文本处理) 选择器 基本  #id    #id //用于搜索,通过元素id属性中给定值 描述:(查找ID为myDiv元素) HTML代码: <div id="...//随着一些内置属性<em>的</em>DOM<em>元素</em>或window对象,如果试图将<em>删除</em>该属性,浏览器可能会产生错误,<em>jQuery</em>第一次分配undefined值<em>的</em>属性,而忽略了浏览器生成<em>的</em>任何错误· name 属性<em>名称</em>...参数class描述 <em>删除</em>匹配<em>元素</em><em>的</em>所有类 <em>jQuery</em>代码 $("p").removeClass(); 回调函数描述: 删除最后一个元素上与前面重复class jQuery代码 $("li:last...参数class描述 删除匹配元素所有类 jQuery代码 $("p").removeClass(); 回调函数描述 删除最后一个元素上与前面重复class jQuery代码 $("...(index)返回是DOM对象· index //一个整数,指示元素基于0位置,这个元素位置是从0算起· -index //一个整数,指示元素位置,从集合中最后一个元素开始倒数·(-1算起

7.5K20

脚本语言知识总结.

节点(Element元素) document.getElementsByName 通过name 属性检索 ,获得NodeList document.getElementsByTagName 通过标签元素名称...四、JavaScript事件 事件通常与函数配合使用,这样就可以通过发生事件来驱动函数执行。事件是基于对象存在,事件通常可以修饰多种对象。...①:基本选择器 根据元素id属性、class属性、元素名称元素进行选择 id选择器: $("#元素id属性") class选择器:$(".元素class属性") 元素名称选择器:$("元素名称")...  选取第一个元素 :last-child  选取最后一个元素 :only-child 选取唯一元素,它元素只有它这一个元素 练习7: ² 选择id属性mytable 下3倍数行,字体颜色为红色...,但是为了提高jQuery查询效率,可以结合jQuery内置查找函数一起使用 ①:查询 children([expr])  获取指定元素 find(expr)  获取指定后代元素 parents

5K130

jQuery选择器、元素属性操作--jQuery基础知识点(1)

很明显前者执行效率高于后者。 2. 在jQuery选择器定位页面元素时,无须考虑定位元素在页面中是否存在,即使不存在,浏览器也不会报错! 二、jQuery选择器: 1....(^,$,*)=value]】 (5)元素过滤选择器【:nth-child(eq|even|odd|index)、:first-child、:last-child、:noly-child】 (6)...通过该函数返回值作为元素属性 attr(key,function(index)) 例:$("img").attr("src",function(){ return...和radio3单选框被选中 4. toggleClass(class); //元素中含有名称为classCSS类别时,删除该类别,否则增加一个该名称CSS类别 5....$("img").each(function(index){}) //index下标从0开始 10. remove()&empty() empty(); //只移除了指定元素所有节点

63121

JQuery 学了不亏

通过选择器获取元素,$(“选择器”) 选择器分类 : 基础选择器 标签选择器:$("div") ID 选择器:$("#d1") 类选择器:$(".c1") 群组选择器:$("body,p,h1")...,添加,删除 创建:使用$(“标签语法”),返回创建好元素 var div = $(""); //创建元素 div.html("动态创建").attr("id","d1")....css("color","red"); //链式调用,设置内容和属性 var h1 = $("一级标题"); //创建同时设置内容,属性和样式 作为元素添加...$obj.append(newObj); //在$obj末尾添加元素newObj $obj.prepend(newObj); //作为第一个元素添加至$obj中 作为兄弟元素添加 $obj.after...index - 选择器 index 位置 element - 当前元素 $.each () 函数是框架提供一个工具类函数,通过它,你可以遍历对象、数组属性值并进行处理 $.each(Object

1.8K30

jQuery

二、jQuery事件 在js事件中,事件前加on,可以通过绑定事件和派发事件两种方式。...jQuery事件绑定与解绑: on 绑定事件: jQuery对象.on("事件名称",function(){}) off 解绑事件: jQuery对象.off("事件名称") |如果不给名称...a内部前面; 外部插入(作为兄弟标签): a.after(c) 将c插入到a后面 | a.before(c) 将c插入到a前面 删除: empty():清空所有的标签...class操作: 元素.addClass("属性值"):添加class属性 元素.removeClass("属性值"):移除指定class 元素.toggleClass(“属性值”):有class属性就是删除...i:j; } }); 3.validate插件 使用方式: 1.导入jquery.jsvalidate是基于jquery,所以要先导入jqueryjs文件 2.再导入validate.js

4.3K20

jQuery 元素操作

1. jQuery 元素操作 ​ jQuery 元素操作主要讲的是用jQuery方法,操作标签遍历、创建、添加、删除等操作。 1.1....3.删除元素 element.remove() // 删除匹配元素(本身) element.empty()    //  删除匹配元素集合中所有的节点 element.html(''''...删除元素 // $("ul").remove(); 可以删除匹配元素 自杀 // $("ul").empty(); // 可以删除匹配元素里面的节点...孩子 $("ul").html(""); // 可以删除匹配元素里面的节点 孩子 }) 1.4 案例:购物车案例模块...2.全选按钮点击:如果全选是选中,则所有的商品添加背景,否则移除背景3.小复选框点击: 如果是选中状态,则当前商品添加背景,否则移除背景4.这个背景,可以通过类名修改,添加类和删除

1.9K10

一文入门jQuery

标签选择器(元素选择器) id选择器 类选择器 并集选择器 层级选择器 后代选择器 选择器 属性选择器 属性名称选择器 属性选择器 复合属性选择器 过滤选择器 首元素选择器 尾元素选择器 非元素选择器...) 语法: $(“html标签名”) 获得所有匹配标签名称元素 id选择器 语法: $(“#id属性值”) 获得与指定id属性值匹配元素 类选择器 语法: $(“.class属性值”) 获得与指定...class属性值匹配元素 并集选择器 语法: $(“选择器1,选择器2…”) 获取多个选择器选中所有元素 层级选择器 后代选择器 语法: $("A B ") 选择A元素内部所有B元素 选择器 语法...: $(“A > B”) 选择A元素内部所有B元素 属性选择器 属性名称选择器 语法: $(“A[属性名]”) 包含指定属性选择器 属性选择器 语法: $(“A[属性名=‘值’]”) 包含指定属性等于指定值选择器...():删除属性 prop():获取/设置元素属性 removeProp():删除属性 attr和prop区别?

3.5K20
领券