JQuery

一 jQuery简介

1.1 jquery是什么？

是一个javascript库，也是一个js框架。

1.2 优势

1、体积小

2、浏览器兼容性

3、写少量的代码，实现更多的功能。

1.3 文档就绪事件

$(document).ready(function(){
   // 开始写 jQuery 代码...
});

//简洁写法
$(function(){
   // 开始写 jQuery 代码...
});

JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

1.4 $含义

作用 1：$(function)

1.相当于 window.onload=function(){}
2.功能比window.onload更强大
    1) window onload一个页面只能写一个,但是可
    以写多个$() 而不冲突
    2) window onload要等整个页面加载完后再执行
	（包括图片、超链接、音视频等），
    但是$的执行时间要早
3.完整形式是$(document).ready(…….);

作用 2：$(selector)

选择器

jQuery具有强大的选择器功能

二选择器

jQuery 语法：

$()：工厂函数

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作

基础语法是：$(selector).action()

jQuery的选择器主要参考了css的选择器

2.0 对象的转化

jQuery对象转为JS对象：加下标获取

JS对象转为jQuery对象：var zh = $(JS对象);

2.1 基础选择器

js获得元素对象为Element类型,JQ获得元素类型为Object类型

1、类选择器

$(".title").css("color", "green");

2、标签选择器

$("span").css("color", "red");

3、ID选择器

$("#box").css("color", "yellow");

4、并集选择器

$("span,p,.head").css("background-color","black").css("color","white")

5、全局选择器

$("*").css("margin",0).css("padding",0).css("background-color","#000")

2.2 层次选择器

1、后代选择器语法：基础选择器+空格

2、子选择器 >

3、相邻元素选择器 + (紧挨着的)

4、同辈元素选择器 ~

2.3 属性选择器

是一种辅助，适用场景：标签相同，标签的类名也相同的情况。

1、$("a[href^=http]") 属性href的属性值是以http开头

2、$("a[href$=cn]") 属性href的属性值是以cn结尾

3、$("a[href*=www]") 属性href的属性值中包含有www

隔行变色：

$("ul li:even").css("background-color", "#eee")

//符合性选择器
$("input[type=text][name^=z]").css("background-color","deeppink");

2.4 过滤选择器

1、基本过滤选择器

语法	描述	示例
:first	选取第一个元素	$(" li:first" )选取所有元素中的第一个元素
:last	选取最后一个元素	$(" li:last" )选取所有元素中的最后一个元素
:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有元素

语法	描述	示例
:eq(index)	选取索引等于index的元素（index从0开始）	$("li:eq(1)" )选取索引等于1的元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素
:animated	选择所有动画	$(":animated" )选取当前所有动画元素

2、可见性过滤选择器

function hide(){
    $(":visible").hide()
}
//显示
function show(){
    $(":hidden").show()
}

2.5 子元素选择器

:nth-child

匹配其父元素下的第N个子或奇偶元素

':eq(index)'只匹配一个元素,而这个将为每一个父元素匹配子元素。

:nth-child从1开始的，而:eq()是从0开始算的

可以使用：

语法	描述
:nth-child(even)	偶数
:nth-child(odd)	奇数
:nth-child(3n)	3的倍数
:nth-child(2)	2
:nth-child(3n+1)	3的倍数+1
:nth-child(3n+2)	3的倍数+2
:first-child	第一个子元素
:last-child	最后一个子元素
:only-child	只有一个子元素

2.6 表单选择器

// √ 获得form表单中的所有的表单项
var inp= $(":input")

// √ input标签 type属性等于text所对应的对象
$(":text").css("background-color","green");
$(":password").css("background-color","red")

2.7 表单属性选择器

var but = $("input:disabled");//不可操作的按钮
var but = $("input:enabled");//可操作的按钮
var ch = $("input:checked");//多选框
var sel = $("select option:selected")//被选择的下拉列表
var td = $("td:empty");//td为空的

三 jQuery Dom操作

1.1 样式操作

.css(属性名,属性值)

.addClass(类名1 类型2 类名3)与.removeClass(类名1 类型2 类名3) 给某个jquery对象[DOM元素 $("div")]追加样式和移除样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
              $("button").click(function(){
                $("body div:first").addClass("important blue");
              });
            });
        </script>
        <style type="text/css">
            .important
            {
                font-weight:bold;
                font-size:xx-large;
            }
            .blue
            {
                color:blue;
            }
        </style>
    </head>
<body>
    <div id="div1">这是一些文本。</div>
    <div id="div2">这是一些文本。</div>
    <br>
    <button>为第一个 div 元素添加类</button>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
              $("button").click(function(){
                $("h1,h2,p").removeClass("blue");
              });
            });
        </script>
        <style type="text/css">
            .important
            {
                font-weight:bold;
                font-size:xx-large;
            }
            .blue
            {
                color:blue;
            }
        </style>
    </head>
    <body>

        <h1 class="blue">标题 1</h1>
        <h2 class="blue">标题 2</h2>
        <p class="blue">这是一个段落。</p>
        <p class="important">这是另外一个段落。</p>
        <br>
        <button>从元素中移除 class</button>
    </body>
</html>

.toggleClass("menu content"); 相当于addClass()与removeClass的合体，点击第一次是追加，第二次是移除。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
              $("button").click(function(){
                $("h1,h2,p").toggleClass("blue");
              });
            });
        </script>
        <style type="text/css">
            .blue
            {
            color:blue;
            }
        </style>
    </head>
    <body>
        <h1 class="blue">标题 1</h1>
        <h2 class="blue">标题 2</h2>
        <p class="blue">这是一个段落。</p>
        <p>这是另外一个段落。</p>
        <br>
        <button>切换 class</button>
    </body>
</html>

.hasClass()判断某个元素是否拥有指定的样式，可以做为if语句的条件。

this关键字:

示例

$("#menu").mouseover(function() {
    if($(this).hasClass("content")){
        $(this).removeClass("content");
    }
});

扩展：

$("#menu").mouseover(function(){
       $(this).css("border","1px solid #ff0000");
});
//$(this) 触发当前事件的元素对象

1.2 内容操作

html代码操作

.html() 得到值

var html=$("#menu").html();

.text() 得到值

var text=$("#menu").text();

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
              $("#btn1").click(function(){
                $("#test1").text("Hello world!");
              });
              $("#btn2").click(function(){
                $("#test2").html("<b>Hello world!</b>");
              });
              $("#btn3").click(function(){
                $("#test3").val("RUNOOB");
              });
            });
        </script>
    </head>

    <body>
        <p id="test1">这是一个段落。</p>
        <p id="test2">这是另外一个段落。</p>
        <p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
        <button id="btn1">设置文本</button>
        <button id="btn2">设置 HTML</button>
        <button id="btn3">设置值</button>
    </body>
</html>

设置val() 的回调函数

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
              $("#btn1").click(function(){
                $("#test1").text(function(i,origText){
                  return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
                });
              });

              $("#btn2").click(function(){
                $("#test2").html(function(i,origText){
                  return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
                });
              });

            });
        </script>
    </head>

    <body>
        <p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
        <p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
        <button id="btn1">显示 新/旧 文本</button>
        <button id="btn2">显示 新/旧 HTML</button>
    </body>
</html>

1.3 属性操作

attr()

取值

var uname=$("#username").val();
console.log(uname)

设置值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
              $("button").click(function(){
                $("#runoob").attr("href","http://www.runoob.com/jquery");
              });
            });
        </script>
    </head>

    <body>
        <p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
        <button>修改 href 值</button>
        <p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
    </body>
</html>

attr() 的回调函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("#runoob").attr("href", function(i, origValue){
                        return origValue + "/jquery";
                    });
                });
            });
        </script>
    </head>
    <body>
        <p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
        <button>修改 href 值</button>
        <p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>
    </body>
</html>

1.4 节点操作

创建节点

var node=$("<li>家电</li>");

追加节点/插入节点

$("#menu").append(node);       //特征：创建的新节点，插入后总是在已有元素之后
node.appendTo($("#menu"))
$("#menu").prepend(node);      //特征：创建的新节点，插入后总是在已有元素之前
node.appendTo($("#menu"))
$("#menu")append(node,node,node);  //同时添加三个

//同辈元素的节点
$("#menu").after(node);        //把node节点插入到menu节点之后
node.insertAfter($("#menu"))
$("#menu").before(node);       //把node节点插入到menu节点之前
node.insertBefore($("#menu"))

删除节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul class="menu">
			<li>1&nbsp;<span>删除</span></li>
			<li>2&nbsp;<span>删除</span></li>
			<li>3&nbsp;<span>删除</span></li>
			<li>4&nbsp;<span>删除</span></li>
			<li>5&nbsp;<span>删除</span></li>
		</ul>
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(".menu li span").click(function(){
			$(this).parent().remove();
		});
		
	</script>
</html>

过滤删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
              $("button").click(function(){
                $("p").remove(".italic");
              });
            });
        </script>
    </head>
    <body>

        <p>这是一个段落。</p>
        <p class="italic"><i>这是另外一个段落。</i></p>
        <p class="italic"><i>这是另外一个段落。</i></p>
        <button>移除所有  class="italic" 的 p 元素。</button>

    </body>
</html>

清除节点

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

替换节点

$("#menu").replaceWith(节点对象);

1.5 元素属性操作

$("#img").attr("src"); 
$("#img").attr({"src":"img/a.jpg","width":"100px"}) //设置元素属性
$("#img").removeAttr("alt"); //移除元素属性

四节点遍历

2.1 遍历子元素

.children()可以得到子节点的集合

您也可以使用可选参数来过滤对子元素的搜索

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .descendants *
            { 
                display: block;
                border: 2px solid lightgrey;
                color: lightgrey;
                padding: 5px;
                margin: 15px;
            }
        </style>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
              $("div").children("p.1").css({"color":"red","border":"2px solid red"});
            });
        </script>
    </head>
    <body>

        <div class="descendants" style="width:500px;">div (当前元素) 
          <p class="1">p (儿子元素)
            <span>span (孙子元素)</span>     
          </p>
          <p class="2">p (儿子元素)
            <span>span (孙子元素)</span>
          </p> 
        </div>

    </body>
</html>

2.2 遍历同辈元素

.next() 下一个节点

.nextAll() 方法返回被选元素的所有跟随的同胞元素。

.nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

.prev() 上一个节点

.siblings() 同辈所有的节点(不包含本身)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .siblings *
            { 
                display: block;
                border: 2px solid lightgrey;
                color: lightgrey;
                padding: 5px;
                margin: 15px;
            }
        </style>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
                $("h2").siblings().css({"color":"red","border":"2px solid red"});
            });
        </script>
    </head>
    <body class="siblings">

        <div>div (父元素)
          <p>p</p>
          <span>span</span>
          <h2>h2</h2>
          <h3>h3</h3>
          <p>p</p>
        </div>

    </body>
</html>

加参数过滤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .siblings *
            { 
                display: block;
                border: 2px solid lightgrey;
                color: lightgrey;
                padding: 5px;
                margin: 15px;
            }
        </style>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
              $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
            });
        </script>
    </head>
    <body class="siblings">

        <div>div (父元素)
          <p>p</p>
          <span>span</span>
          <h2>h2</h2>
          <h3>h3</h3>
          <p>p</p>
        </div>

    </body>
</html>

2.3 遍历前辈元素

.parent()

.parents();

parentsUntil("div");

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .ancestors *
            { 
                display: block;
                border: 2px solid lightgrey;
                color: lightgrey;
                padding: 5px;
                margin: 15px;
            }
        </style>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
              $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
            });
        </script>
    </head>

    <body class="ancestors"> body (曾曾祖父元素)
      <div style="width:500px;">div (曾祖父元素)
        <ul>ul (祖父元素)  
          <li>li (父元素)
            <span>span</span>
          </li>
        </ul>   
      </div>
    </body>

</html>

2.4 遍历的其他方法

var children = $("ul").children();
$(children).each(function(index, item) {
    console.log($(item).text());
});

find()方法：用于在父节点上，查找子节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .descendants *
            { 
                display: block;
                border: 2px solid lightgrey;
                color: lightgrey;
                padding: 5px;
                margin: 15px;
            }
        </style>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
              $("div").find("span").css({"color":"red","border":"2px solid red"});
            });
        </script>
    </head>
    <body>
        <div class="descendants" style="width:500px;">div (当前元素) 
          <p>p (儿子元素)
            <span>span (孙子元素)</span>     
          </p>
          <p>p (儿子元素)
            <span>span (孙子元素)</span>
          </p> 
        </div>
    </body>
</html>

filter()方法：用于在节点上，过滤含有某种属性的元素

<!DOCTYPE html>
<html>
<head>
  <style>
      div { width:60px; height:60px;
            margin:5px; float:left;
            border:2px white solid; }
  </style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
  <div></div>

  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>
  <div class="middle"></div>

  <div></div>

<script>
  $("div").css("background", "blue").filter(".middle").css("border-color", "red");
</script>

</body>
</html>

五事件

1.基础事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

1.1鼠标事件

鼠标单击事件，双击

$("p").click(function(){
  $(this).hide();
});

$("p").dblclick(function(){
  $(this).hide();
});

鼠标移入、移出

<li onmouseenter="fadeIn()" onmouseleave="fadeOut()">
    <a href="#">111</a>
</li>   <!--事件不会冒泡，不会穿透盒子-->

<li onmouseover="fadeIn()" onmouseout="fadeOut()">
    <a href="#">222</a>
</li>   <!--事件会冒泡-->

$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});

页面加载

$("img").load(function(){
    alert("图片已载入");
});

域的内容被改变

$("img").change(function(){
    alert("域的内容被改变");
});

失去焦点

$("img").blur(function(){
    alert("失去焦点");
});

1.2 键盘事件

keydown() //键按下
keyup()   //键弹起
keypress() //产生可以打印的字符

1.3 表单事件

1.4 window事件

2.绑定事件

//一般是用于给未来元素绑定事件的
$(function(){
    $(".on").bind("click",function(){
       alert(1)
    })
});

3.复合事件

hover是 mouseover与mouserout的组合

4.jQuery动画

4.1 显示与隐藏

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

语法

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

元素的显示

show(1000) 元素的显示

元素的隐藏

hide(1000) 元素的隐藏

$("button").click(function(){
  $("p").hide(1000);
});

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

//第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。

第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。

toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$("button").click(function(){
  $("p").toggle();
});

语法:

$(*selector*).toggle(*speed,callback*);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

4.2 元素的透明度

淡入

fadeIn() 淡入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.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>点击淡入 div 元素。</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>

淡出

fadeOut() 淡出

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

透明度

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
              $("button").click(function(){
                $("#div1").fadeTo("slow",0.15);
                $("#div2").fadeTo("slow",0.4);
                $("#div3").fadeTo("slow",0.7);
              });
            });
        </script>
        </head>

    <body>
        <p>演示 fadeTo() 使用不同参数</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>
</html>

4.3 元素的滑动

下滑

slideDown() 方法用于向下滑动元素。

语法:

$(*selector*).slideDown(*speed,callback*);

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

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

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script> 
        $(document).ready(function(){
          $("#flip").click(function(){
            $("#panel").slideDown("slow");
          });
        });
    </script>

    <style type="text/css"> 
        #panel,#flip
        {
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #panel
        {
            padding:50px;
            display:none;
        }
    </style>
    </head>
    
    <body>

        <div id="flip">点我滑下面板</div>
        <div id="panel">Hello world!</div>

    </body>
</html>

上滑

slideUp()

jQuery slideUp() 方法用于向上滑动元素。

语法:

$(*selector*).slideUp(*speed,callback*);

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

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

下面的例子演示了 slideUp() 方法：

$("#flip").click(function(){
  $("#panel").slideUp();
});

slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(*selector*).slideToggle(*speed,callback*);

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

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

下面的例子演示了 slideToggle() 方法：

$("#flip").click(function(){
  $("#panel").slideToggle();
});

4.4 计算元素的位置

jQuery Dimensions

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

4.5 计算网页宽度高度

```
// 部分jQuery函数  
```

$(window).height() 　              //浏览器时下窗口可视区域高度

$(document).height()　           //浏览器时下窗口文档的高度

$(document.body).height()　　　　　　//浏览器时下窗口文档body的高度

$(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度 包括border padding margin

$(window).width() 　   //浏览器时下窗口可视区域宽度

$(document).width()   //浏览器时下窗口文档对于象宽度

$(document.body).width()　　　　　　//浏览器时下窗口文档body的高度

$(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度 包括border padding

posted @ 2023-05-22 21:02 YxinHaaa 阅读(9) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

YXH自习室

JQuery

一 jQuery简介

1.1 jquery是什么？

1.2 优势

1.3 文档就绪事件

1.4 $含义

二 选择器

2.0 对象的转化

2.1 基础选择器

2.2 层次选择器

2.3 属性选择器

2.4 过滤选择器

2.5 子元素选择器

2.6 表单选择器

2.7 表单属性选择器

三 jQuery Dom操作

1.1 样式操作

1.2 内容操作

1.3 属性操作

1.4 节点操作

1.5 元素属性操作

四 节点遍历

2.1 遍历子元素

2.2 遍历同辈元素

2.3 遍历前辈元素

2.4 遍历的其他方法

五 事件

1.基础事件

1.1鼠标事件

1.2 键盘事件

1.3 表单事件

1.4 window事件

2.绑定事件

3.复合事件

4.jQuery动画

4.1 显示与隐藏

元素的显示

元素的隐藏

toggle()

4.2 元素的透明度

淡入

淡出

fadeToggle() 方法

透明度

4.3 元素的滑动

下滑

上滑

slideToggle() 方法

4.4 计算元素的位置

4.5 计算网页宽度高度

公告

二选择器

四节点遍历

五事件