A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 逆风TO 黑马粉丝团   /  2019-7-10 09:47  /  858 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

jQuery简介


jQuery库可以通过一行简单的标记被添加到网页中。

jQuery库是一个JavaScript函数库

Html元素选取

Html元素操作

CSS操作

Html事件函数

JavaScript特效和动画

HtmlDom遍历和修改

Ajax

Utilities





向页面添加jQuery库

jQuery库位于一个JavaScript文件中,其中包含了所有的jQuery函数

<head>

<script type=”text/javascript”  src=”jquery.js”</script>

</head>

在html5中不用添加type=”text/javascript”,因为javaScript 是html5以及现代所有的浏览器的默认脚本语言

实例 :

<html>

<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 type="button">Click me</button>

</body>

</html>







安装下载
有两个版本可供选择:

production version,实际网站中,已被精简和压缩
Development version,用于测试和开发,未被压缩,是可读代码
另一种选择方法:(库的替代)

不自己的计算机上存放jQuery库,从Google或Microsoft加载CDN  jQuery核心文件

使用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语法:
$(selector).action()

美元符号定义jQuery()
选择符(selector)“查询“和”查找”html元素
Jquery的action()执行对元素的操作


jQuery语法实例

$(this).hide()

隐藏当前的Html元素。

$(“#test”).hide()

隐藏id=”test“的元素

$(“p”).hide()

隐藏所有的<p>元素

$(“.test”).hide()

隐藏所有的class=”test”的元素



文档就绪函数

$(document).ready(function(){

});

为防止文档在完全加载(就绪)之前运行jQuery代码



jQuery效果
1.隐藏和显示
hide()、show()使用实例

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#hide").click(function(){

  $("p").hide(1000);

  });

  $("#show").click(function(){

  $("p").show(1000);

  });

});

</script>

</head>

<body>

<button id="hide" type="button">隐藏</button>

<button id="show" type="button">展示</button>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

</body>

</html>





2.淡入淡出
fadeIn() ,用于淡入已隐藏的元素

fadeout(),用于淡出可见元素

fadeToggle(),在fadeIn()和fadeout()之间切换

fadeTo(),允许渐变 为给定的不透明度(值在0和1之间)



<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").fadeIn();

    $("#div2").fadeIn("slow");

    $("#div3").fadeIn(3000);

  });

});

</script>

</head>



<body>

<p>演示带有不同参数的 fadeIn() 方法。</p>

<button>点击这里,使三个矩形淡入</button>

<br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>

<br>

<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>

<br>

<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>

</html>





<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("#div1").fadeToggle();

    $("#div2").fadeToggle("slow");

    $("#div3").fadeToggle(3000);

  });

});

</script>

</head>



<body>



<p>演示带有不同参数的 fadeToggle() 方法。</p>

<button>点击这里,使三个矩形淡入淡出</button>

<br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

<br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

<br>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>



</body>

</html>



3.jQuery滑动
$(selector).slideDown(speed,callback);
可选的Speed参数规定效果时长,可以取“slow”、”fast”、毫秒

可选的callback参数是滑动完成后的所执行的函数名称。

slideDown() :向下滑动元素

slideUp():向上滑动元素

slideToggle():向上、向下的切换









动画
Animate()创建自定义动画

$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("div").animate({left:'250px'},4000);   //距离左侧250px,移动时间4s

  });

});

</script>

</head>



<body>

<button>开始动画</button>

<p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

</div>



</body>

</html>



<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("div").animate({

      left:'250px',     //距离左侧250像素

      opacity:'0.5',    //透明度0.5

      height:'150px',  //高度

      width:'150px'    //宽度

    });

  });

});

</script>

</head>



<body>



<button>开始动画</button>

<p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

</div>



</body>

</html>



jQuery停止动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。



Callback函数
在当前动画100%完成之后执行的。

$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});


$(document).ready(function(){

  $("button").click(function(){

  $("p").hide(1000,function(){

    alert("The paragraph is now hidden");

    });

  });

});

Chaining方法
可以把动作/方法链接起来

Chaining允许我们在一条语句中允许多个jQuery方法(在相同的元素上)

$(document).ready(function()

  {

  $("button").click(function(){

    $("#p1").css("color","green")

      .slideUp(2000)     //注意前面有个.

      .slideDown(2000);

  });

});



JQuery HTML
jQuery获取
jQuery DOM操作

DOM=Document Object Model(文档对象模型)

获得内容-text()、html()、val()

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

Html() 设置或返回所选元素的内容(包括HTML标记)

Val() 设置或返回表单字段的值(获取输入字段的值)



<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

alert("Text: " + $("#test").text());

  });

  $("#btn2").click(function(){

    alert("HTML: " + $("#test").html());

  });

});

</script>

</head>





<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert("Value: " + $("#test").val()+$("#passw").val());

  });

});

</script>

</head>



<body>

<p>姓名:<input type="text" id="test" value=" "></p>

<p>密码:<input type="password" id="passw" value=""></p>

<button>显示值</button>

</body>



</html>



获取属性-attr()

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("#w3s").attr("href"));

  });

});

</script>

</head>



<body>

<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>

<button>显示 href 值</button>

</body>

</html>



添加新的html内容

append() 在被选元素的结尾插入内容

prepend() 在被选元素的开头插入内容

after() 在被选元素之后插入内容

before()在被选元素之前插入内容



$(document).ready(function(){

  $("#btn1").click(function(){

    $("p").append(" <b>Appended text</b>.");//在文章的最后添加

  });



  $("#btn2").click(function(){

    $("ol").append("<li>Appended item</li>");//在罗列的条目里添加

  });

});

删除元素
remove()—删除被选元素(及其子元素)

empty() –从被选元素中删除子元素

$("#div1").remove();
$(document).ready(function(){

  $("button").click(function(){

    $("#div1").empty();

  });

});



获取并设置CSS类

addclass() 向被选元素中添加一个或者多个类
removeclass() 向被选元素中删除一个或者多个类
toggleClass() 对被选元素进行添加/删除类的切换操作
4.css() 设置或返回样式属性。



<script>

$(document).ready(function(){

  $("button").click(function(){

    $("h1,h2,p").addClass("blue");

    $("div").addClass("important");

  });

});

</script>



<style type="text/css">

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

</style>


1 个回复

倒序浏览
少时诵诗书所所所所所所所所所所所所所所所所所所
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马