没有合适的资源?快使用搜索试试~ 我知道了~
jQuery完整版学习资料.pdf
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 52 浏览量
2022-11-23
16:13:50
上传
评论
收藏 2.85MB PDF 举报
温馨提示
试读
16页
。。。
资源推荐
资源详情
资源评论
phonegap
jquery mobile
sencha touch
使用 Google 的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
使用 Microsoft 的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
jQuery 语法实例
$(this).hide()演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
$("#test").hide()演示 jQuery hide() 函数,隐藏 id="test" 的元素。
$("p").hide()演示 jQuery hide() 函数,隐藏所有 <p> 元素。
$(".test").hide()演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
更多的选择器实例
语法
$(this)
$("p")
$("p.intro")
$(".intro")
$("#intro")
$("ulli:first")
$("[href$='.jpg']")
$("div#intro .head")
描述
当前 HTML 元素
所有<p> 元素
所有 class="intro"的<p> 元素
所有 class="intro"的元素
id="intro"的第一个元素
每个<ul>的第一个<li>元素
所有带有以 ".jpg"结尾的属性值的 href属性
id="intro"的<div>元素中的所有 class="head" 的元素
jQuery 事件函数
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ // 防止页面加载时直接调用
$("button").click(function(){ // 定义某控件的事件{执行操作}
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
jQuery 事件
Event 函数
$(document).ready(function)
$(selector).click(function)
$(selector).dblclick(function)
$(selector).focus(function)
$(selector).mouseover(function)
绑定函数至
将函数绑定到文档的就绪事件(当文档完成加载时)
触发或将函数绑定到被选元素的点击事件
触发或将函数绑定到被选元素的双击事件
触发或将函数绑定到被选元素的获得焦点事件
触发或将函数绑定到被选元素的鼠标悬停事件
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
varjq=jQuery.noConflict() ,帮助您使用自己的名称(比如 jq)来代替 $ 符号。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
varjq=jQuery.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
jQuery 滑动函数 - slideDown, slideUp, slideToggle
//向下,向上,切换
$(selector).toggle(speed,callback)
speed 参数可以设置这些值:"slow", "fast", "normal" 或毫秒。
Callback 参数完成操作后继续执行其他操作。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
剩余15页未读,继续阅读
资源评论
春哥111
- 粉丝: 1w+
- 资源: 5万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功