前端常用小代码

臭大佬 2019-09-21 03:16:59 1106
前端 
简介 jquery通过name属性取值的方法

jquery通过name属性取值的方法

//input
$("input[name='title']").val();

//textarea
$("textarea[name='remark']").val();

//select
$("select[name='region[province]']").val();
$("select[name='province']").val();
$("#"+id+" select").find("option:first").prop("selected", true);

//checkbox
$("input:checkbox[name='test']:checked").each(function() { // 遍历name=test的多选框
  $(this).val();  // 每一个被选中项的值
});
//设置选中 
$('#cb').prop('checked', true);
$("input[name='_checkbox']:checked");
$("input[name='sfz']").attr("checked","checked");

//获取是否选中 
var isChecked = $('#cb').prop('checked');
//或 
var isChecked = $('#cb').is(":checked");

$("[name='https_origin_type'][value='1']").prop("checked", true);//设置值为1的为选中
//radio
$("input[name='']:checked").val();
$(":radio[name='level']:checked").val();
$('input:radio:first').prop('checked', true);
$("input[name='radioName'][value=2]").prop("checked",true); 

//原生方法
document.querySelector('input[name="control_name"]').getAttribute('value');
document.querySelector('meta[name="csrf-token"]').getAttribute('content');

//Jquery清空(获取)当前页面所有的input和textarea的两种写法
$("#myform input,#myform textarea").each(function(){
    this.value = this.value.replace(/\&/g,"%26");//也可以清空数据this.value ="";
})
$("#myform").find("input,textarea").each(function(){
   this.value = this.value.replace(/\&/g,"%26");//也可以清空数据this.value ="";
});

$body.off('click', options.elem).on('click', options.elem, function(){}

$(".addPackage").unbind("click");
$(".addPackage").click(function () {})

$(document).off("click",'.change-goods');
$(document).on('click','.change-goods',function () {})

事件冒泡导致栈内存溢出以及jquery的trigger触发事件的问题

$(‘#demo’).trigger(‘click’)并不能触发a标签中内容的点击事件,只是相当于触发了a本身的onclick,而不是像用户点击一样的事件。
如果需要a标签的点击效果,需要把事件绑定到a标签内部的元素中才可以,正好html结构里面a标签内部有个类名.des的div标签

//html
<a class="layui-btn" href="http://www.yuemeet.com/" id='demo'>阻止冒泡</a>

//js
$('#demo').click((event)=>{
    event.stopPropagation();
});
$('#demo').on("click",function(){
    $('#demo .des').trigger('click')
});
--------------------- 
原文:https://blog.csdn.net/qingzhizhenhun/article/details/79245495 
//弹出层事件绑定
$(document).on(‘click’, ‘#test’, function() { 
layer.msg(‘响应点击事件’); 
});

//js动态加载HTML元素时出现的无效的点击事件
$("body").delegate(".layui-icon-delete","click", function(){
    $(this).parent().remove();
});

变量作为对象的key

var lastWord = 'last word';
var a = {
  'first word': 'hello',
  [lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

字符串和数组转换

//数组转字符串
var a, b,c; 
a = new Array(a,b,c,d,e); 
b = a.join('-'); //a-b-c-d-e  使用-拼接数组元素
c = a.join(''); //abcde
//字符串转数组
var str = 'ab+c+de';
var a = str.split('+'); // [ab, c, de]
var b = str.split(''); //[a, b, +, c, +, d, e]
//js字符串转json对象
 //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 
$.parseJSON( jsonstr );
JSON.parse(jsonstr); //可以将json字符串转换成json对象 
JSON.stringify(jsonobj); //可以将json对象转换成json对符串 
eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号 
//js判断字符串是否包含某个字符
var str = "123";
console.log(str.indexOf("3") != -1 );  // true
// 判断数组中是否存在某个元素

placeholder中实现换行

使用 &#13;&#10;
placeholder="单个添加:支持多源,一行一个&#13;&#10;批量添加:域名---源站IP,如:www.baidu.com ---127.0.0.1,一行一个"

判断浏览器

/**
 * 获取当前浏览器类型
 */
function myBrowser() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    if (userAgent.indexOf("MSIE") >= 0) {
        return 'ie';
    } else if (userAgent.indexOf("Firefox") >= 0) {
        //firefox
      return 'Firefox';
    } else if (userAgent.indexOf("Chrome") >= 0) {
        //Chrome
       return 'Chrome';
    } else if (userAgent.indexOf("Opera") >= 0) {
        //Opera
        return 'Opera';
    } else if (userAgent.indexOf("Safari") >= 0) {
        //Safari
        return 'Safari';
    } else if (userAgent.indexOf("Netscape") >= 0) {
        //Netscape
        return 'Netscape'
    }
    return false;
}

css隐藏滚动条

//chrome 和Safari
.element::-webkit-scrollbar { width: 0 !important }
.element { -ms-overflow-style: none; }
.element { overflow: -moz-scrollbars-none; }