代码改变世界

关于jquery方面的知识点

2017-03-23 10:59  晓九已存在  阅读(172)  评论(0编辑  收藏  举报

jquery向上查找父元素 用到的方法:closest() parents() parent()

closest() 方法获得匹配选择器的第一个祖先元素 [*]parent()函数是只往父级找一层;[*]parents()函数是往父级找多层,一直找到body标签。

向下查找子元素 用到的方法:find() children()

通过children获取的是该元素的下级元素,而通过find获取的是该元素的下级所有元素。

获得元素相对于选择器的 index 位置。

该元素可以通过 DOM 元素或 jQuery 选择器来指定。$(selector).index(element)

 

获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值

window.onload=function()
{
var oDiv=document.getElementByIdx_x('box');
//alert(oDiv.innerHTML) //返回 p标签,与p标签里面的内容
//alert(oDiv.outerHTML); //完全显示,div与p 标签和p标签里面的内容
//alert(oDiv.innerText); //只返回p标签里面的文本内容
alert(oDiv.outerText) //只返回p标签里面的文本内容
}
<div id="box"><p>这是javascript文本内容</p></div>

设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记) $("#msg").html("<font color=red size=4>请输入授权码</font>").show();
val() - 设置或返回表单字段的值

添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法:
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

删除元素/内容
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素

Query toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:
实例
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});


jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度(不包括内边距padding、边框border或外边距margin)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度(包括内边距padding)。
innerHeight() 方法返回元素的高度(包括内边距)。

jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。

jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。

jQuery next() 方法
next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。

jQuery nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的同胞元素。

三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
jQuery not() 方法
not() 方法返回不匹配标准的所有元素。
提示:not() 方法与 filter() 相反。
下面的例子返回不带有类名 "intro" 的所有 <p> 元素:
实例
$(document).ready(function(){
$("p").not(".intro");
});

将jquery对象转换成dom对象
var $cr = $("#cr");
var cr = $cr[0];
dom 方法:cr.checked
jquery 方法:$cr.is(":checked")

var random = parseInt(Math.random()*(12-3+1) +3 )
$("section.main-page").each(function(index,value){
$(this).attr("id","page"+index);
})
var Id = $("section.main-page").attr("id");
if(random = Id){
$("#page+Id ").hide()
}

tar.index(arr[i]).find("li").

jquery.inarray(value,array)
确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。