原生的JavaScript提供的操作仅仅是通过tag、id、name等方式来查找,如果想要实现更为复杂的查找,则需要使用正则或类库来实现。...定义 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意:querySelector() 方法仅仅返回匹配指定选择器的第一个元素。...指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id、类、 类型、属性、属性值等来选取元素。 对于多个选择器,使用逗号隔开,返回一个匹配的元素。...异常 匹配指定 CSS 选择器的第一个元素。 如果没有找到,返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。
,我们都要关闭颜色选择器面板。...有2种方式来实现,第一种判断我们点击的DOM元素是否是颜色选择器元素以及其子元素节点即可,也就是说我们只需要判断我们点击的元素如果是颜色选择器面板容器元素或者是其子元素,我们都不能关闭颜色选择器,并且当然颜色选择器面板还要处于开启中的状态...,从而确定颜色选择器的关闭状态。...,然后调用关闭颜色选择器方法关闭颜色选择器,然后重置我们的颜色,再回调一个clear方法接口给用户使用。...到目前为止,我们所要实现的颜色选择器的基本功能就已经完成,接下来,我们来对我们的文档做一个总结。我们从分析每一个颜色选择器的模块开始,对应的结构及样式我们都是一一分析了,然后再细化到每一个功能。
而这个一定是不能用jquery来写的,因为它的作用是引入jquery,所以必须要写原生。 查找了一番资料,终于找到解决方法。...--[if IE]>
if(TextUtils.isEmpty(remoteJs)) { return; } String js = "javascript:"; //作用:指明字符串后面的都是js代码 js...+= "var script = document.createElement('script');"; // 作用:创建script节点 js+= "script.type = 'text/javascript...';"; js+=remoteJs; mCommonWebView.callJsFunction(js); //加载js代码 } private void runRemoteJs(String...此方案的坑: 1.要加载的js代码中不能包含script节点 2.要加载的js代码中不能有注释 3.要加载的js代码一定要加上分号 *如果不满足上面的三点要求,要加载的js都不能正确的执行 方案B : 原生的
id选择器( # myid) 类选择器(.myclassname) 标签选择器(div, h1, p) 相邻选择器(h1 + p) 子选择器(ul > li) 后代选择器(li a) 通配符选择器( *...) 属性选择器(a[rel = “external”]) 伪类选择器(a: hover, li: nth – child) 可继承的样式: font-size font-family color, UL...transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器...(2)前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数 (3) 用innerHTML代替DOM操作,减少DOM操作次数,
如果你存在以上疑惑,那本文章正是你需要的,下面将讲解几种app的类型、app与h5的通信原理、如何区分页面用原生开发还是h5开发。...01 app的基本类型 app大致分为4种类型: 1、native app 定义:指的是本地化应用,纯原生开发的app,简称NA 优点:原生的UI体验比较好,点开app不需要网络请求就可以直接展示UI,...3、hybird app 定义:指的是native和h5结合起来的混合型app,这是目前用的比较多的一种模式 优点:既能发挥原生体验好的优势,又能发挥h5更新迭代快的优点。...缺点:native和h5之间需要通信 4、js app 定义:指的是js+原生渲染的app,这是近几年流行一种app,js框架代表有:react native,这是一种跨平台开发框架,使用这个框架,只需要开发一份代码...如果你是负责某个app的产品经理,首先要了解这款app用的是哪种模式: 1)假如是hybird app,并且是要给native提需求,就需要注意ios和安卓的原生控件可能不一样,可以提前到官网看下这2种系统的控件
例如 : //$()获取元素节点,需传入字符串的选择器 $("h1") $("#d1") $(".c1") $("body,h1,p") //选择器的特点,与样式选择器一致 原生JavaScript对象与...可以根据需要,互相转换 : 原生JavaScript转换jQuery对象 $(原生对象),返回 jQuery 对象 jQuery对象转换原生JavaScript对象 方法一 : 根据下标取元素,取出即为原生对象...通过选择器获取元素,$(“选择器”) 选择器分类 : 基础选择器 标签选择器:$("div") ID 选择器:$("#d1") 类选择器:$(".c1") 群组选择器:$("body,p,h1")...) 否定筛选,除()中选择器外,其他元素 操作元素内容 html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法 text() //设置或读取标签内容,等价于innerText...index - 选择器的 index 位置 data- 当前的数据 jQuery事件处理 文档加载完毕 原生 JavaScript 方法:window.onload jQuery: //语法一 $(
而为了更好地组织和管理样式代码,CSS原生嵌套语法应运而生。本文将带你深入了解CSS原生嵌套语法,探索其用法、特性和优势。 什么是CSS原生嵌套语法?...CSS原生嵌套语法是一种CSS预处理器中常见的语法,它允许我们在样式表中使用嵌套的规则和选择器来组织样式代码。通过嵌套语法,我们可以更清晰地表示元素之间的层级关系,提高代码的可读性和维护性。...嵌套选择器的应用 嵌套选择器是CSS原生嵌套语法的一大亮点,它能够帮助我们编写更具可读性和维护性的选择器。通过嵌套选择器,我们可以更准确地选择特定的元素,并避免使用过于具体的选择器。...注意事项 在使用CSS原生嵌套语法时,需要注意以下几点: 避免过度嵌套:过多的嵌套可能会导致代码难以阅读和理解,应尽量保持嵌套层级的简洁性。 选择器优先级:在嵌套语法中,选择器的优先级可能会增加。...同时,嵌套选择器的应用能够提高选择器的可读性和可扩展性。然而,在使用CSS原生嵌套语法时,需要避免过度嵌套和注意选择器的优先级。
(1)最快的选择器:id选择器和元素标签选择器 举例来说,下面的语句性能最佳: $('#id') $('form') $('input') 遇到这些选择器的时候,jQuery内部会自动调用浏览器的原生方法...Firefox、Safari、Chrome、Opera浏览器,都有原生方法getElementByClassName(),所以速度并不慢。...找出网页中所有的隐藏元素,就要用到伪类选择器: $(':hidden') 属性选择器的例子则是: $('[attribute=value]') 这两种语句是最慢的,因为浏览器没有针对它们的原生方法。...不要过度使用jQuery jQuery速度再快,也无法与原生的javascript方法相比。所以有原生方法可以使用的场合,尽量避免使用jQuery。...javascript原生循环方法for和while,要比jQuery的.each()方法快,应该优先使用原生方法。 10.
(1)最快的选择器:id选择器和元素标签选择器 举例来说,下面的语句性能最佳: $(‘#id’) $(‘form’) $(‘input’) 遇到这些选择器的时候,jQuery内部会自动调用浏览器的原生方法...找出网页中所有的隐藏元素,就要用到伪类选择器: $(‘:hidden’) 属性选择器的例子则是: $(‘[attribute=value]’) 这两种语句是最慢的,因为浏览器没有针对它们的原生方法...不要过度使用jQuery jQuery速度再快,也无法与原生的javascript方法相比。所以有原生方法可以使用的场合,尽量避免使用jQuery。...(4)插入html代码的时候,浏览器原生的innterHTML()方法比jQuery对象的html()更快。 9....javascript原生循环方法for和while,要比jQuery的.each()方法快,应该优先使用原生方法。 10.
image.png CSS原生嵌套规则 你可以将任何选择器嵌套到另一个选择器中,但必须以符号开头,如&,....原生嵌套在:is()中包裹父选择器,这可能会导致与Sass输出的差异。...它的选择器比原生选项的优先级低,在级联中被覆盖的可能性更大。 你可能还会遇到一个更微妙的问题。...Sass开发团队已经宣布,他们将支持.css文件中的原生CSS嵌套,并按原样输出代码。...虽然两者之间存在细微差别,而且在使用(过于)复杂的选择器时可能会遇到不寻常的优先级问题,但很少有代码库需要进行彻底修改。 原生嵌套可能会让你重新考虑对CSS预处理器的需求,但它们仍能提供其他好处。
期间,看到了一个关于要 CSS 支持原生嵌套的议题 [css-nesting] request to pick up the css-nesting proposal。...2018年2月23日,Lea Verou 再次发声,说她现在还在用 CSS 预处理器写嵌套,一旦 CSS 支持了原生嵌套,她就果断弃用预处理。...2018年5月25日,postcss-preset-env 的作者 Jonathan Neal 再次提议重新考虑下让 CSS 支持原生嵌套(也就是本文章的切入点),这引来了一波热议。...CSS工作组的讨论流程 1.要支持原生嵌套 嵌套的样式规则是一个普遍的诉求 现存的 CSS 预处理器都支持写嵌套,且它是最受欢迎的功能之一 有了原生嵌套,就可以不用预处理器了 2.决定仅增加嵌套语法糖...前瞻符,诸如: # ID 选择器 . 类选择器 [] 属性选择器 * 通用选择器 : 伪类 :: 伪元素 ? 图2.
(1)最快的选择器:id选择器和元素标签选择器 举例来说,下面的语句性能最佳: $('#id') $('form') $('input') 遇到这些选择器的时候,jQuery内部会自动调用浏览器的原生方法...Firefox、Safari、Chrome、Opera浏览器,都有原生方法getElementByClassName(),所以速度并不慢。...找出网页中所有的隐藏元素,就要用到伪类选择器: $(':hidden') 属性选择器的例子则是: $('[attribute=value]') 这两种语句是最慢的,因为浏览器没有针对它们的原生方法...不要过度使用jquery jQuery速度再快,也无法与原生的javascript方法相比。所以有原生方法可以使用的场合,尽量避免使用jQuery。...javascript原生循环方法for和while,要比jQuery的.each()方法快,应该优先使用原生方法。 10.
我们知道使用js获取标签元素,需要页面加载完成以后再获取,我们通过给onload事件属性设置了一个函数来获取标签元素,而jquery提供了ready函数来解决这个问题,保证获取标签元素没有问题,它的速度比原生的...window.onload = function(){ var oDiv = document.getElementById('div01'); alert('原生就是获取的...window.onload = function(){ var oDiv = document.getElementById('div01'); alert('原生就是获取的...' + $div); }); 这是一个div 说明: 引入jQuery 获取标签元素需要在入口函数来完成,它的速度比原生的...,一共介绍5种选择器: 1.标签选择器 2.类选择器 3.id选择器 4.层级选择器 5.属性选择器 工欲善其事,必先利其器!
(1)最快的选择器:id选择器和元素标签选择器 举例来说,下面的语句性能最佳: $('#id') $('form') $('input') 遇到这些选择器的时候,jQuery内部会自动调用浏览器的原生方法...找出网页中所有的隐藏元素,就要用到伪类选择器: $(':hidden') 属性选择器的例子则是: $('[attribute=value]') 这两种语句是最慢的,因为浏览器没有针对它们的原生方法...不要过度使用jQuery jQuery速度再快,也无法与原生的javascript方法相比。所以有原生方法可以使用的场合,尽量避免使用jQuery。...(4)插入html代码的时候,浏览器原生的innterHTML()方法比jQuery对象的html()更快。 9....javascript原生循环方法for和while,要比jQuery的.each()方法快,应该优先使用原生方法。 10.
//页面DOM加载完成后进行 }) 上述两种方法可以使jQuery的书写位置任意存放 等待DOM结构渲染完毕后即可执行内部代码,不必等到所有外部资源加载完毕,jQuery帮我们完成了封装 相当于原生JS...') == $(DOM对象) jQuery对象 -> DOM对象 $('选择器')[index] $('选择器').get(index) 注意:因为原生JS比jQuery更大,原生的一些属性和方法jQuery...jQuery的选择器与CSS的选择器完全相同: 标签选择器 类选择器 ID选择器 层次选择器 兄弟选择器 代码展示: <!...jQuery创建 // 原生选择器相对繁琐 document.getElementsByTagName('div'); document.getElementById...这里的选择器完全符合CSS选择器的格式,action我们会在下一部分讲到 $('div').click(); $('.class').click(); $
父选择器 & 在 CSS 中,基本选择器分为以下几种: ID 选择器,如 #id 类选择器,如 .class 标签选择器,如 div、p 属性选择器,如 [lang='en'] 伪类选择器,如 a:hover...@import @import 是 CSS2 原生支持的指令,由于 CSS 只有在执行到这条指令时,才会去加载对应的文件,这样会导致页面闪烁和加载变慢,所以平时并不常用。...以下几种情况,Sass 会将 @import 编译为原生的 CSS 指令: 资源文件后缀为 .css 资源以 URL 地址的形式导入 资源以 CSS 的 url() 方法导入 @media @media...是 CSS 原生支持的指令,用于查询设备媒体,以便做响应式布局。...screen and (min-width: 1980px) { .container .right { font-size: 22px; } } 使用 Sass 媒体查询的好处: 以前使用原生
很早之前,就写过一篇与原生嵌套相关的文章 -- CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?...,彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段,而今天(2023-09-02),CSS 原生嵌套 Nesting 终于成为了既定的规范!...&:hover { color: yellow; } } 从 Chrome 112 开始,原生 CSS 也可以使用嵌套语法了。...大部分同学对嵌套应该还是非常熟悉的,下面我们一起看看,CSS 原生嵌套的能力边界,语法支持范围。...总结一下 总结而言,CSS 原生的嵌套功能相当强大,基本是传统预处理器的平替。
jQuery的编写原则: ---- 一、不要过度使用jQuery 1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大。...所以有原生方法可以使用的场合,尽量避免使用jQuery。 ...jQuery编写技巧: ---- 一、选择器择优 选择器是jQuery的基础,如何选择效率最高的选择器,先要了解各种选择器的性能差异。...(以下按效率由高到低列出) ①ID选择器和标签元素选择器: $("#id"); $("tag"); jQuery内部会自动调用浏览器的原生方法(getElementById();,getElementByTagName...③伪类选择器和属性选择器: $(":type"); $("[Attribute='Value']"); 因为浏览器没有针对它们的原生方法,这两种选择器执行速度是最慢的。
(优先级、计算特殊值) 优先级 (1)、同类型,同级别的样式后者先于前者 (2)、ID > 类样式 > 标签 > * (3)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器...4个等级,a、b、c、d (1)、如果样式是行内样式(通过Style=“”定义),那么a=1,1,0,0,0 (2)、b为ID选择器的总数 0,1,0,0 (3)、c为属性选择器,伪类选择器和class...类选择器的数量。...0,0,1,0 (4)、d为标签、伪元素选择器的数量 0,0,0,1 (5)、!important 权重最高,比 inline style 还要高 11.常见浏览器兼容性问题与解决方案?...(2)、前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数 (3)、用innerHTML代替DOM操作,减少DOM操作次数
领取专属 10元无门槛券
手把手带您无忧上云