博客

js 开启新窗口

$(function() {
        $("#btn").click(function() {
            var a = $("<a href='http://www.xxxx.com' target='_blank'>Apple</a>").get(0);
            
            var e = document.createEvent('MouseEvents');
 
            e.initEvent('click', true, true);
            a.dispatchEvent(e);
            #console.log('event has been changed');
        });
    });

js 确认删除原生弹框

if (confirm("是否确认删除")) {
				console.log(1111)
			}else{
				console.log(2222)
			}

js 或者jq 获取页面元素失效

举个例子，在页面上看到了ul  里面有三个li  在页面加载完成以后 就$(‘ul’).find(‘li’) 怎么也获取不到元素，

后来想到，有可能li 也是动态加载的，页面原有的js 还没把li 加载好，我就去获取了，肯定获取不到，然后我就

setTimeout(function(){

$(‘ul’).find(‘li’);

},3000);

加了一个延时，结果就能正常获取了。第一次遇到这种情况，踩坑踩了一个多小时

jq 控制checkbox 切换选中状态失效

$(".chooseall").click(function(){
    if($(".chooseall").prop("checked") == true){
        $("input[name='checkbox1']").prop("checked", false);
        console.log(1);
    }else{
        $("input[name='checkbox1']").prop("checked", true);
        console.log(2);
    }
});

jquery 1.6以上 prop 和attr 的操作对象不同，attr是操作html节点  prop操作的是js获取的DOM对象

详情参考:

脚本之家

jq当前元素的点击事件

<input onclick=shoucang(this) value='666'>

function shoucang(data){

console.log( $(data).val() );

}

ajax 上传图片

$('#receiptimg').change(function(event) {
	var formData = new FormData();
	var id =$('#id').val();
    	formData.append("file", $(this).get(0).files[0]); 
        //文件 因为我是点击按钮选择了文件就自动上传 所以是this 如果是点击按钮提交就看下面的
    	
        formData.append("id", id); //额外参数
    	 $.ajax({
                  url:yourUrl,
	          type:'POST',
	          data:formData,
	          cache: false,
	          contentType: false, //必须要有   
	          processData: false, //必须要有   
	          success:function(data){
	              //code
	          },
	          error:function(data){
	            //code
	           }
	             
	      });
	});



//下面是百度的一段代码

<p>姓名<input type="text" name="username"></p>
<p>头像<input type="file" id="upload"></p>
<p><button class="btnnn">提交</button><span class="tishi"></span></p>

$(".btnnn").click(function () {
        var formData=new FormData();
        formData.append("username",$(":text").val());
        formData.append("file",$("#upload")[0].files[0]);  //这里就是点击按钮 所以是根据按钮的id找  
        $.ajax({
            url:"xxxx",
            type:"POST",
            data:formData,
            contentType:false,
            processData:false,
            success:function (data) {
              //code
            }

        })
    })

2018-4-26

新增、删除属性

$("#id").addClass('classname')

$("#id").removeClass('classname')

获取值，得到值，修改值，清空值

$("#input").val()

获取img标签的src  并且赋值

获取：$("#code_img").attr('src')； 或者 $("#code_img").prop('src')；

var newsrc = $("#code_img").attr('src')+'?time='+Math.random()

赋值： $("#code_img").attr('src','xxxxxxxxxx');  或者 $("#code_img").prop('src','xxxxxxxx')；

判断多选框是否被选中：

if($('input[type="checkbox"]').prop("checked")==true){
     //do something
  }

获取自定义属性

$('#code').getAttribute('mylink')

事件

.click，onclick（）

click 与onclick的区别：

$(function(){
$("#btn3").click(function(){
alert("second");
});
});

function change(){
alert("first");
} 

然后点击：

<button id=”btn3″οnclick=”change()”>dd</button>

先弹出first,然后再弹出second

数据转化成对象

json_encode的数据到模板里用js先 eval（）转换成对象

ajax获取的html字符串，用$(data)即可转化成对象  $(data).html 即可获取data里面的html内容

ajax局部刷新页面js失效

比如按钮的click事件，绑定事件用 on    因为局部刷新以后事件要重新绑定，用on 即可  具体的参数请自行百度

$('#id').on('click', function() {      
   	// function code		
});

Jq追加了一个按钮，需要绑定点击事件，这个时候用on来绑定，但是要先选择父级

//先往div里追加一个button id='button'
//绑定点击事件
$('#div').on('click','#button',function(){
//这里需要先选择 button的父级 然给button绑定
})

$('#button').on('click',function(){
//如果这样直接绑定，经常是无效的，不知道为什么 = =
})

2018年5月28日16:15:54

JS序列化表单 中文乱码

var form = $('#add_menu_form').serialize(); // 表单里有中文 serialize()自动调用了encodeURIComponent方法将数据编码了
 var data = decodeURIComponent(form,true); // 解码中文
  console.log(data);

php接收到数据后  直接 parse_str()处理一下就好

2018年6月4日

遍历

$('#id').each(function()｛

alert($(this).text())

｝）  //进行DOM遍历，比如遍历一个ul 显示里面的li的文本内容

$.each(data,function(key,val)｛

alert(val.属性名)

｝)

//遍历数据，比如json对象,应该alert(val.属性名)

给单选按钮追加选中

if (if_show) {
$("input:radio[name='if_show']").eq(0).attr("checked",'checked');
}else{
$("input:radio[name='if_show']").eq(1).attr("checked",'checked');
}

定时器

//定时器，2秒钟后触发按钮的点击事件
setTimeout(function (){
$('#button').click();
$('#showmessage').trigger("click");
},2000);

给select 下拉列表追加默认选中

$("select[name='xxx']").find("option[value='"+pid+"']").attr("selected",true);//pid 是变量，这里拼接一下
$("#id").find("option[text='xxx']").prop("selected",true);//attr 也可以

var options=$(“#id option:selected”); //获取选中的项这个对象

alert(options.val()); //拿到选中项的值

alert(options.text()); //拿到选中项的文本

js调用函数的返回值取不到的问题：

简单的例子：

function check_name(){
	var ck_res=false; //定义一个变量
	$.ajax({
	type:'get',
	async:false,
	success:function(msg){
	if(msg){ 
	ck_res = true;   //更改变量值
	}else{
	ck_res = false; //更改变量值
	}
	}
	});
	return ck_res; //返回变量值
	}

var res = check_name() 这个时候res的值就是 函数的返回值

function check_name(){
	
	$.ajax({
	 type:'get',
	 async:false,
	 success:function(msg){
	  if(msg){ 
	  return true;
	  }else{
	  return false;
	  }
	 }
	});
	}
var res = check_name() 这个时候 res就是未定义  

因为是ajax返回了以后并没有变量接收，返回值只是存在于check_name函数内部，如果 var ajax_return=$.ajax({……}) 这样 ajax_return就是一个对象，然后在check_name（）里再把这个对象return，最后res有值，不过也是个对象，里面的responseText是文本内容，不推荐这种写法，只是说明为什么在ajax里直接return 然后再调用函数却接收不到值 。

第一种在方法里先声明变量，在ajax里改变以后，在方法里再return 变量 这种才是常规的写法。

Jquery判断元素是否隐藏

if($("#test").is(":hidden")){
       $("#test").show();    //如果元素为隐藏,则将它显现
}else{
      $("#test").hide();     //如果元素为显现,则将其隐藏
}

有用的话点个赞，谢谢