Jquery的方法(二)

时间:2022-11-28 00:16:59

一、文档操作
1、html()和text()的区别

<div id="J_div"><b><i>我是谁</i></b></div>
var str1 = $("#J_div").html();
document.write(str1);

结果是:<b><i>我是谁</i></b>

<div id="J_div"><b><i>我是谁</i></b></div>
var str2 = $("#J_div").text();
document.write(str2);

结果是:我是谁

二、属性操作
1、attr()和prop()的区别
无论是勾选复选框还是取消复选框,当你用attr()方法获取复选框checked属性时,如果你没有给复选框设置checked属性,它都会返回undefined; 如果你给复选框设置了checked属性,它都会返回checked。
然而,当你用prop()方法获取复选框checked属性时,它会返回相应的实际勾选结果(选中,返回值为true;没选中,返回值为false)。
总之,浏览器用properties记录当前值,用attributes保存初始值。
温馨提示:
A、判断复选框是否选中,请用$jqobj.prop('checked')==true,不要用$jqobj.attr('checked',true);
B、如果让复选框失效,不要想着通过给disabled属性设置true,false,enable,disabled值来实现,因为没用,你可以通过添加disabled属性,删除disabled属性来实现。

三、筛选过滤
1、index()和eq()的区别
index()参数可以是dom对象,jquery对象,字符串,返回值是元素的索引值(从0开始),即指定元素相对于其他指定元素的index位置;
eq()参数只能是数字(从0开始),返回值是对应下标的jq对象。
2、get()和eq()的区别
get()参数是数字(从0开始),返回值是dom对象,可以接着使用js原生方法;
eq()参数是数字(从0开始),返回值是jq对象,可以接着使用jq方法。

/**
* 激活输入面板,获取焦点
*/
$('.choose-des-btn').get(0).addEventListener("click",function(){
$('.content').hide();
$('.choose-destination-window').show();
$('#J_input_box').focus();
});

四、样式操作
1、width()和css('width')的区别

var $width = $('#box').width();
console.log($width);//
var csswidth = $('#box').css('width');
console.log(csswidth);//100px

两者都取到了指定宽度,不同的是.width()返回一个数字100,可以直接参与数值运算,而.css('width')返回了字符串100px。

2、css()和attr()的区别
attr()用来设置标签属性,css()用来设置标签样式。

五、事件
1、重置表单

document.getElementById("myForm").reset();//dom表单对象
$("#myForm")[0].reset();//jquery表单对象先转化为dom对象

2、序列化表单

params = $("#myForm").serialize();
//序列化的值可用于ajax请求的URL字符串中,比如a=1&b=2&c=3&d=4&e=5

3、click(),click(fn),trigger('click',[data])的区别
$jqobj.click()和$jqobj.trigger('click')都可以触发点击事件,但是trigger可以带参数。
写一个点击图片验证码,验证码就刷新的事件,后面可以用$jqobj.trigger('click')在多处调用该事件。

4、去掉字符串首尾的空白字符

$.trim($("#uname").val());