【JQuery】获取父元素或父节点的方法

jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解:

先举个例子,

<ul class="parent1">

<li><a href="#" id="item1">jquery获取父节点</a></li>

<li><a href="#">jquery获取父元素</a></li>

</ul>

我们的目的是通过 id 为 item1 的便签a取到 class 为 parent1 的ul元素,有以下几种方法:

1、parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

代码如下

$('#item1').parent().parent('.parent1');

2、:parent

匹配含有子元素或者文本的元素

代码如下

$('li:parent'); 

3. parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。

代码如下

 $('#items').parents('.parent1');

4、closest([expr])

closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;3,前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。

【JQuery】分割字符串

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<script language=”javascript” type=”text/javascript”>
function fenli()
{
var str = “a;b;c”;
alert(“str”+str);
var splitstr= new Array();
splitstr=str.split(‘;’);
for(i=0;i<3;i++)
{
form1.txtStr.value=splitstr[0];
form1.txtStr1.value=splitstr[1];
form1.txtStr2.value=splitstr[2];
}
}
</script>
</head>

<body>
<form name=”form1″ id=”form1″ method=”get”>
<input name=”” type=”button” value=”alert” onclick=”return fenli()”/>
<input name=”” id=”txtStr” type=”text” value=””/>
<input name=”” id=”txtStr1″ type=”text” value=””/>
<input name=”” id=”txtStr2″ type=”text” value=””/>
</form>
</body>
</html>

【jquery】根据name属性获取对象

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
var dd=$(":input[name='login']").val();
$(":input[name='login22']").val(dd);
  // $("#txt").attr("value",'11');//填充内容
  });
});

//$(":input[name='login']").val()
</script>
</head>
<body>
Enter your name: <input type="text" /><br>
<input type="text" name="login" value="vvvvv"/><br>
<input type="text" name="login22" value=""/><br>
<p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p>
</body>
</html>

 

【JQuery】jquery的html,text,val

  1. .html()用为读取和修改元素的HTML标签
  2. .text()用来读取或修改元素的纯文本内容
  3. .val()用来读取或修改表单元素的value值。

这三个方法功能上的对比

  1. .html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的”value”值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的”value”值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。
  2. .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。
  3. .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

例子:

<div id=”div”>

<p>here is a paragram</p>

<div>here is a big DIV</div>
</div>function showVal()
{
var div = $(“#div”);
alert(“showVal():  “+div.val());
显示为空
}
function showHtml()
{

var div = $(“#div”);
alert(“showHtml():  “+div.html());
显示为:
<p>here is a paragram</p>
<div>here is a big DIV</div>
}
function showText()
{var div = $(“#div”);
alert(“showText():  “+div.text());
显示为:
here is a paragram
here is a big DIV
}
总结:val()—一般 用在input上,而不用在其他元素,用来获取input或者是select的值
html()和text()可用在多种元素上,但是html()相当于依据源代码返回,也就是在返回的内容中会包含各种tag,而text()则相当于是依据页面显示返回,返回的内容是出去各种tag之间的内容

html属性中有两个方法,一个有参,一个无参

1. 无参html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String

    例子:          html页面代码:<div><p>Hello</p></div>jquery代码:$(“div”).html();

结果:Hello

2.有参html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象

         html页面代码:<div></div>        jquery代码:$(“div”).html(“<p>Nice to meet you</p>”);结果:[ <div><p> Nice to meet you</p></div> ]

其次,text属性中有两个方法,一个有参,一个无参

1. 无参text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String

         例子:            html页面代码:<p><b>Hello</b> fine</p><p>Thank you!</p>

jquery代码:$(“p”).text();

结果:HellofineThankyou!

2.有参text(val):设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 “<” 和 “>” 替换成相应的HTML实体).返回一个jquery对象

           html页面代码:<p>Test Paragraph.</p>         jquery代码:$(“p”).text(“<b>Some</b> new text.”);结果:[ <p><b>Some</b> new text.</p> ]

最后,val()属性中也有两个方法,一个有参,一个无参。

1.无参val():获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。

返回的是一个String、 array

 

       结果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]

例子: //多选下拉框,$(‘#multiple’).val()返回数组 

//$(“#multiple”).val().join(“, “))以,连接数组中每个值

 

html页面代码 :

<p></p><br/>
<select id=”single”>
<option>Single</option>
<option>Single2</option>
</select>
<select id=”multiple” multiple=”multiple”>
<option selected=”selected”>Multiple</option>
<option>Multiple2</option>
<option selected=”selected”>Multiple3</option>
</select>

jquery代码:

(“p”).append( “<b>Single:</b> ”   + $(“#single”).val() + ” <b>Multiple:</b> ” + $(“#multiple”).val().join(“, “));

2.有参val(val):设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为check,select,radio元件赋值,返回一个jquery对象

   html页面代码:<input type=”text”/>

jquery代码:$(“input”).val(“hello world!”);

结果:hello world!

【JQuery】选项卡效果

效果:

html代码:

<script type="text/javascript" src="./source/plugin/hrg_score/template/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="./source/plugin/hrg_score/template/js/hrg_score.js"></script>
<link rel="stylesheet" href="./source/plugin/hrg_score/template/css/hrg_score.css"></link>

<div id="hrg_score_body">
<ul>
<li class="hrg_score_change"><span>个人积分</span></li>
<li><span>每日积分</span></li>
<li><span>每日排行榜</span></li>
<li><span>管理中心</span></li>
</ul>
<div id="hrg_score_content">
<div class="hrg_score_cat">

<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series" border="2">
<caption> </caption>
<tr><th scope="col">华高id</th><th scope="col">下场日期</th><th scope="col">分数</th><th scope="col">球场</th><th scope="col">球场标准</th><th scope="col">评论</th></tr>
</table>

</div>

<div class="hrg_score_cat">

<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series" border="2">
<caption> </caption>
<tr><th scope="col">华高id</th><th scope="col">下场日期</th><th scope="col">分数</th><th scope="col">球场</th><th scope="col">球场标准</th><th scope="col">评论</th></tr>

</table>

</div>

<div class="hrg_score_cat">

<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series" border="2">
<caption> </caption>
<tr><th scope="col">名次</th><th scope="col">华高id</th><th scope="col">下场日期</th><th scope="col">分数</th><th scope="col">球场</th><th scope="col">球场标准</th><th scope="col">评论</th></tr>

</table>

</div>

<div class="hrg_score_cat">

<table id="mytable01" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series" border="2">
<form action="./source/plugin/hrg_score/add_score.php" method="post">
<caption> </caption>
<tr><th scope="col" colspan="2">添加高尔夫积分</th></tr>
<tr><td class="row">华高id</td><td class="row"><input style="background:#ccc;" type="text" name="HGID" value="{$_G['username']}" readonly="readonly"/></td></tr>
<tr><td class="row">下场日期</td><td class="row"><input style="background:#ccc;" type="text" name="Time" readonly="readonly" value="{$GLOBALS['hrg_time']}"/></td></tr>
<tr><td class="row">分数</td><td class="row"><input type="text" name="fs" /></td></tr>
<tr><td class="row">球场</td><td class="row"><input type="text" name="xc" /></td></tr>
<tr><td class="row">球场标准</td><td class="row"><input type="text" name="xcbz" /></td></tr>
<tr><td class="row">评论</td><td class="row"><input type="text" name="pl" /></td></tr>
<input type="hidden" name="limituser" value="{$GLOBALS['hrg_limituser']}"/>
<tr><td colspan="2"><input type="submit" name="submit" id="submit" value="添加"/></td></tr>
</table>
</form>

</div>
</div>
</div>

css代码:

#hrg_score_body{
	width: 960px;
	height: auto;
	margin: 0 auto;
	font-size: 12px;
}

#hrg_score_body > ul{
	list-style: none;
	height: 35px;
	line-height: 35px;
}

#hrg_score_body > ul > li{
	float:left;
	width: 100px;
/*	border: 1px solid #000;*/
	margin-right: 3px;
	text-align: center;
	border-bottom: none;
	position: relative;
	cursor: pointer;
	padding-left: 10px;
	background: url(../img/hrg_li.gif) no-repeat left top;
}

#hrg_score_body > ul > li > span{
	display: block;
	color:#fff;
	padding-right: 10px;
	background: url(../img/hrg_li.gif) no-repeat right top;
}

#hrg_score_body ul li.hrg_score_change{

	border-bottom: 1px solid #fff;

}

#hrg_score_content{
	margin-top: -1px;
	border: 1px solid #74AB8D;
	width: 960px;
	height: auto;
	float:left;
}

.hrg_score_cat{
	width: 900px;
	height: auto;
	margin: 5px auto;
}

#hrg_score_footer{
	clear: both;
}

#mytable{
	width: 900px;
}

#mytable01{
	width: 400px;
}

#mytable01 td{
	width: 50%;
}

#mytable,#mytable01{
	text-align:center;
	padding: 0;
	margin: 0 auto;
	font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #4f6b72;
	background: #E6EAE9;
}

caption {
	padding: 0 0 5px 0;
    width: 500px;
	font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
} 

#mytable  th,#mytable01 th {
	font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #4f6b72;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	padding: 6px 6px 6px 12px;
	background: #CAE8EA no-repeat;
} 

#mytable  td,#mytable01 td {
	border-right: 1px solid #74AB8D;
	border-bottom: 1px solid #74AB8D;
	background: #fff;
	font-size:11px;
	padding: 6px 6px 6px 12px;
	color: #4f6b72;
}

#submit{
	width: 80px;
	height: 40px;
	border: 1px solid #74AB8D;
	cursor: pointer;
}

JQuery代码:

$(document).ready(function(){

	$(".hrg_score_cat:gt(0)").hide();

	$("#hrg_score_body ul li").click(function(){
		$(this).addClass("hrg_score_change")
			.siblings().removeClass("hrg_score_change");

		var index = $("#hrg_score_body ul li").index(this);

		$(".hrg_score_cat").eq(index).show("slow").siblings().hide("slow");
	});

});

 

【JQuery】jquery定时执行

jquery定时执行

setTimeout 用于延时器,只执行一次.

setInterval:用于多次执行.

Javascript代码 :

    function getnums() {
     $.get("http://special.ku6.com/office2010/api/nums.php?" + Math.random(), function(data){
      nums = '[img]images/cnt/left.gif" width="62" height="27[/img]';
      $.each(data, function(i) {
       num = data.substr(i, 1);
       nums += '[img]images/cnt/'+num+'.gif" width="16" height="27[/img]';
      });
      nums +='[img]images/cnt/right.gif" width="5" height="27[/img]';
      $("#default_count").html(nums);
     });
    }
    $(document).ready(function(){
     setInterval(getnums, 10000);
    });

 

取消定时器

Javascript代码 :

var wait=setInterval(function(){
                    if(!$(".box").is(":animated")){
                        clearInterval(wait);
                        //执行code
                        alert("动画都已经执行完!");
                    }
                },200);

 

【JQuery】jquery操作css

样式操作

<p class=”myclass” title=”选择喜欢的水果”>你最喜欢的水果是?<p>

在上面代码中,class也是p元素的属性,因此获取class和设置class都可以用attr()方法来完成

代码如下:

Var p_class=$(“p”).attr(“class”); //获取p元素的class

也可以用attr()方法来设置class

$(“p”).attr(“class”,”high”); //$(“p”).removeclass(“high”) .removeclass(“another”);

$(“p”).removeclass(“high another”)

将类全部移除

$(“p”).removeclass()single”>
<option>Single</option>
<option>Single2</option>
</select>
<select id=”multiple” multiple=”multiple”>
<option selected=”selected”>Multiple</option>
<option>Multiple2</option>
<option selected=”selected”>Multiple3</option>
</select><br/>
<input type=”checkbox” value=”check1″/> check1
<input type=”checkbox” value=”check2″/> check2
<input type=”radio” value=”radio1″/> radio1
<input type=”radio” value=”radio2″/> radio2

jQuery 代码:

        $(“#single”).val(“Single2”); // single single2 说明singl2被选中
$(“#multiple”).val([“Multiple2”, “Multiple3”]);
$(“input”).val([“check2”, “radio1”]);

CSS-DOM

CSS

css(name)

访问第一个匹配元素的样式属性。

返回值:String

参数:name (String) : 要访问的属性名称

示例

取得第一个段落的color样式属性的值。

jQuery 代码:

$(“p”).css(“color”);

css(properties) // properties JION对象

把一个/值对对象设置为所有匹配元素的样式属性。

这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

返回值:jQuery

参数:properties (Map) : 要设置为样式属性的名/值对

示例

将所有段落的字体颜色设为红色并且背景为蓝色。

jQuery 代码:

$(“p”).css({ color: “#ff0011”, background: “blue” });

如果属性名包含 “-“的话,必须使用引号:   //jion语法规定

jQuery 代码:

$(“p”).css({ “margin-left”: “10px”, “background-color”: “blue” });

      css(name,value)

在所有匹配的元素中,设置一个样式属性的值。

数字将自动转化为像素值

返回值:jQuery

参数:name (value) : 属性名

value (String, Number) : 属性值

示例

将所有段落字体设为红色

jQuery 代码:

$(“p”).css(“color”,”red”);

3.2: 位置

offset()

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整形属性:top left。此方法只对可见元素有效。

返回值

Object{top,left}

示例

获取第二段的偏移

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

 jQuery 代码:

var p = $(“p:last”);

var offset = p.offset();

p.html( “left: ” + offset.left + “, top: ” + offset.top );

结果:

<p>Hello</p><p>left: 0, top: 35</p>

3.3:宽高

 height()

取得第一个匹配元素当前计算的高度值(px)。

jQuery 1.2 以后可以用来获取 window document 的高

         返回值:Integer

示例

获取第一段的高

jQuery 代码:

$(“p”).height();

获取文档的高

jQuery 代码:

$(document).height();

height(val)

为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位(如:em%),使用px

如果没有明确指定单位(如:em%),使用px

返回值:jQuery

参数:val (String, Number) : 设定CSS ‘height’ 的值

         示例

         把所有段落的高设为 20:

         jQuery 代码:

         $(“p”).height(20);

width()

取得第一个匹配元素当前计算的宽度值(px)。

jQuery 1.2 以后可以用来获取 window document 的宽

返回值:Integer

示例

获取第一段的宽

jQuery 代码:

$(“p”).width();

获取当前窗口的宽

jQuery 代码:

$(window).width();

width(val)

为每个匹配的元素设置CSS宽度(width)属性的值。

如果没有明确指定单位(如:em%),使用px

返回值:jQuery

参数:val (String, Number) : 设定 CSS ‘width’ 的属性值

示例

将所有段落的宽设为 20:

jQuery 代码:

$(“p”).width(20);

方法 描述
addClass() 向匹配的元素添加指定的类名。
attr() 设置或返回匹配元素的属性和值。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
toggleClass() 从匹配的元素中添加或删除一个类。
val() 设置或返回匹配元素的值。