JS、jQuery基础知识学习笔记

2018-01-18 本文已影响23人愿你如夏日清凉的风

一、innerHTML，innerText，outerHTML，textContent的用法与区别

完整示例：

<div id="test">
   <span style="color:red">test1</span> test2
</div>

<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerText内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

结果：

//test.innerHTML 结果：<span style="color:red">test1</span> test2   // 从对象的起始位置到终止位置的全部内容,包括Html标签。
//test.innerText结果：test1 test2   // 从起始位置到终止位置的内容, 但它去除Html标签 。
//test.outerHTML结果：<div id="test"><span style="color:red">test1</span> test2</div>  // 除了包含innerHTML的全部内容外, 还包含对象标签本身。

二、indexOf的使用

checkboxModel.indexOf(item.id) > -1

判读数组中否包含某项，返回true或者false
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
提示：
1，indexOf() 方法对大小写敏感！
2，如果要检索的字符串值没有出现，则该方法返回 -1。

三、jQuery关于元素位置的方法

position() 方法：只能获取，不能设置。

可获取元素相对于其第一个position值不为static的祖先元素的偏移量，如果没有，则是相对于文档的偏移量；返回一个对象，包括两个属性:left，top; 属性值无单位，number类型。具体用法：

$(element).position().left; //获取元素相对于其第一个position值不为static的祖先元素的偏移量

offset()方法：既能获取，也能设置。

获取和设置元素相对于文档的偏移量。获取时返回一个对象，包括两个属性：left，top。属性值无单位，number类型；设置时给方法传入一个对象，可包括属性top,left；具体用法：

$(elemment).offset().left; //获取元素相对于文档的偏移量 
$(element).offset({top:200,left:100}); //设置元素相对于文档的偏移量

scrollLeft()、scrollTop(),滚动方法：既能获取，也能设置。

可以获取和设置元素从顶部或者左侧已经滚动的值,获取时返回number类型的数值，设置时给方法传递一个数字参数。具体用法：

$(element).scrollLeft(); //获取元素滚动的left值 
$(element).scrollLeft(200); //设置元素滚动的left值

四、jQuery关于元素宽高的方法

width()、height() 方法：既能获取，也能设置。

可获取和设置元素内容的宽度和高度。不包括padding、border、margin。获取时，返回number类型；设置时，给方法传入数值类型的参数即可。具体用法：

$(element).width(); //获取元素宽度 
$(element).width(200); //设置元素宽度

innerWidth()、innerHight()方法：只能获取，不能设置。

可获取第一个匹配元素的内部宽度和高度，例如获取元素内部宽度时，包括width+padding,不包括border。

outerWidth()、outerHight()方法：只能获取，不能设置。

可获取第一个匹配元素的外部宽度和高度，有两种情况: （用获取元素外部宽度来举例）
1.当方法内部不指定参数或者参数为false时，包括width+padding+border;
2.当方法内部参数为true时，包括width+padding+border+margin；

css()方法：既可获取，也可设置。

可以获取和设置元素的宽高（当然也可获取和设置其他css属性，这里只是为了与其他几种设置获取元素宽高的方法做对比），当获取元素的宽高时，返回一个单位为px的string字符串；当设置元素宽高时，给css()方法传入对象，对象里面包含width\height属性；具体用法：

$(element).css('width'); //获取元素宽度 
$(element).css({width:'200px',height:'300px'});//设置元素的宽度和高度，也可以不要引号和单位

五、原生js关于元素位置的属性

offsetLeft、offsetTop属性：只可获取，不可设置（类似jQuery的position()方法）。

相对于其第一个position值不为static的祖先元素来计算偏移量，返回number类型数值。offsetParent对象是指元素最近的定位祖先元素，如果没有祖先元素是定位的话，会返回null。

style.left、style.top:既可设置，也可获取。

与offsetLeft、offsetTop属性相比，共同点：都是相对于其第一个position值不为static的祖先元素来计算偏移量；不同点：

通过style,既可获取元素宽高，也可设置元素宽高
style.left/style.top返回的是字符串（包含单位）
要获取style.left/style.top需要事先定义，而且必须定义在html元素的内联样式里，否则获取到的值将为空。

六、原生js关于元素宽高的属性

clientHeight和clientWidth：描述元素内尺寸，是指元素内容+内边距;
offsetHeight和offsetWidth：描述元素外尺寸，是指元素内容+内边距+边框，不包括外边距和滚动条部分。
scrollWidth和scrollHeight:元素的内容区域+内边距+溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等。
style.width、style.height: 可以设置和获取元素的宽度和高度,要获取style.width/style.height需要事先定义，而且必须定义在html元素的内联样式里，否则获取到的值将为空。返回的是字符串(包含单位)。

七、JQuery 样式设置、追加、移除与切换

获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class，JQuery代码如下：

var p_class = $("p").attr("class"); //获取p元素的class
var p_id = $("p").attr("id");  //获取p元素的id

使用attr()方法来设置p元素的class，JQuery代码如下：

$("p").attr("'class", "high");  //设置p元素的class为 "high"

在大多数情况下，它是将原来的class替换为新的class，而不是在原来的基础上追加新的class。

追加样式

$("#nm_p").addClass("another"); // 追加样式

移除样式

$("p").removeClass("high");  //移除p元素中值为"high"的class
// JQuery提供了更简单的方法。可以以空格的方式删除多个class名，代码如下：
$("p").removeClass("high another");
$("p").removeClass();  //移除p元素的所有class

切换样式

JQuery中有一个方法toggle()，JQuery代码如下：

toggleBtn.toggle(function(){       
      //元素显示    代码③       
}, function(){       
      //元素隐藏    代码④       
})

toggle()方法此处的作用是交替执行代码③和代码④两个函数，如果元素原来是显示的，则隐藏它：如果元素原来是隐藏的，则显示它。此时，toggle()方法主要是控制行为上的重复切换。

另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。例如对p元素进行toggleClass()方法操作。

$("p").toggleClass("another");  //重复切换类名“another”

判断是否含有某个样式

hasClass()可以用来判断元素中是甭含有某个class，如果有，则返回true，否则返回false。例如可以使用下面的代码来判断p元素中是否含有“another”的class：

$("p").hasClass("another");

这个方法是为了增强代码可读性面产生的。在JQuery内部实际上是调用了is()方法来完成这个功能的．该方法等价于如下代码：

$("p").is(".another");  //is("."+class);

八、Location.reload()与window.location.href的区别
Location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。

window.location.href=window.location.href; 是定向url提交数据
最好不要用location.reload()，而用location=location比较好，还有在模式窗口（showModalDialog和showModelessDialog）前者