jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。...Jquery 的初体验 需求：使用Jquery和javascript给一个按钮绑定单击事件 注意：使用Jquery之前要将第三方jar包导入 <!...jquery对象是一个Dom对象的数组 + jquery 的一系列功能函数的总和。 Jquery对象和Dom对象使用区别？...[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。...(事件字符串,回调函数),后来添加的元素不会绑定事件 //使用bind()绑定多个事件 type可以接受多个事件类型，使用空格分割多个事件 /* $(".head")
（4）：会使用表格相关标签，实现简单表格，跨行、跨列的复杂表格，并对表格进行美化修饰 （5）：会使用表单及表单元素标签，实现表单页面的制作 （6）：理解post和get两种提交方式的区别...:#D4BFFF; color:#2A00FF} 类选择器的定义格式为： .类名{ …样式规则;} 应用类选择器：class＝"类名(不含 . )"； ID 选择器： #fire...{ color:red; font-size: 24px; } ID选择器的定义格式为： ＃ID名{ …样式规则;} 应用ID选择器：id＝"ID名(不含#)"； CLASS和ID选择器的区别...开 头； 2、在HTML中使用样式表时，使用ID选择器需要id属性；使用CLASS选择 器需要class属性； 3、HTML标签中的id属性，通常用于唯一的标识页面中的一个页面元素，...4、优先使用CLASS选择器；ID选择器不推荐。
，实现简单表格，跨行、跨列的复杂表格，并对表格进行美化修饰 （5）：会使用表单及表单元素标签，实现表单页面的制作 （6）：理解post和get两种提交方式的区别 2：HTML的基本结构 2.1：标题和其他说明信息...color:#2A00FF} 类选择器的定义格式为： .类名{ …样式规则;} 应用类选择器：class＝"类名(不含 . )"； ID 选择器： #fire { color:red; font-size...: 24px; } ID选择器的定义格式为： ＃ID名{ …样式规则;} 应用ID选择器：id＝"ID名(不含#)"； CLASS和ID选择器的区别： 1、在CSS中定义样式表时，ID选择器以"#"开头...开 头； 2、在HTML中使用样式表时，使用ID选择器需要id属性；使用CLASS选择 器需要class属性； 3、HTML标签中的id属性，通常用于唯一的标识页面中的一个页面元素， 不允许重复；class...4、优先使用CLASS选择器；ID选择器不推荐。
链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个标记链接多个CSS样式表。 优先级 ?...例如： #demo1{ color:#0f0; } Java帮帮 ? “标签选择器”和“id选择器”共同作用的效果 1.2.4.3 类选择器 类选择器使用“.”...“标签选择器”和“类选择器”共同作用的效果 类选择器的高级用法：给指定的标签设置class样式 标签.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 1.2.4.4 扩展：属性选择器...包含选择器，两个标签之间使用空格，给指定父标签的后代标签设置样式，可以方便在区域内编写样式。...父标签 后代标签{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 该选择器，是对“元素选择器”的扩展，对一个标签内部所有后代标签进行过滤。
CSS：页面美化和布局控制 1. 概念： Cascading Style Sheets 层叠样式表 * 层叠：多个样式可以作用在同一个html的元素上，同时生效 2. 好处： 1....将内容展示和样式控制分离 * 降低耦合度。解耦 * 让分工协作更容易 * 提高开发效率 3. CSS的使用：CSS与html结合方式 1....基础选择器 1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一 * 语法：#id属性值{} 2....类选择器：选择具有相同的class属性值的元素。 * 语法：.class属性值{} * 注意：类选择器选择器优先级高于元素选择器 2....父选择器：筛选选择器2的父元素选择器1 * 语法： 选择器1 > 选择器2{} 5.
时针对表单、表格的CSS样式设置。...所以此章节，跟随作者一起简单了解一下表单开发时的常常使用到的相关字体文本、位置、边框等CSS属性，实际上基本都是前面我们所学习的属性，此处就当一个复习进行展开吧；在后续中我们学过Javascript后再回来看看处理诸如验证和创建自定义表单控件之类的事情...按钮显示样式，以及使用伪类选择器进行获取焦点 */ input[type="submit"], input[type="reset"] { padding: 10px 2em;...form 元素对于不同的挂件使用不同的盒子约束规则, 为了保证在给 form 元素设定宽度和高度的统一，最好将所有元素的内外边距都设为 0，然后在单独进行样式化控制的时候将这些加回来, 例如上述示例中的...表格来呈现，所以此章节我们将学习如何有效地对 HTML 表格进行样式化，以及其相关的CSS属性介绍和实践。
,文本的处理） 选择器 基本 #id #id //用于搜索的,通过元素的id属性中给定的值 描述:(查找ID为myDiv的元素) HTML代码: <div id="...,需要同时满足多个条件时使用· selector1 属性选择器 selector2 另一个属性选择器,用以进一步缩小范围 selectorN 任意多个属性选择器 描述 找到所有含有id属性.../从所有匹配的元素中删除全部或者指定的类· class 一个或多个要删除的CSS类名,请用空格分开 function(index,class) 此函数必须返回一个或多个空格分隔的class名,接受两个参数...class的布尔值· function(index，class，wsitch)[,switch] 1·用来返回在匹配的元素集合中的每一个元素上用来切换的样式类名的一个函数·接收元素的索引位置和元素旧的样式类作为参数...+class). class 用于匹配的类名 实列 //描述 //给包含有某个类的元素进行一个动画.
文章目录 jQuery概念 快速入门 步骤： JQuery对象和JS对象区别与转换 选择器：筛选具有相似特征的元素(标签) 基本操作学习 事件绑定 入口函数 样式控制：css方法 分类 基本选择器...基本选择器 标签选择器（元素选择器） 语法： $(“html标签名”) 获得所有匹配标签名称的元素 id选择器 语法： $(“#id的属性值”) 获得与指定id属性值匹配的元素 类选择器 语法： $(“....class的属性值”) 获得与指定的class属性值匹配的元素 并集选择器 语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素 层级选择器 后代选择器 语法： $("A B ") 选择...A[属性名=‘值’]”) 包含指定属性等于指定值的选择器 复合属性选择器 语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器 过滤选择器 首元素选择器 语法： :first 获得选择的元素中的第一个元素.../js/jquery-3.3.1.min.js"> //分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可 function
3.通过节点关系获取节点： 父节点：parentNode，该属性返回一个节点对象 子节点：childNodes，该属性返回一个节点集合 上一个兄弟：previousSibling...* 仅通过传递多个参数虽然可以实现效果， * 但是 * 1，传参过多，阅读性差， * 2，js代码和css代码耦合性高。 ...* * 解决： * 将多个所需的样式进行封装。 * 封装到选择器中，只要给指定的标签加载不同的而选择器就可以了。 ...一般使用类选择器。...-- 需求：实现表格基数行跟偶数行背景色的不一致，并支持年龄一列的排序功能 思路： 1，定义一个表格，并添加数据 2，表格要实现奇偶行的背景色不一致，需要在文档加载完毕后对表格背景色进行设置
---- CSS选择器 选择器可以被分为以下类别： 简单选择器（Simple selectors）： 通过元素类型、class 或 id 匹配一个或多个元素。...伪类（Pseudo-classes）： 匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。...你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。...第三个和第四个选择器在链接文本颜色的样式上进行竞争——第二个选择器获胜，使文本变白，因为缺少一个元素选择器，缺少的选择器被换成类选择器，它的值是十，而不是个位。所以专用性值为113和104。...选择器5 - 7在徘徊在链接附近时的样式进行竞争。选择器六明显地输给了了五，其专用性值为23和24——它在链中少了一个元素选择器。
选择第四列中的-和+，表示要选购该物品的数目，相应的小计和合计中的价格会发生改变 点击最后一列的删除键，相应的行会消失，同时合计数目会发生改变 要从哪下手呢，我们按照顺序来解决~ 我们首先通过document.getElementsByTagName...要记住必须要通过一个变量来表示是从选中->未选中，还是未选中->选中。然后如何修改其内容呢？...我们可以通过parentNode来选出复选框对应的父节点，再在该父节点中选出对应小计中的innerText，修改其内容（要对应前面的单价）=======这样第一点就完成啦，其实还要多研究细节，有很多需要在注意的细节...关于全选实现的效果，我们可以和复选框修改内容使用部分相同的代码，（具体可见下面的代码），要记住我们还是需要记录一个变量来判断复选框是否被全选->判断对应的价格是否要发生变化。...关于通过加减来修改选购物品的数目，需要多加思考，因为涉及选购数目、小计价格、总计价格的改变，但是大概的思路跟第一点类似，就是通过该节点找到其父节点，然后修改该父节点下的不同子节点的innerText（但是在修改之前要判断一下对应的复选框是否被选中
2.技术分析 需要使用jquery的选择器(基本选择器、基本过滤选择器) 还需要使用jquery的CSS的方法(css(name,value)) 如果CSS样式已经由美工写好，此时可以使用jquery的...3.步骤分析 第一步：引入jquery的类库 第二步：直接写页面加载函数 第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步：分别使用CSS的方法(css(name....addClass("odd"); }); 三、使用JQ完成全选和全不选 1.需求分析 在系统后台进行人员管理时，进行批量删除，使用jq完成全选和全不选 ?...2.技术分析 需要使用jquery的选择器(id选择器、类选择器) 需要使用jquery的属性操作方法 prop() 3.步骤分析 第一步：引入jquery文件 第二步：书写页面加载函数 第三步：为上面的复选框绑定单击事件...事件),在绑定的函数里面获取用户选择的省份 第二步：创建二维数组来存储省份和城市 第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】 第四步：接着遍历数组中的城市 第五步：创建一个城市文本节点
数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从 0 到 length - 1，其他对象通过其属性名进行迭代。...，多个或全部样式。... console.log($('p').hasClass('beauty')); # 5. toggleClass() 方法描述：为匹配的元素集合中的每个元素上添加或删除一个或多个样式类...，可以提供一个可选的选择器来进行筛选。...，可以提供一个可选的选择器来进行筛选。
在实际开发中，我们用css来设置表格的样式，而不是用表格的属性。...-- 提交按钮 --> input标签通过type属性可以分为多个类别，常用的input上面的代码已经列出： type=“text”：文本框，用于文本的输入。...type=“radio”:单选框，通过name控制类别，name想通的radio只能被选择一个。 type=“checkbox”:复选框，用过name控制类别，但是可以选择多个。...label 通过label标签，可以指定文字相对应的表单空间，例如下面的示例，使用for属性对应input的id，这样当鼠标点击label标签的文字时，光标就会聚焦到相对的input标签之上。...共五名学生，两名1班，三明2班，班级需要合并单元格 二、制作一个调查问卷的网页效果，需要用户填写的内容如下所示： 用户名（文本框）; 密码（密码输入框） 性别（单选框，男和女只能选一个）; 最喜欢的运动
下面通过实例来巩固HTML 目的 掌握常用的HTML文本、超链接和图像标签的使用； 掌握HTML表格标签，能够使用表格进行简单的网页布局设计； 掌握HTML表单应用，包括HTML5新增的输入域类型和属性的使用...一个元素被同一选择器多次定义，或被多个类选择器选中时，采用最后被定义的样式 实例： h1{color: red;} h1{color: blue;} #采用最后被定义的样式 实例：...E1, E2, E3 {property: value} 多个选择器使用相同样式 交集选择器 E.myclass E#myid 选择类名为my class或 id 为 myid 的 E元素 包含选择器...ID，但可以属于多个类 5.3 包含选择器 E F: 选择所有被E元素包含的F元素。...标签、ID、元素状态伪类、目标伪类等选择器的使用； 掌握文本、文本阴影、文本对齐； 背景图像、景背颜色、背景定位、边框、边框圆角的设置； 掌握盒子模型、页面宽度自适应控制、对齐方式和浮动定位
- 概述 - jQuery是一个优秀的javascript框架(js类库)，兼容css3和各大浏览器，提供dom，events，animate，ajax等简易的操作。...= $("选择器"); $("#id值"); val();" - javaScript和jquery区别 - 注意事项: "使用jquery的方式获取的对象称为...(function(){}); - jQuery的选择器 - 基本选择器:★ - * 所有 - # id - .class - 标签选择器(标签名) - 多个选择器用...选中的(针对的是单选框和复选框) - :selected 选中的(下拉选) - 表单: - :input:选择所有的表单子标签 "input:选中所有input标签...: 基本选择器: * #id .class 标签名称 多个选择器之间使用逗号 层次选择器: a b a>b a+b a~b 基本过滤选择器
layui的数据表格是使用频率非常高的组件，在入门篇，我们已经大致了了解了数据表格的方法级渲染，接下来我们深入研究和学习layui-table组件的使用方法。.../tr> 贤心2 88 人生就像是一场修行b ...table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。...table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。...接下来将给出一个示例： // 异步数据接口 table.render({ elem: '#tableID',//推荐使用ID选择器 method: "post", //layui默认使用
); //3，表示3个input //3 类选择器，格式：$(".class类名") // * length 和 size() 等效 var $d3 = $(".myClass"); alert($d3...); //3，表示3个input //3 类选择器，格式：$(".class类名") // * length 和 size() 等效 var $d3 = $(".myClass"); alert($d3...addClass() 给指定标签的class属性追加样式 removeClass() 将标签指定的class属性移除 toggleClass() 切换class属性样式。及没有时添加，有的时候删除。...通过“层级选择器”获得需要的操作对象，通过“表单属性过滤选择器”从已有的对象中筛选出需要的，最后通过“文档处理”将筛选后的内容追加到指定的位置。...语法： //多个类型使用空格隔开 ?
每列使用 col-md-6 类，表示在中等屏幕尺寸以上，每列占据6列。这将创建一个两列布局，适应中等屏幕及以上的设备。...Bob Johnson 40 这是一个简单的表格示例，包括表头和数据行...Bootstrap 的表格样式使表格更易于阅读和导航。 表单 Bootstrap 也提供了各种表单组件，如文本框、单选按钮、复选框等。...自定义样式 虽然 Bootstrap 提供了丰富的样式，但您可能希望根据项目的需求进行自定义。您可以通过添加自定义 CSS 来覆盖 Bootstrap 样式。 <!...例如，您可以更改字体、颜色、边距和其他样式属性。 结语 Bootstrap 是一个功能强大的前端框架，为网页开发提供了丰富的工具和组件。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
