`
yanghongxia9
  • 浏览: 115031 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jquery控制页面

 
阅读更多
1.each()使用，如下例子用于遍历图片，提示是第几副图片以及图片的ID：
<html>
<head>
<title>each()方法</title>
<style type="text/css">
<!--
img{
border:1px solid #003863;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("img").each(function(index){
this.title = "这是第" + index + "幅图，id是：" + this.id;
});
});
</script>
</head>
<body>
<img src="01.jpg" id="Tsinghua01">
<img src="02.jpg" id="Tsinghua02">
<img src="03.jpg" id="Tsinghua03">
<img src="04.jpg" id="Tsinghua04">
<img src="05.jpg" id="Tsinghua05">
</body>
</html>
2.attr(name)使用，获取元素的属性值:
<html>
<head>
<title>attr(name)方法</title>
<style type="text/css">
<!--
em{
color:#002eb2;
}
p{
font-size:14px;
margin:0px; padding:5px;
font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//var sTitle = $("em").attr("title"); //获取第一个<em>元素的title属性值
var sTitle = $("em:eq(1)").attr("title"); //获取第二个<em>元素的title属性值
$("span").text(sTitle);
});
</script>
</head>
<body>
<p>从前有一只大<em title="huge, gigantic">恐龙</em>...</p>
<p>在树林里面<em title="running">跑啊跑</em>...</p>
<p>title属性的值是：<span></span></p>
</body>
</html>
3.attr(name,value)设置元素属性值：
<html>
<head>
<title>attr(name,value)方法</title>
<style type="text/css">
<!--
button{
border:1px solid #950074;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function DisableBack(){
$("button:gt(0)").attr("disabled","disabled");
}
</script>
</head>
<body>
<button onclick="DisableBack()">第一个Button</button>&nbsp;
<button>第二个Button</button>&nbsp;
<button>第三个Button</button>&nbsp;
</body>
</html>
4.attr(name,fn)通过函数设置元素属性值：
<html>
<head>
<title>attr(name,fn)方法</title>
<style type="text/css">
<!--
div{
font-size:14px;
margin:0px; padding:5px;
font-family:Arial, Helvetica, sans-serif;
}
span{
font-weight:bold;
color:#794100;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("div").attr("id", function(index){
//将id设置为序号相关的参数
return "div-id" + index;
}).each(function(){
//找到每一项的span标记
$(this).find("span").html("(id='" + this.id + "')");
});
});
</script>
</head>
<body>
<div>第0项 <span></span></div>
<div>第1项 <span></span></div>
<div>第2项 <span></span></div>
</body>
</html>
5.attr(properties)设置元素多个属性：
<html>
<head>
<title>attr(properties)方法</title>
<style type="text/css">
<!--
img{
border:1px solid #003863;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("img").attr({
src: "06.jpg",
title: "紫荆公寓",
alt: "紫荆公寓"
});
});
</script>
</head>
<body>
<img>
<img>
<img>
<img>
<img>
</body>
</html>
6.addClass添加多个CSS类别：
<html>
<head>
<title>addClass()方法</title>
<style type="text/css">
<!--
.myClass1{
border:1px solid #750037;
width:120px; height:80px;
}
.myClass2{
background-color:#ffcdfc;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//同时添加多个CSS类别
$("div").addClass("myClass1 myClass2");
});
</script>
</head>
<body>
<div></div>
</body>
</html>
7.toggleClass样式来回切换：
<html>
<head>
<title>toggleClass()方法</title>
<style type="text/css">
<!--
p{
color:blue; cursor:help;
font-size:13px;
margin:0px; padding:5px;
}
.highlight{
background-color:#FFFF00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("p").click(function(){
//点击的时候不断切换
$(this).toggleClass("highlight");
});
});
</script>
</head>
<body>
<p>高亮？</p>
</body>
</html>
8.伸缩的菜单，有Jquery重写：
<html>
<head>
<title>伸缩的菜单，用jQuery重写</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F; /* 添加下划线 */
}
#navigation > ul > li > a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}

/* 子菜单的CSS样式 */
#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
#navigation ul li ul.myHide{ /* 隐藏子菜单 */
display:none;
}
/*
不再需要myShow样式
#navigation ul li ul.myShow{
display:block;
}
*/
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//找到所有li标记中包含的ul标记
//然后找到它的前一个标记（即<a>），并添加click()事件
$("li").find("ul").prev().click(function(){
//点击<a>时让它后面的兄弟（即<ul>）切换CSS样式
$(this).next().toggleClass("myHide");
});
});
/*
//替换原来的例题
function change(){
$(this).parent().find("ul").toggleClass("myHide");
//通过父元素li，找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.className == "myHide")
oSecondDiv.className = "myShow";
else
oSecondDiv.className = "myHide";
}
window.onload = function(){
$("li").find("ul").prev().click(change);
/*var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes; //子元素
var oA;
for(var i=0;i<aLi.length;i++){
//如果子元素为li，且这个li有子菜单ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild; //找到超链接
oA.onclick = change; //动态添加点击函数
}
}
}*/
</script>
</head>
<body>
<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
        <ul class="myHide">
            <li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
<li><a href="#">Sports</a>
        <ul class="myHide">
            <li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>       
        </li>
<li><a href="#">Weather</a>
        <ul class="myHide">
            <li><a href="#">Today's Weather</a></li>
                <li><a href="#">Forecast</a></li>
            </ul>
        </li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>
9.交替变幻的表格：
<html>
<head>
<title>交替变幻的表格</title>
<style>
<!--
.datalist{
border:1px solid #007108; /* 表格边框 */
font-family:Arial;
border-collapse:collapse; /* 边框重叠 */
background-color:#d9ffdc; /* 表格背景色 */
font-size:14px;
}
.datalist th{
border:1px solid #007108; /* 行名称边框 */
background-color:#00a40c; /* 行名称背景色 */
color:#FFFFFF; /* 行名称颜色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #007108; /* 单元格边框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
background-color:#a5e5aa; /* 隔行变色 */
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
$("table").mouseover(function(){
$("tr:gt(0)").toggleClass("altrow");
});
$("table").mouseout(function(){
$("tr:gt(0)").toggleClass("altrow");
});
});
</script>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
    <tr>
<td>fresheggs</td>
<td>W610</td>
<td>Nov 5th</td>
<td>Scorpio</td>
<td>1038818</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
<tr>
<td>lovehate</td>
<td>W47</td>
<td>Sep 5th</td>
<td>Virgo</td>
<td>6098017</td>
</tr>
<tr>
<td>slepox</td>
<td>W19</td>
<td>Nov 18th</td>
<td>Scorpio</td>
<td>0658635</td>
</tr>
<tr>
<td>smartlau</td>
<td>W19</td>
<td>Dec 30th</td>
<td>Capricorn</td>
<td>0006621</td>
</tr>
<tr>
<td>shenhuanyan</td>
<td>W25</td>
<td>Jan 31th</td>
<td>Aquarius</td>
<td>0621827</td>
</tr>
<tr>
<td>tuonene</td>
<td>W210</td>
<td>Nov 26th</td>
<td>Sagittarius</td>
<td>0091704</td>
</tr>
<tr>
<td>ArthurRivers</td>
<td>W91</td>
<td>Feb 26th</td>
<td>Pisces</td>
<td>0468357</td>
</tr>
<tr>
<td>reconzansp</td>
<td>W09</td>
<td>Oct 13th</td>
<td>Libra</td>
<td>3643041</td>
</tr>
<tr>
<td>linear</td>
<td>W86</td>
<td>Aug 18th</td>
<td>Leo</td>
<td>6398341</td>
</tr>
<tr>
<td>laopiao</td>
<td>W41</td>
<td>May 17th</td>
<td>Taurus</td>
<td>1254004</td>
</tr>
<tr>
<td>dovecho</td>
<td>W19</td>
<td>Dec 9th</td>
<td>Sagittarius</td>
<td>1892013</td>
</tr>
<tr>
<td>shanghen</td>
<td>W42</td>
<td>May 24th</td>
<td>Gemini</td>
<td>1544254</td>
</tr>
<tr>
<td>venessawj</td>
<td>W45</td>
<td>Apr 1st</td>
<td>Aries</td>
<td>1523753</td>
</tr>
<tr>
<td>lightyear</td>
<td>W311</td>
<td>Mar 23th</td>
<td>Aries</td>
<td>1002908</td>
</tr>
</table>
</body>
</html>
10css(name,value)添加样式属性值：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>css(name,value)方法</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("p").mouseover(function(){
$(this).css("color","red");
});
$("p").mouseout(function(){
$(this).css("color","black");
});
});
</script>
</head>
<body>
<p>把鼠标放上来试试？</p>
<p>或者再移动出去？</p>
</body>
</html>
11.设置背景透明度opacity：
<html>
<head>
<title>设置opacity</title>
<style type="text/css">
<!--
body{
/* 设置背景图片，以突出透明度的效果 */
background:url(bg1.jpg);
margin:20px; padding:0px;
}
img{
border:1px solid #FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//设置透明度，兼容性很好
$("img").mouseover(function(){
$(this).css("opacity","0.5");
});
$("img").mouseout(function(){
$(this).css("opacity","1.0");
});
});
</script>
</head>
<body>
<img src="07.jpg">
</body>
</html>
12:text()纯文本与html()设置HTML：
<html>
<head>
<title>text()与html()</title>
<style type="text/css">
<!--
p{
margin:0px; padding:5px;
font-size:15px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("p").click(function(){
var sHtmlStr = $(this).html(); //获取innerHTML
$(this).text(sHtmlStr); //将代码做为纯文本传入
});
});
</script>
</head>
<body>
<p><b>文本</b>段 落<em>示</em>例</p>
</body>
</html>
13 append()在前面元素后面添加内容：
<html>
<head>
<title>append()方法</title>
<style type="text/css">
<!--
em{
color:#002eb2;
}
p{
font-size:14px;
margin:0px; padding:5px;
font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//直接添加HTML代码
$("p:eq(1)").append("<b>直接添加</b>");
});
</script>
</head>
<body>
<p>从前有一只大<em title="huge, gigantic">恐龙</em>...</p>
<p>在树林里面<em title="running">跑啊跑</em>...</p>
</body>
</html>
14.appendTo()在后面元素添加内容：
<html>
<head>
<title>appendTo()方法</title>
<style type="text/css">
<!--
body{ margin:5px; padding:0px; }
p{ margin:0px; padding:1px 1px 1px 0px; }
img{
border:1px solid #003775;
margin:4px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("img:eq(0)").appendTo($("p")); //添加目标为多个<p>，添加元素还存在
$("img:eq(1)").appendTo($("p:eq(0)")); //添加目标是唯一的<p>，添加元素不存在
});
</script>
</head>
<body>
<img src="08.jpg"> <img src="09.jpg">
    <hr>
    <p><img src="10.jpg"></p>
<p><img src="10.jpg"></p>
    <p><img src="10.jpg"></p>
</body>
</html>
15.after方法使用：
<title>after()方法</title>
<style type="text/css">
<!--
p{
font-size:14px; font-style:italic;
margin:0px; padding:5px;
font-family:Arial, Helvetica, sans-serif;
}
a:link, a:visited{
color:red;
text-decoration:none;
}
a:hover{
color:black;
text-decoration:underline;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("p").after($("a:eq(0)")); //添加目标为多个<p>
$("p:eq(1)").after($("a:eq(1)")); //添加目标是唯一的<p>
});
</script>
</head>
<body>
<a href="#">要被添加的链接1</a>
    <a href="#">要被添加的链接2</a>
    <p>从前有一只大恐龙...</p>
<p>在树林里面跑啊跑...</p>
</body>
</html>
16.remove()方法使用：
<html>
<head>
<title>remove()方法</title>
<style type="text/css">
<!--
p{
font-size:14px;
margin:0px; padding:5px;
}
a:link, a:visited{
color:red;
text-decoration:none;
}
a:hover{
color:black;
text-decoration:underline;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("p").remove(":contains('大')");
//$("p:contains('大')").remove();
});
</script>
</head>
<body>
    <p>从前有一只大恐龙...</p>
<p>在树林里面跑啊跑...</p>
    <a href="#">突然撞倒了一颗大树...</a>
</body>
</html>
17.empty()方法使用：
<html>
<head>
<title>empty()方法</title>
<style type="text/css">
<!--
p{
border:1px solid #642d00;
margin:2px; padding:3px;
height:20px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("p").empty(); //删除所有子元素
});
</script>
</head>
<body>
    <p>从前有一只大恐龙...</p>
<p>在树林里面跑啊跑...</p>
    <a href="#">突然撞倒了一颗大树...</a>
</body>
</html>
18.clone()方法使用：
<html>
<head>
<title>clone()方法</title>
<style type="text/css">
<!--
body{ margin:5px; padding:0px; }
p{ margin:0px; padding:1px 1px 1px 0px; }
img{
border:1px solid #003775;
margin:4px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//直接修改例题11.16
$("img:eq(0)").clone().appendTo($("p"));
$("img:eq(1)").clone().appendTo($("p:eq(0)"));
});
</script>
</head>
<body>
<img src="08.jpg"> <img src="09.jpg">
    <hr>
    <p><img src="10.jpg"></p>
<p><img src="10.jpg"></p>
    <p><img src="10.jpg"></p>
</body>
</html>
19.clone(true)方法：
<html>
<head>
<title>clone(true)方法</title>
<style type="text/css">
<!--
input{
border:1px solid #7a0000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("input[type=button]").click(function(){
//克隆自己，并且克隆点击的行为
$(this).clone(true).insertAfter(this);
});
});
</script>
</head>
<body>
<input type="button" value="Clone Me">
</body>
</html>
20.bind()方法使用：
<html>
<head>
<title>bind()</title>
<style type="text/css">
<!--
img{
border:1px solid #000000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("img")
.bind("click",function(){
$("#show").append("<div>点击事件1</div>");
})
.bind("click",function(){
$("#show").append("<div>点击事件2</div>");
})
.bind("click",function(){
$("#show").append("<div>点击事件3</div>");
});
});
</script>
</head>
<body>
<img src="11.jpg">
<div id="show"></div>
</body>
</html>
21.one()方法使用：
<html>
<head>
<title>one()</title>
<style type="text/css">
<!--
div{
border:1px solid #000000;
background:#fffd77;
height:50px; width:50px;
padding:8px; margin:5px;
text-align:center;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
float:left;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//首先创建10个<div>块
for(var i=0;i<10;i++)
$(document.body).append($("<div>Click<br>Me!</div>"));
var iCounter=1;
//每个都用one添加click事件
$("div").one("click",function(){
$(this).css({background:"#8f0000", color:"#FFFFFF"}).html("Clicked!<br>"+(iCounter++));
});
});
</script>
</head>
<body>
</body>
</html>
22.unbind(eventType,listener)使用：
<html>
<head>
<title>unbind(eventType,listener)</title>
<style type="text/css">
<!--
img{
border:1px solid #000000;
}
input{
border:1px solid #570000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
var fnMyFunc1; //函数变量
$("img")
.bind("click",fnMyFunc1 = function(){ //赋给函数变量
$("#show").append("<div>点击事件1</div>");
})
.bind("click",function(){
$("#show").append("<div>点击事件2</div>");
})
.bind("click",function(){
$("#show").append("<div>点击事件3</div>");
});
$("input[type=button]").click(function(){
$("img").unbind("click",fnMyFunc1); //移除事件监听myFunc1
});
});
</script>
</head>
<body>
<img src="11.jpg"> <input type="button" value="移除事件1">
<div id="show"></div>
</body>
</html>
23.事件对象：
<html>
<head>
<title>事件对象</title>
<style type="text/css">
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin:0px; padding:5px;
}
p{
background:#ffe476;
margin:0px; padding:5px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("p").bind("click", function(e){ //传递事件对象e
var sPosPage = "(" + e.pageX + "," + e.pageY + ")";
var sPosScreen = "(" + e.screenX + "," + e.screenY + ")";
$("span").html("<br>Page: " + sPosPage + "<br>Screen: " + sPosScreen);
});
});
</script>
</head>
<body>
<p>Click Me!</p>
<span></span>
</body>
</html>
24.事件触发：
<html>
<head>
<title>事件触发</title>
<style type="text/css">
<!--
input{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
margin:0px; padding:4px;
border:1px solid #002b83;
}
div{
font-family:Arial, Helvetica, sans-serif;
font-size:12px; margin:2px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function Counter(oSpan){
var iNum = parseInt(oSpan.text()); //获取span中本身的值
oSpan.text(iNum + 1); //点击次数加1
}
$(function(){
$("input:eq(0)").click(function(){
Counter($("span:first"));
});
$("input:eq(1)").click(function(){
Counter($("span:last"));
$("input:eq(0)").trigger("click"); //触发按钮1的点击事件
});
});
</script>
</head>
<body>
<input type="button" value="Button 1">
<input type="button" value="Button 2"><br><br>
    <div>按钮1点击次数：<span>0</span></div>
    <div>按钮2点击次数：<span>0</span></div>
</body>
</html>
25.toggle()方法使用：
<html>
<head>
<title>toggle()</title>
<style type="text/css">
<!--
body{
/* 设置背景图片，以突出透明度的效果 */
background:url(bg1.jpg);
margin:20px; padding:0px;
}
img{
border:1px solid #FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("img").toggle(
function(oEvent){
$(oEvent.target).css("opacity","0.5");
},
function(oEvent){
$(oEvent.target).css("opacity","1.0");
}
);
});
</script>
</head>
<body>
<img src="07.jpg">
</body>
</html>
分享到：
| js 判断数组包含某值的方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果：进入qq空间，向下拉动空间，...

    第二章-JQUERY-控制页面

    通过学习和实践这些示例，你可以更好地掌握jQuery控制页面的方法和技巧，提升网页开发效率。 总结，jQuery作为前端开发的重要工具，以其简洁的语法和强大的功能，让开发者能够更轻松地控制和美化网页。了解并熟练...

    jquery控制页面部分刷新的方法

    本文实例讲述了jquery控制页面部分刷新的方法。分享给大家供大家参考。具体分析如下： 这段代码设计非常巧妙，通过jQuery的load方法加载页面的指定标签的内容 $('#button1').click(function() { var url = ...

    jquery控制页面的展开和隐藏实现方法(推荐)

    知识点：jQuery控制页面元素的展开和隐藏方法 jQuery是一种轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互的过程，是目前Web开发中最常用的库之一。在页面布局中，有时候需要对某些部分...

    JQuery权威指南 源代码

    jquery开发入门/1 1.1　jquery概述/2 1.1.1　认识jquery /2 1.1.2　jquery基本功能/2 1.1.3　搭建jquery开发环境/3 1.1.4　编写第一个简单的...控制dom对象/7 1.2.3　jquery控制页面css /9 1.3　本章小结/11 第2章...

    精通javascript+jQuery

    《精通JavaScript+jQuery》从JavaScript的基础知识开始...在此基础之上又通过精彩的实例详细讲解了jQuery的相关技术：主要包括jQuery的基础、如何使用jQuery控制页面、制作动画与特效、简化Ajax以及jQuery插件等内容。

    jQuery动画特效---精通JavaScript+jQuery

    第11课 - jQuery控制页面 - [精通JavaScript+jQuery] 第12课 - jQuery动画特效 - [精通JavaScript+jQuery] 第13课 - jQuery功能函数 - [精通JavaScript+jQuery] 第14课 - jQuery与Ajax - [精通JavaScript+jQuery]...

    jquery 实现的等待加载页面

    "jQuery 实现的等待加载页面"就是一种为了优化用户交互而设计的技术方案。jQuery，一个强大的JavaScript库，简化了DOM操作、事件处理和动画效果，使得创建这种功能变得更加简单。 首先，我们来看`jquery....

    jquery页面加载效果

    "jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画，它能够以吸引人的视觉方式展示网页内容正在加载的过程，使用户在等待期间不会感到乏味。这种效果在现代网页设计中被广泛应用，尤其在内容分块...

    jquery控制滚动条下拉后DIV容器在页面中的位置

    标题中的“jquery控制滚动条下拉后DIV容器在页面中的位置”是指利用jQuery库来实现一个功能，即在用户滚动网页时，使指定的DIV元素始终保持在屏幕的某个固定位置，这种效果通常被称为“粘性导航”或“固定定位”。...

    jQuery模拟页面加载进度条

    本教程将详细讲解如何使用jQuery库来模拟页面加载进度条。 首先，jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery的易用性和丰富的功能使其成为创建动态网页的强大...

    jquery应用子页面在父页面打开

    5. **样式控制**：通过jQuery，我们可以方便地改变子页面中的元素样式。例如，`$("#iframeID").contents().find(".className").css("property", "value")`将修改子页面中所有`.className`类元素的`property`属性为`...

    jQuery权威指南-源代码

    1.2.3　jQuery控制页面CSS /9 1.3　本章小结/11 第2章　jQuery 选择器/12 2.1　jQuery选择器概述/13 2.1.1　什么是选择器/13 2.1.2　选择器的优势/13 2.2　jQuery选择器详解/17 2.2.1　基本选择器/18 2.2.2　层次...

    第 7 章 jQuery 基础.pptx

    jQuery 可以控制页面元素的样式、大小、位置、内容等属性，例如：`css()`、`width()`、`height()`、`text()` 等。 ### jQuery 任务实施 jQuery 任务实施包括：实现文字和图片提示效果、实现登录表单简单验证、...

    jquery页面屏蔽器插件

    3. **JavaScript**：插件的核心逻辑由JavaScript编写，通过jQuery库与HTML元素进行交互，实现页面元素的可见性控制。 ### 文件结构 - **block_demo.html**：这是一个示例文件，演示了插件的使用方法，包括如何引入...

    jquery前台logo页面

    在jQuery中，我们可以使用`.fadeIn()`和`.fadeOut()`方法实现logo的动态显示效果，配合`.delay()`和`.queue()`可以控制动画的时间间隔和执行顺序。同时，`.on('click', function() {...})`可以绑定点击事件，当用户...

    jQuery实现网页打开页面即弹窗

    **jQuery实现网页打开页面即弹窗** 在网页设计中，弹窗是一种常见的交互方式，用于显示重要的信息或者引导用户操作。jQuery，一个广泛使用的JavaScript库，提供了简洁的API来简化DOM操作，使得创建动态和交互性的...

    jQuery页面上下滚动触发区块动画特效

    在这款特效中，jQuery被用来监听页面滚动事件，以及控制元素的动画展示。通过使用jQuery，开发者可以更方便地实现复杂的页面交互功能，而无需编写大量原生JavaScript代码。 ### 2. 页面滚动事件 页面滚动事件是...

    精通JavaScript.jQuery.rar

    在此基础之上，《精通JavaScript+jQuery(1CD)》通过精彩的实例详细讲解了jQuery的相关技术，主要包括jQuery的基础、如何使用jQuery控制页面、制作动画与特效、简化Ajax以及jQuery插件等内容。讲解的重点在于简化...

Magicbox
Global site tag (gtag.js) - Google Analytics