js与css日常遇到的问题及解决办法

前端有可能遇到的问题?
2023
js获取多个标签值’
const queryAll = document.querySelectorAll(‘span.at-button’);
const queryAry = [];
for(let i =0;i < queryAll.length;i++){
queryAry.push(queryAll[i].getAttribute(‘data-user’));
}
console.log(‘多个标签值’,queryAry);

2020
window.open js打开新窗口被拦截 可以用一个a标签代替做模拟点击解决$(‘a’)[0].click()

文本框换行处理
$(‘#wel’).bind(‘input propertychange’,function(){
var val = $(this).val();
$(“textarea[name=‘tpl_wellcome’]”).val(val);
var html = ‘

’ + val + ‘

’;
html = html.replace(/\n/g,‘

’);
$(‘.job_intro’).html(html);
});

<!------定义浏览器的渲染方式------>

jquery防止按钮重复点击处理方式
一、$(“#comfirmButton”).attr(“disabled”, false);
二、var isClick = true;
$(“#comfirmButton”).on(“click”, function () {
if (isClick) {
isClick = false;
//做你想做的
}
setTimeout(function () {
isClick = true;
}, 1000);//一秒内不能重复点击
});
2019
jquery nth-child(3n+2) 父元素的3n+1个子元素的元素
mui 点击a标签拿不到事件解决方法
mui(‘body’).on(‘tap’,‘id类名/class类名’,function(){
//点击执行的方法
});
js文本换行替换
var txts = $(‘.wra’).html();
txts=txts.replace(/[\n\r]/g,‘
’)
$(‘.wra’).html(txts);

layer自适应高
is_iframeAuto: true,

iframe 不能点击问题（不能跨域）
$(‘#zhaopinhui’).load(function () {
$(‘#zhaopinhui’).contents().find(“a”).on(‘click’, function () {
console.log(“iframe的ID是zhaopinhui a是iframe需要点击的标签”);
})

})；

//获取焦点后光标在字符串后
//其原理就是获得焦点后重新把自己复制粘帖一下
var t=$(“#”+id).val();
$(“#”+id).val(“”).focus().val(t);

桌面消息
http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/

//回车事件绑定
KaTeX parse error: Expected '}', got 'EOF' at end of input: …　　//回车执行查询 　　　　(‘#go_search’).click();
　　}
});

滚动条位置
$(‘body,html’).animate({
scrollTop:thisId
},500);

H5左右滑动内容css写法
display: -webkit-box;
overflow-x: scroll;

vue视频
https://www.bilibili.com/video/av24099073?from=search&seid=10924492470240867255

box-sizing: border-box;

h5清除默认的点击高亮效果
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;

旧版本写法
var mySwiper = new Swiper(‘.swiper-container’,{
loop:4,
//autoplay: 3000,
pagination: ‘.swiper-pagination’,
paginationClickable: true,//点击小圆点切换
onSlideChangeStart: function(swiper){//当前滚动索引
console.log(swiper.activeIndex);
if(swiper.activeIndex == ‘5’){
$(‘.landTabList span’).removeClass(‘cut’);
$(‘.landTabList span’).eq(0).addClass(‘cut’);
}
$(‘.landTabList span’).eq(swiper.activeIndex-1).addClass(‘cut’).siblings().removeClass(‘cut’);
}
});

新版本写法
var mySwiper = new Swiper(‘.swiper-container’,{
autoplay: {
delay:3000,
disableOnInteraction: false,//滑动或点击小圆点后继续自动滑动
},
pagination :{
el: ‘.swiper-pagination’,
clickable :true//显示小圆点
},
on: {
slideChangeTransitionStart: function(){
//获取滑动选中后的索引
$(‘.landTabList span’).eq(this.activeIndex).addClass(‘cut’).siblings().removeClass(‘cut’);
},
},
});
$(‘.landTabList span’).on(‘click’, function(){
var thisIndex = $(this).index();
$(this).addClass(‘cut’).siblings().removeClass(‘cut’);
mySwiper.slideTo(thisIndex);//点击后切换到对应索引
});

css透明
filter:alpha(opacity=60);-moz-opacity:0.6;opacity: 0.6; z-index: 5;
css3背景颜色透明，字不透明
background-color: rgba(0, 0, 0, 0.6);

display:flex;flex-wrap:wrap;可以换行
background: linear-gradient(to right, #648ae8,#517ae0)??

设置浏览器的兼容模式（让IE使用最新的浏览器渲染）

用这个 适配现在的刘海屏手机 IPHONEX

H5页面获取焦
点后页面放大

阻止回车提交
在form上加οnsubmit=“return false”

MUI 手机控件
问题：有一部分手机获取焦点的时候会把日期控件显示出来
解决方法：获取焦点隐藏日期控件，失去显示日期控件

$(‘#txtUserName,#txtUserPhone,#txtPostName,#txtCompanyName’).focus(function(){
$(‘.bodyPd’).removeClass(‘mui-mocusin’);
$(‘.mui-dtpicker’).css(‘display’,‘none’);
});
$(‘#txtUserName,#txtUserPhone,#txtPostName,#txtCompanyName’).blur(function(){
$(‘.bodyPd’).addClass(‘mui-mocusin’);
$(‘.mui-dtpicker’).css(‘display’,‘block’);
});
MUI input在IOS下不能输入，是禁掉用户可以选中页面中的内容。
添加以下style样式即可
input{

-webkit-user-select: auto;

}

1、解决H5页面在iOS网页中的数字被识别为电话号码 点击变蓝后的数字会出现拨打号码的页面。

layer.js引入有可能和【模块】冲突，导致报layer.open未定义
解决方法是把layer.js和需要引用的地方放在【模块】之上
???parent.layer???

html页面上有一块【空白】问题是后端保存的【格式】BOM问题软件【EmEditor】，需要找程序重新 编辑一次
代码为：&#65279

H5一屏显示 设计尺寸应为：640*1008

jq追加进来的元素，【点击事件】无效；解决办法是前边的绑定点击事件这样写

$(document).on(‘click’,‘.chooseAddress-show’,function(){
$(this).next().slideDown(‘slow’);
})

苹果手机浏览器$(document).on(“click”,function(){})点击无效的问题
解决办法：
给需要绑定事件的元素添加一个css cursor: pointer
selector {
cursor:pointer
}

//解决IE8报console未定义
window.console = window.console || (function () {
var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile
= c.clear = c.exception = c.trace = c.assert = function () { };
return c;
})();

//用ie8模式

//ifram弹窗刷新父页面写法
KaTeX parse error: Expected 'EOF', got '#' at position 32: …ocument).find('#̲recommendedWork…person_id/}");

谷歌浏览器，如果不加载flash插件 可以在输入网址处有个 感叹号图标 点击后选择网站设置把 flash选项设置为 【允许】 就可以了

判断当前父类frames窗口的的个数，如果大于0 就刷新当前页面
if(window.parent.frames.length){
window.parent.location.href = ‘/’;
}

swiper 滚动时字变模糊

var mySwiper = new Swiper(‘.swiper-container’, {
direction: ‘vertical’,//可设置水平(horizontal)或垂直(vertical)。
slidesPerView: 4,//显示几个
roundLengths : true,//解决字变模糊
speed:5000,//匀速滑动
autoplay: {
delay: 1000,//自动滚动
disableOnInteraction: false,
},
pagination: {
el: ‘.swiper-pagination’,
clickable: false,
},
});

移动端H5开发所遇到的问题与细节,以及ios兼容（实用）
https://blog.csdn.net/dwb123456123456/article/details/82663563

判断是ios嵌套的h5页面加不一样样式
{/if $mobilesys == ‘ios’/}
.setHeadBdPop{ position: absolute;}
{//if/}

如果页面上引用多个jquery.min.js会报（$）错未定义，需要删除重复的

浏览器记录了登录后的用户名密码，去除方法在form上加autocomplete=“off”，在密码上加 passwordautocomplete=“new-password”

框架弹窗一边用dialog 一边用showModual引用 点击取消关闭方法
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲btnCancel').on(…(this).parents(‘.dialogCon’).find(‘._dialogHeader ._dialogClose’).length){
KaTeX parse error: Expected 'EOF', got '}' at position 79: …')[0].click(); }̲else { this.tri…(‘#btnCancel’)[0].trigger){
$(‘#btnCancel’)[0].trigger(‘close’);

}else {
if(window.fix$ && window.fixKaTeX parse error: Expected '}', got 'EOF' at end of input: …og){ window.fix(‘#btnCancel’).closeDialog();
}else {
$(‘#btnCancel’).closeDialog();
}
}

如果是在微信里面打开的HT页面，点击后打不开，请求其他接口能打开。是后台那面没授权

页面如果报offset().left undefind 的话是找不到某一个类 可以把哪个类隐藏但不要删除掉 这样就不会报错
//???Cannot read property ‘left’ of undefined???

获取style里面的宽
$(this).parents(“.JS-star”).children(‘span’)[0].style.width

判断滚动条上下滚动
var scrollNext=0,
scrollUp=0;
$(window).scroll(function(e){
scrollNext = $(this).scrollTop();
if(scrollUp <= scrollNext){//下滚
console.log(‘向下’)
}
else{//上滚
console.log(‘向上’)
}
setTimeout(function(){scrollUp = scrollNext;},0);
});

移动端提示文档
http://sufangyu.github.io/project/dialog2/dist/demos/