html 20130828jquery

最新推荐文章于 2021-05-30 23:15:58 发布

水菩提

最新推荐文章于 2021-05-30 23:15:58 发布

阅读量630

点赞数

分类专栏： web前台

本文链接：https://blog.csdn.net/u012603040/article/details/15504085

版权

web前台专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Jquery

1.http://jquery.com/去下载要使用对应版本的jquery.js

2.将下载jquery.js引入到要使用页面中（安装）

元素选择器：

语法：$(“#元素的id”)

获取元素值

语法：$(“#元素的id”).val（）

为页面元素绑定事件:

$(document).ready(function(){

$(“元素名称或者#id”).事件名称(function(){

要执行的js代码；

});

事件名称等于html页面元素事件去掉前缀on；

Eg：

<head>

<scriptsrc="jquery-1.6.4.js"></script>

$(document).ready(function(){

$("select").change(function(){alert($(this).val());});//为元素绑定事件

$("#tid1").click(function(){alert($("#tid").val());});//为id="sid"元素绑定事件

});

functiontonclick(){

alert($("#tid").val());//$("#tid").val()等价于document.getElementById("tid").value;

}

</script>

</head>

<body >

<optionvalue="1">1111</option>

<optionvalue="2">2222</option>

</select>

</body>

jQuery 语法实例

$(this).hide()

演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide()

演示 jQuery hide() 函数，隐藏 id="test" 的元素。

$("p").hide()

演示 jQuery hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()

演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

选择器：

元素选择器：

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$(".intro") 选取所有 class="intro" 的元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("#demo") 选取所有 id="demo" 的元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[name]") 选取所有带有 name属性的元素。

$("[ name ='#']") 选取所有带有 name值等于 "#" 的元素。

$("[ name!='#']") 选取所有带有 name值不等于 "#" 的元素。

$("[ name $='2 ']") 选取所有 name值以 "2" 结尾的元素。

选择器详情：

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

显示和隐藏：

* slow:表示慢 fast表示快：只要能用slow都可以用fast。隐藏时不页面空间。

Hide():隐藏

$(“#ID”).hide();

$(“#ID”).hide(毫秒);

$(“#ID”).hide(“slow”);

Show()：显示

$(“#ID”).show();

$(“#ID”). show (毫秒);

$(“#ID”). show (“slow”);

toggle();切换（显示的时候就隐藏，反之就显示）

$(“#ID”). toggle ();

$(“#ID”). toggle (毫秒);

$(“#ID”). toggle (“slow”)

淡入淡出：

淡入:

$(“#ID”). fadeIn ();

$(“#ID”). fadeIn (毫秒);

$(“#ID”). fadeIn (“slow”)

淡出:

$(“#ID”). fadeOut ();

$(“#ID”). fadeOut (毫秒);

$(“#ID”). fadeOut (“slow”)

切换：

$(“#ID”). fadeToggle ();

$(“#ID”). fadeToggle (毫秒);

$(“#ID”). fadeToggle (“slow”)

淡入到某种程度：0.0~1.0 0.0表示透明，1.0表示不变。所占空间不改变。

语法:$(“#ID”). fadeTo(“slow/fast”,0.0~1.0);

滑动：(一行一行刷新出来)

显示：

$(“#ID”). slideDown();

$(“#ID”). slideDown(毫秒);

$(“#ID”). slideDown(“slow/fast”);

隐藏：

$(“#ID”). slideUp();

$(“#ID”). slideUp (毫秒);

$(“#ID”). slideUp (“slow/fast”);

切换slideToggle()

$(“#ID”). slideToggle ();

$(“#ID”). slideToggle (毫秒);

$(“#ID”). slideToggle (“slow/fast”);

动画：

$(“#ID”).animate({left:'200px'});:表示移动(有移动轨迹)
$(“#ID”).animate({width:'200px',height:’200px’});:元素宽高变为200px

使用绝对值：

$("div").animate({

left:'200px',

opacity:'0.5',

height:'150px',

width:'150px'

},5000);

说明：离左边200px 透明度50% 变换之后高度宽度为150px 变换时间5秒。

使用相对值：

$(“#ID”).animate({

left:'200px',

opacity:'0.5',

height:'+=150px',

width:'+=150px'

},5000);

说明：离左边200px 透明度50% 变换之后高度宽度在原来基础上都增加150px 变换时间5秒。

$(“#ID”).animate({

width:'toggle'

}，毫秒/”slow/fast”);

说明：从左边滑动切换

$(“#ID”).animate({

height:'toggle'，

}，毫秒/”slow/fast”);

说明：从上边滑动切换

$(“#ID”).animate({

width:'toggle'，

height:'toggle'

}，毫秒/”slow/fast”);

说明：从左上角滑动切换

回调方法callback

$(“#ID”).动作({ 参数列表}，回调函数名称);

回调函数名称不包含括号。

获取/设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

获取时方法不带参数

设置时方法有参数。

•text() - 设置或返回所选元素的文本内容

•html() - 设置或返回所选元素的内容（包括 HTML 标记）

•val() - 设置或返回表单字段的值

水菩提

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 20130828jquery

Jquery1.http://jquery.com/去下载要使用对应版本的jquery.js2.将下载jquery.js引入到要使用页面中（安装）元素选择器：语法：$(“#元素的id”)获取元素值语法：$(“#元素的id”).val（）为页面元素绑定事件:$(document).ready(function(){$(“元素名称或者#id”).事件名称(fu
复制链接

扫一扫

专栏目录