jsqueryselector

一、jsqueryselector

jsqueryselector是什么呢？不知道的小伙伴来看看小编今天的分享吧!

js中querySelector()方法是返回文档中匹配指定CSS选择器的一个元素。

注意：querySelector()方法仅仅返回匹配指定选择器的第一个元素。如果需要返回所有的元素，使用querySelectorAll()方法替代。

以上三个用来代替getElementById()和getElementByTagName().

相对于querySelectorAll();则是取得一个NodeList

document.querySelector(CSSselectors)

js选择器：querySelector和querySelectorAll

querySelector是单一选择器，得到的是唯一的一个元素；

querySelectorAll，得到的是一个数组，所有名为“*”的集合；

有点类似于jquery中id选择器和class选择一，id必须是唯一的，class是一组，querySelector用来选择唯一的id，querySelectorAll用来选择重复出现的元素或者class，当然理解是这样的，如果页面仅有一个唯一class，你用querySelector也可以！

以上就是小编今天的分享了，希望可以帮助到大家。

二、js实现picker选择器示例详解

*{ margin: 0; padding: 0;}.btn{ height: 32px; padding: 0 15px; text-align: center; font-size: 14px; line-height: 32px; color:#FFF; border: none; background:#1890ff; border-radius: 2px; cursor: pointer;}.mask{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; background: rgba(0, 0, 0,.6); animation: fadeIn.3s forwards;}.slide-box{ position: fixed; left: 0; right: 0; bottom: 0; padding: 15px; border-radius: 10px 10px 0 0; background:#FFF; user-select: none;}.fade-in{ animation: fadeIn.3s forwards;}@keyframes fadeIn{ from{ opacity: 0;} to{ opacity: 1;}}.fade-out{ animation: fadeOut.3s forwards;}@keyframes fadeOut{ from{ opacity: 10;} to{ opacity: 0;}}.slide-up{ animation: slideUp.3s forwards;}@keyframes slideUp{ from{ transform: translate3d(0, 100%, 0);} to{ transform: translate3d(0, 0, 0);}}.slide-down{ animation: slideDown.3s forwards;}@keyframes slideDown{ from{ transform: translate3d(0, 0, 0);} to{ transform: translate3d(0, 100%, 0);}}h4{ height: 24px; margin-bottom: 16px; font-size: 16px; line-height: 24px; text-align: center;}.picker-group{ display: flex;}.picker-column{ position: relative; flex: 1; height: 200px; margin: 0 auto; overflow: hidden; touch-action: none;}.picker-column::before{ content:''; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 79px; border-bottom: 1px solid#ebebeb; background: linear-gradient(to bottom, rgba(255, 255, 255,.9), rgba(255, 255, 255,.6));}.picker-column::after{ content:''; position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; height: 79px; border-top: 1px solid#ebebeb; background: linear-gradient(to bottom, rgba(255, 255, 255,.6), rgba(255, 255, 255,.9));}li{ list-style: none; font-size: 14px; line-height: 40px; text-align: center;}.btn-sure{ display: block; margin: 15px auto 0;}HTML

button class="btn btn-open" type="button"时间选择器/button

div hidden class="mask" div class="slide-box" h4时间选择器/h4 div class="picker-group"div class="picker-column" ul class="picker-content"/ul/divdiv class="picker-column" ul class="picker-content"/ul/div/div button class="btn btn-sure" type="button"确定/button/div/div

class Picker{ constructor(options){ this.options= Object.assign({}, options); this.isPointerdown= false; this.itemHeight= 40; this.maxY= this.itemHeight* 2; this.minY= this.itemHeight*(3- this.options.list.length); this.lastY= 0; this.diffY= 0; this.translateY= 0; this.friction= 0.95; this.distanceY= 0; this.result= this.options.list[0]; this.render(); this.bindEventListener();} render(){ let html=''; for(const item of this.options.list){ html+='li'+ item+'/li';} this.options.pickerContent.innerHTML= html; this.options.pickerContent.style.transform='translate3d(0px,'+ this.maxY+'px, 0px)';} handlePointerdown(e){ if(e.pointerType==='mouse' e.button!== 0){return;} this.options.pickerColumn.setPointerCapture(e.pointerId); this.isPointerdown= true; this.lastY= e.clientY; this.diffY= 0; this.distanceY= 0; this.getTransform(); this.options.pickerContent.style.transform='translate3d(0px,'+ this.translateY+'px, 0px)'; this.options.pickerContent.style.transition='none';} handlePointermove(e){ if(this.isPointerdown){ this.diffY= e.clientY- this.lastY; this.translateY+= this.diffY; this.lastY= e.clientY; this.options.pickerContent.style.transform='translate3d(0px,'+ this.translateY+'px, 0px)';}} handlePointerup(e){ if(this.isPointerdown){ this.isPointerdown= false; this.getTranslateY(); const duration= Math.max(Math.abs(this.distanceY)* 1.5, 300); this.options.pickerContent.style.transition='transform'+ duration+'ms ease'; this.options.pickerContent.style.transform='translate3d(0px,'+ this.translateY+'px, 0px)';}} handlePointercancel(e){ if(this.isPointerdown){ this.isPointerdown= false;}} bindEventListener(){ this.handlePointerdown= this.handlePointerdown.bind(this); this.handlePointermove= this.handlePointermove.bind(this); this.handlePointerup= this.handlePointerup.bind(this); this.handlePointercancel= this.handlePointercancel.bind(this); this.options.pickerColumn.addEventListener('pointerdown', this.handlePointerdown); this.options.pickerColumn.addEventListener('pointermove', this.handlePointermove); this.options.pickerColumn.addEventListener('pointerup', this.handlePointerup); this.options.pickerColumn.addEventListener('pointercancel', this.handlePointercancel);} getTransform(){ const transform= window.getComputedStyle(this.options.pickerContent).getPropertyValue('transform'); this.translateY= parseFloat(transform.split(',')[5]);} getTranslateY(){ let speed= this.diffY; while(Math.abs(speed) 1){ speed*= this.friction; this.distanceY+= speed;} let y= this.translateY+ this.distanceY; if(y this.maxY){ this.translateY= this.maxY; this.distanceY= this.maxY- this.translateY;} else if(y this.minY){ this.translateY= this.minY; this.distanceY= this.minY- this.translateY;} else{ this.translateY= y;} let i= Math.round(this.translateY/ this.itemHeight); this.translateY= i* this.itemHeight; this.result= this.options.list[2- this.translateY/ this.itemHeight];}}

调用方式function createList(start, end){ const list= []; for(i= start; i end; i++){ list[i]= i 10?'0'+ i:''+ i;} return list;}const hours= createList(0, 24), minutes= createList(0, 60);const pickerColumns= document.querySelectorAll('.picker-column');const pickerContents= document.querySelectorAll('.picker-content');const hourPicker= new Picker({ pickerColumn: pickerColumns[0], pickerContent: pickerContents[0], list: hours});const minutePicker= new Picker({ pickerColumn: pickerColumns[1], pickerContent: pickerContents[1], list: minutes});Demo：jsdemo.codeman.top/html/picker

至此，一个简单的picker选择器就实现了。如果小伙伴们想实现根据前一列选中项动态加载后一列数据的功能（例如省市区选择器）还需在此代码基础上自行实现。以上就是js实现picker选择器示例详解的详细内容，更多关于js实现picker选择器的资料请关注自由互联其它相关文章！

三、react-native渲染富文本的几种方案

前言

在日常开发中，经常需要用到富文本编辑器来编辑业务内容，例如新闻、论坛等，然后在用到的地方进行渲染，一般在web端可以直接在html中载入编辑好的内容（一般是一段html），不过在react-native的app中不能直接把html渲染进去，接下来我介绍几种渲染html的方案。

在日常开发中，经常需要用到富文本编辑器来编辑业务内容，例如新闻、论坛等，然后在用到的地方进行渲染，一般在web端可以直接在html中载入编辑好的内容（一般是一段html），不过在react-native的app中不能直接把html渲染进去，接下来我介绍几种渲染html的方案。

既然已经有人造好了轮子，我们就直接拿来用就可以了。可以在网上搜react-native富文本组件，可以有几个选择方案，我这边以react-native-render-html，npm地址：，

这个组件的原理就是把富文本的html标签一个个的解析出来，转换成react-native的标签，再进行渲染就可以了。

注意：如果需要点击放大预览的话，图片需要单独处理。

我们除了直接使用已有的组件之外，还有可以使用webview进行渲染。webview就相当于嵌在App里面的浏览器一样，可以直接访问和渲染html代码。其中webview载入html资源还有两种方法：

具体实现是，先新建一个html文件，在里面写好初始化方法init，提供入参data（html内容）和fn（需要执行的方法），代码如下：

然后再webview引入这个html，注意ios和安卓平台引入的路径问题，代码如下：

以上两种方法都能满足App渲染富文本html的需求，但是高度得需要写死，这样肯定是没有达到预期的，所以我们需要根据内容自适应。webview有个参数是onNavigationStateChange：当导航状态发生变化的时候调用。

我们可以在html里面写个方法，把body的高度写到html的title标签上，这样就会触发导航状态变化，然后再把高度设置到webview样式上就可以了。具体实现：

html的高度不确定多数来源于图片的加载，如果有多个图片的话，onload方法里面拿高度并不一定能得到最后的高度，因为可能有图片没有加载出来。所以需要不断的监听body高度的变化，再设置回去，所以我们可以在onload方法中写，每加载完一个图片就执行一次changeHeight方法：

使用webview进行渲染html的话，就不能直接操作里面的图片及链接（a标签）了，不过webview提供了一个与App通信的功能，也就是onMessage：

onMessage：在webview内部的网页中调用window.postMessage方法时可以触发此属性对应的函数，从而实现网页和RN之间的数据交换。

所以我们可以在html上的onload方法写图片的点击事件，然后发送给react-native这边，react-native在用预览图片的方法进行预览或者对链接的跳转。

所以我们也可以使用postMessage来发送html的高度，html中的changeHeight方法可以改成以下代码：

可以监听设置高度的react-native代码：

至此，react-native渲染富文本的方案介绍完了，有写的不好以及错误的地方欢迎大家指出。