首页
学习
活动
专区
圈层
工具
发布

jQuery 元素操作

1. jQuery 元素操作 ​ jQuery 元素操作主要讲的是用jQuery方法,操作标签的遍历、创建、添加、删除等操作。 1.1....所以要想使用jquery方法,需要给这个dom元素转换为jquery对象  $(domEle) 注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery...创建、添加、删除 ​ jQuery方法操作元素的创建、添加、删除方法很多,则重点使用部分,如下: 语法总和 1. 动态的创建了一个 $(''''); 2.1....清理购物车3.商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发4.删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品5.清理购物车: 则是把所有的商品全部删掉...2.全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景3.小的复选框点击: 如果是选中状态,则当前商品添加背景,否则移除背景4.这个背景,可以通过类名修改,添加类和删除类

2.8K10

Web前端基础(07)

$(":selected") 匹配所有选中的下拉选 ###修改页面元素相关 创建及添加元素 创建: var d = $("xxx'>abc"); 后面添加: 父元素.append....css(“样式名”,“值”); 批量修改元素样式 元素对象.css({“样式名1”:“值”,“样式名2”:“值”}); 获取和修改元素的属性 获取元素属性 元素对象.attr(“属性名”); 修改元素属性...//在事件方法中this代表触发该事件的元素对象 //this是js对象如果需要使用jq中的方法需要将 //js对象转成jq对象$(this) //得到点击li里面的子元素ul..."> //给按钮添加点击事件 $("input:last").click(function(){ //在点击事件里面创建一个tr和五个td //5个td分别是nametd agetd...'>"); //最后给删除按钮添加点击事件,点击的时候删除按钮对应的这一行.

5.8K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    第50次文章:JQuery基础

    最新版本:3.2.1(2017年3月20日) (2)jquery-xxx.js 与 jquery-xxx.min.js区别 jquery-xxx.js:开发版本。给程序员看的,有良好的的缩进和注释。...程序加载更快 2、导入JQuery的js文件 导入jquery-xxx.min.js 3、使用 var div1 = $("#div1") alert(div1.html()) 三、JQuery对象和JS...():获取/设置元素的属性 removeAttr():删除属性 prop():获取/设置元素的属性 removeProp():删除属性 【tips】attr和prop区别?...如果操作的是元素的固有属性,则建议使用prop 如果操作的是元素自定义的属性,则建议使用attr (2) 对class属性操作 addClass():添加class属性值。...例如:toggleClass("one"):判断如果元素对象上存在class="one",则将属性值one删除掉。如果元素对象不存在class="one",则添加。

    2K30

    jQuery 元素操作

    jQuery 元素操作主要讲的是用jQuery方法,操作标签的遍历、创建、添加、删除等操作。 一、 遍历元素 jQuery 隐式迭代是对同一类元素做了同样的操作。...如果想要给同一类元素做不同操作,就需要用到遍历。 语法1 ? 注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...、添加、删除 jQuery方法操作元素的创建、添加、删除方法很多,我们重点使用部分,如下: 语法总和 ?...清理购物车 3.商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发 4.删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品 5.清理购物车: 则是把所有的商品全部删掉...,不选中移除背景即可 2.全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景 3.小的复选框点击: 如果是选中状态,则当前商品添加背景,否则移除背景 4.这个背景,可以通过类名修改

    3.8K50

    前端成神之路-02_jQuery

    4.当我们每次点击小的复选框按钮,就来判断: 5.如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。 6....创建、添加、删除 ​ jQuery方法操作元素的创建、添加、删除方法很多,则重点使用部分,如下: 语法总和 ? ​ 注意:以上只是元素的创建、添加、删除方法的常用方法,其他方法请参详API。...清理购物车 3.商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发 4.删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品 5.清理购物车: 则是把所有的商品全部删掉...(详情参考源代码) 1.3.5 案例:购物车案例模块-选中商品添加背景 1.核心思路:选中的商品添加背景,不选中移除背景即可 2.全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景...3.小的复选框点击: 如果是选中状态,则当前商品添加背景,否则移除背景 4.这个背景,可以通过类名修改,添加类和删除类 ​ 代码实现略。

    3K10

    day40_jQuery学习笔记_01

    > 三、jQuery 的【选择器】 3.1、基本选择器【掌握】 详解如下: #id         id选择器,xxx id=""> 通过标签中的id值获得元素...(标签) element     元素选择器,xxx> 通过元素(标签名)获得元素 .class      类选择器,xxx class=""> 通过class值获得元素。...例如:$("div:nth-child(2)")                 // 如果元素上添加条件,则必须使用空格。...remove()    删除当前对象。如果之后再使用,元素本身保留,绑定的事件 或 绑定的数据 都会被移除。 detach()    删除当前对象。...如果之后再使用,元素本身保留,绑定的事件 或 绑定的数据 都会被移除。         var $city = $("#city").detach(); // 删除当前对象。

    7.2K20

    JQuery JavaScript常用API整理(前端入门必学)

    和$().click()的用法一样,最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。...ES6 find() 方法返回通过测试函数的第一个元素的值。...如果没有值满足测试函数,则返回 undefined。 filter() 方法创建一个包含所有通过测试函数的元素的新数组。如果没有元素满足测试函数,则返回一个空数组。...对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法 如果绑定值是采用data-开头,也可以使用.dataset和.data $("#chke1").prop("checked");...button,按钮区别 当在IE浏览器下面时,button标签按钮,input标签type属性为button的按钮是一样的功能,不会对表单进行任何操作。

    93420

    「jQuery」基础 - 02

    元素操作 jQuery 元素操作主要讲的是用jQuery方法,操作标签的遍历、创建、添加、删除等操作。...语法1 注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。...创建、添加、删除 jQuery方法操作元素的创建、添加、删除方法很多,则重点使用部分,如下: 语法总和 create append1 append2 remove 注意:以上只是元素的创建...清理购物车 商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发 删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品 清理购物车: 则是把所有的商品全部删掉...(详情参考源代码) 1.3.5 案例:购物车案例模块-选中商品添加背景 核心思路:选中的商品添加背景,不选中移除背景即可 全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景 小的复选框点击

    3.9K20

    bootstrapValidator 中文API

    它将删除所有错误消息,反馈图标以及关闭插件创建的事件。...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素如果未定义字段,则该方法将返回所有字段的所有错误消息 validator 串 验证器的名称如果未定义验证器,则该方法返回所有验证器的错误消息...option 串 选项名称如果未定义,则该方法返回给定验证器的选项 getSubmitButton getSubmitButton(): jQuery - 返回显示点击的提交按钮的jQuery元素。...null如果没有点击提交按钮返回。 已验证 isValid(): Boolean- true如果所有表单域都有效,则返回。否则返回false。 调用这个之后,确保已经调用了validate方法。...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素 resetValue 布尔 如果true,该方法将字段值重置为空或删除检查/选择的属性(用于收音机和复选框)。

    14.8K50

    「jQuery」基础 - 03

    案例:发布微博案例 点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。 点击的删除按钮,可以删除当前的微博留言。 按钮点击事件,不必鼠标点击触发。...每次渲染之前,先把原先里面 ol 的内容清空,然后渲染加载最新的数据。 1.7.5 案例:toDoList 删除操作 点击里面的a链接,不是删除的li,而是删除本地存储对应的数据。...之后保存数据到本地存储 重新渲染加载数据列表 load 加载函数里面,新增一个条件,如果当前数据的done为true 就是已经完成的,就把列表渲染加载到 ul 里面 如果当前数据的done 为false..., 如果 数据done为 false, 则 todoCount++, 否则 doneCount++ 最后修改相应的元素 text() 1.8.

    4.1K30

    脚本语言知识总结.

    window对象 1.window对象 Window 对象表示浏览器中打开的窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的.../jquery-1.8.3.min.js"> $(function(){ // 将class属性值为itcast的元素下所有...[attribute *= value]  选取属性值包含value的所有元素 练习6: ² 设置所有含有id属性的div,字体颜色红色 ² 设置所有class属性值 含有itcast元素背景色为黄色...,只有一次有效 触发事件 trigger(type, [data])  触发目标对象指定的事件执行 练习1: ² 为页面内所有p 元素绑定 一次性事件,点击打印p元素中内容 ² 页面内有两个按钮,点击按钮...p元素中内容 $("p").one("click",function(){ alert($(this).text()); }); //页面内有两个按钮,点击按钮1, 触发按钮2的 click事件执行

    6.7K130

    02-老马jQuery教程-jQuery事件处理

    第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。...语法:$dom.unbind(type,[fn]) 如果没有参数,则删除所有绑定的事件。 如果提供了事件类型作为参数,则只删除该类型的绑定事件。...如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。...参数说明: 如果不带参数,则所有绑定的live事件都会被移除。 如果提供了type参数,那么会移除对应的live事件。 如果也指定了第二个参数function,则只移出指定的事件处理函数。...(off) 语法:off(events,[selector],[fn]) 如果一个简单的事件名称,比如提供"click",所有 这种类型的事件(包括直接和委派)从jQuery设置的元素上删除。

    7.6K00

    一文玩转jQuery+Ajax

    (只会查找下一个元素,如果元素不存在则获取不到) 同辈选择器 $("元素 ~ 指定元素") 选择元素下面的所有指定元素 <!...不可获取 如果返回值是布尔类型的属性,若设置了属性,attr()返回具体的值,prop()返回true。...若未设置属性,attr()返回undefined,prop()返回false 总结:如果属性的类型是boolean,则使用prop()方法,否则使用attr()方法。 <!...包装集 console.log($(p)); /* 添加元素 */ //如果元素本身不存在,先创建元素再追加,会将元素追加到指定位置 //prepend 得到指定元素,并在元素内部最前面追加内容...function () { console.log("按钮2离开了"); }) /* 3.为元素绑定多个事件,并设置对应的函数 指定元素.bind({ "事件类型1"

    5K21

    jQuery笔记(3)

    jQuery元素操作 主要是遍历,创建,添加,删除元素操作 遍历元素each() jQuery隐式迭代是对同一类元素做了相同的操作,如果想要给同一元素做不同的操作,就需要用到遍历 语法1:...$("div").each(function(index, domEle){xxx;}) each()方法遍历匹配的每一个元素.主要用DOM处理.each每一个 里面的回调函数有2个参数,index是每个元素的索引号...遍历内容 就比如刚刚的数组: 本文由“壹伴编辑器”提供技术支持 创建元素 语法: $("") 动态的创建了一个 但是只是创建了元素是不会在结构中显示出来的,...() 删除匹配的元素集合中所有的子节点 element.html("") 清空匹配的元素内容(注意里面不能是空的,要加引号) 将匹配的子节点清空 本文由“壹伴编辑器”提供技术支持 jQuery...,显示"返回顶部"的按钮,点击以后就可以回到页面顶部的功能.

    97110

    02-老马jQuery教程-jQuery事件处理

    第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。...语法:$dom.unbind(type,[fn]) 如果没有参数,则删除所有绑定的事件。 如果提供了事件类型作为参数,则只删除该类型的绑定事件。...如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。...参数说明: 如果不带参数,则所有绑定的live事件都会被移除。 如果提供了type参数,那么会移除对应的live事件。 如果也指定了第二个参数function,则只移出指定的事件处理函数。...$(function () { // 给按钮绑定多个jQuery的事件 // 给按钮绑定点击事件,后面的.和demo就是命名空间 $('#btn').on('click.demo', function

    3.7K80

    前端成神之路-03_jQuery

    案例:发布微博案例 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。 2.点击的删除按钮,可以删除当前的微博留言。 ​ 代码实现略。...可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ; 语法 ?...1.7.5 案例:toDoList 删除操作 // 1.点击里面的a链接,不是删除的li,而是删除本地存储对应的数据。...// 4.之后保存数据到本地存储 // 5.重新渲染加载数据列表 // 6.load 加载函数里面,新增一个条件,如果当前数据的done为true 就是已经完成的,就把列表渲染加载到 ul 里面 //...2.声明2个变量 :todoCount 待办个数 doneCount 已完成个数 // 3.当进行遍历本地存储数据的时候, 如果 数据done为 false, 则 todoCount++, 否则

    3.8K20
    领券