官网 jquery.com
百度
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
新浪
<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>
由于脚本由上到下
解释,如果script在元素前面,则需要使用onload或者ready,告诉引擎在页面加载完成后才运行script内容。
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。
原生JavaScript:
<script type="text/javascript">
window.onload = function() {
var vanish = document.getElementsByTagName("p");
var oBtn = document.getElementsByTagName("button");
oBtn[0].onclick = function() {
var length = vanish.length;
for (var i = 0; i < length; ++ i) {
vanish[i].innerHTML = "";
}
}
}
</script>
使用jQuery(更加方便简洁):
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p, h2").hide();
});
});
</script>
这里的body:
<h2 class="test">This is a headingh2>
<p class="test">This is a paragraph.p>
<p>This is another paragraph.p>
<button id="f" type="button">Click mebutton>
注意: 如果没有使用onload
或者ready
,会使得script执行过早,出现操作错误。
test3.html:19 Uncaught TypeError: Cannot set property 'onclick' of undefined
at test3.html:19
补充:
jQuery入口函数:
$(document).ready(function(){
// 执行代码
});
或者
$(function(){
// 执行代码
});
JavaScript入口函数:
window.onload = function () {
// 执行代码
}
jQuery 入口函数与 JavaScript 入口函数的区别
:
标签(DOM)
都加载之后,就会去执行。所有内容
,包括外部图片之类的文件加载完后,才会执行。jQuery 使用CSS 选择器
来选取 HTML 元素。
$(“p”) 选取
元素。
$(“p.intro”) 选取所有 class=“intro” 的
元素。
$(“p#demo”) 选取所有 id=“demo” 的
元素。
jQuery 使用XPath 表达式
来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素。
$("[href!=’#’]") 选取所有带有 href 值不等于 “#” 的元素。
$("[href$=’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素。
使用原生JavaScript
改变内联样式:
var temp = document.getElementsByTagName('p');
temp[0].style.cssText = "background: red;";
jQuery CSS 选择器
可用于改变 HTML 元素的 CSS 属性。
$("p").css("background-color", "red");
注意: 属性名可加""
可不加,要使用驼峰法
如下:
$("p").css(bakcgroundColor, "red");
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
jQuery 使用名为noConflict()
的方法来解决该问题。
var jq=jQuery.noConflict()
,帮助您使用自己的名称(比如 jq)来代替 $ 符号。
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行!");
});
});
$.noConflict();
var sb = jQuery.noConflict();
sb(document).ready(function() {
// $("button").click(function() {
// $("p, h2").hide();
// });
sb("button")[0].onclick = function() {
sb("p").css("color", "red");
var temp = document.getElementsByTagName('p');
temp[0].style.cssText = "background: red;";
sb("p:not(.test)").css("color", "blue");
}
});
$(selector).hide(speed,callback); $(selector).show(speed,callback);
可选的 speed
参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒。(注意加"")
可选的 callback
参数是隐藏或显示完成后所执行的函数名称。
例子
对于body:
<h3>中国h3>
<button class="show">显示button>
<div class="outer">
<button class="hide">隐藏button>
<p>联系人: 张先生 <br />
北三环中路100号 <br />
北京p>
div>
<h3>美国h3>
<div class="outer">
<button class="hide">隐藏button>
<p>联系人: 张先生 <br />
北三环中路100号 <br />
北京p>
div>
script:
$(document).ready(function() {
$("button.hide").click(function() {
$(this).parent(".outer").hide(1000, showB());
});
});
function showB() {
$("button.show").click(function(){
$("button.show+div").show(1000);
});
}
可以看出,要实现显示隐藏之后的元素,隐藏已显示的元素,只靠hide()和show()十分的不方便。
于是就有了toggle()
.
来回切换hide()和show(),通过一个按钮,显示被隐藏的元素,隐藏已显示的元素。
$("button").click(function(){
$("p").toggle();
});
语法:
$(selector).toggle(speed,callback);
语法:
$(selector).fadeIn/Out/Toggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
hide和show其实是对display
进行设置,fading方法中的in和out和hide/show可以混用。
不过 某些效果不一样。
toggle():
fadeToggle():
slideToggle():
$(selector).animate({params},speed,callback);
必需的 params 参数
定义形成动画的 CSS 属性。
例子
$("button").click(function(){
$("div").animate({left:'250px'});
});
注意属性名字使用驼峰命名法
,属性值用""
括起来。如:marginTop: ‘100px’。
操作多个属性可用逗号
分开:
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
可以定义相对当前元素
的值:
$(document).ready(function() {
$("button").click(function() {
$("p").animate({left: "+=300px"}, "slow");
$("p").animate({fontSize: "+=20px"}, "slow");
});
});
可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
:
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
对同一个选择内容进行前后顺序的动画。
写多个animate()调用
,jQuery会创建包含这些调用的“内部”队列,逐一运行,有先后顺序
。
$(document).ready(function() {
$("button").click(function() {
$("p").animate({left: "+=300px"}, "slow");
$("p").animate({fontSize: "+=20px"}, "slow");
});
});
如上为:先向右平移300px,然后字体变大20px。
可先把选择器赋值到变量,便于操作:
var pp = $("p");
$("p").animate({left: "+=300px"}, "slow");
$("p").animate({fontSize: "+=20px"}, "slow");
如果对不同的选择内容
添加多个动画animate(),则他们是同时进行
的,而不是依次进行。
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll
参数规定是否应该清除动画队列
。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd
参数规定是否立即完成
当前动画。默认是 false。
因此,默认地,不带参数时
,stop() 会清除在被选元素上指定的当前动画,意思是:清楚当前动画队列
上的第一个动画。
注意动画队列的概念思想
jQuery允许在一条语句把多个方法链接起来(在相同元素上)。
做法:直接连在后面添加
即可,执行有先后顺序
。
例子:
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
或者
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
文本
内容内容
(包括 HTML 标记)表单字段
的值无参数时返回相应的值,有参数时设置内容:
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("Hello world!");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
获取属性值:
$("#test1").attr("href")
设置属性值:
$("#test1").attr("href", "https://shaohuahua.top")
设置多个属性值:
$("#test1").attr({
"href": "https://shaohuahua.top",
"title": "test"
});
注意: animate()
和css()
中的属性名用""
括起来时使用的是样式表中的名字,如果不用""
,则用驼峰法
命名。attr()
中的属性名必须用""
括起来。
例子:
$("p").prepend("Some prepended text.");
$("ol").prepend("Prepended item ");
$("p").prepend("Prepended text. ");
其他三种方法相类似,这里都是使用text/HTML
的方式创建新元素。""
内的内容相当于直接写在HTML中
实际上,这四种方法可以通过参数接收无限数量
的新元素。新元素可以通过
例子:
function appendText()
{
var txt1="Text.
"; // 以 HTML 创建新元素
var txt2=$("").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}
被选元素及其子元素
子元素
——清空参数
,参数可为任何jQuery选择器的语法,删除满足条件的元素——过滤例子:
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
可以通过预先设置CSS样式,然后用jQuery添加到元素中。
outerWidth(true)和outerHeight(true) 返回包括内边距、边框和外边距。
设置时参数使用数字即可:
$("button").click(function(){
$("#div1").width(500).height(500);
});
通过遍历方法可以选取任何HTML元素
。
通过jQuery,可以很方便的向上遍历DOM树
,查找元素的祖先
。
返回直接父元素
例子:
$(function() {
var x = $("span").parent();
x.css({
color: "red",
border: "2px solid red"
});
});
返回所有
祖先元素。
可以添加参数
,返回指定元素
的祖先元素。
参数是CSS选择器
,十分灵活。
例子:
$(function() {
var x = $("span").parents("div");
x.css({
color: "red",
border: "2px solid red"
});
});
给定参数,返回两个给定元素之间
的祖先元素。
例子:
$(function() {
var x = $("span").parentsUntil("div");
x.css({
color: "red",
border: "2px solid red"
});
});
children() 方法返回被选元素的所有直接子元素
。
该方法只会向下一级
对 DOM 树进行遍历。
可以使用参数过滤
对子元素的搜索。
例子:
$(function() {
var x = $("div").parents("p.test");
x.css({
color: "red",
border: "2px solid red"
});
});
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代,即所有选定的子孙
。
注意: find(params)必须要有参数
。
$(document).ready(function(){
$("div").find("span");
});
如要返回所有子孙,使用选择器*
:
$(document).ready(function(){
$("div").find("*");
});
siblings()
返回被选元素的所有兄弟元素。
$(document).ready(function(){
$("h2").siblings();
});
可以使用参数
过滤。
$(document).ready(function(){
$("h2").siblings("p");
});
next()
返回被选元素之后的一个
兄弟元素。
**注意:**不可以使用参数
过滤。
nextAll()
返回被选元素之后的所有
兄弟元素。
**注意:**不可以使用参数
过滤。
nextUntil()
返回被选元素和指定元素之间
的兄弟元素。
prev()
prevAll()
prevUntil()
以上三种方法和next相类似,只是方向相反。
三个最基本的过滤方法是:first(), last() 和 eq()
,它们允许您基于其在一组元素中的位置来选择一个特定的元素。
首个
元素最后
一个元素索引号
的元素,n从0开始
符合要求
的元素不匹配
标准的所有元素,与filter()相反jQuery W3school