jQuery

在刚开始学习时候先介绍,执行jQuery必须要

$(function (){
 
   // 你的jQuery代码
 
});

刚开始学习的一大难点
详细: https://www.runoob.com/jsref/dom-obj-document.html

注意添加jQuery的文件

记得扩展名改成:js
放到和测试文件一样的地方,否则我的案例代码无法起作用的
也可以去官网自行下载最新的“ http://jquery.com/download/

选取HTML 元素

基本格式
$(“”)
和定义“ID,标签,class”一样的格式填入 $(“”)

选取ID:C  $("#C")
选取标签:P $("P")
选取CSS类:index $(".index")

事件

鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleavehoverblurunload

转自: https://www.runoob.com/jquery/jquery-events.html

//如<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  	<script src="/jquery-3.4.0.min.js"></script>
    <title>Document</title>
</head>
<body>
<script type="text/javascript">
//加载完后定义一个方法
$(function() {    
    //当按下id为“b”的按下后触发方法
    $("#b").click(function(){
      //修改“p”方法的背景红色
      $("p").css("background-color","red");
    })
  }) 
</script>
<h2>这是个H2标签</h2>
<p>第一个P标签</p>
<p>第二个P标签</p>
<button id = "b" type="button">ID=b</button>
</body>
</html>

效果

显示及隐藏

基本

$("p").hide();  //隐藏
$("p").show();  //显示
$("p").toggle();  //显示和隐藏中相互切换

显示及隐藏中添加过渡时间

$("p").hide(1000);  //隐藏
$("p").show(1000);  //显示
$("p").toggle(1000);  //显示和隐藏中相互切换

添加过渡效果只需要添加参数就可以了

向下显示及向上隐藏

$(“#panel”).slideToggle();

$("p").slideUp();  //向上隐藏
$("p").slideDown();  //向下显示
$("p").slideToggle();  //显示和隐藏中相互切换

添加过渡时间一样只需要在()填入过渡时间

动画

动画其实无需深入只需要如何 编写加上CSS代码就可以简单实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  	<script src="/jquery-3.4.0.min.js"></script>
    <title>Document</title>
</head>
<body>
<script type="text/javascript">
//加载完后定义一个方法
$(function() {    
  $("div").click(function(){
      $("div").animate({
        height:'150px',
        width:'150px'
      })
      $("div").animate({
        height:'300px',
        width:'300px'
      })
    })
  }) 
</script>
<div style = "height:300px;width:300px;background:#000;"></div>
</body>
</html>

编写一个动画时候一定要注意格式
animate({要变化的CSS代码})
当然可以定义多个动画
当定义为多个不同的元素的话是可以同时进行的,如果相同元素的话就会执行完上一个再执行下一个

可以复制以下代码进行分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  	<script src="/jquery-3.4.0.min.js"></script>
    <title>Document</title>
</head>
<body>
<script type="text/javascript">
//加载完后定义一个方法
$(function() {    
  $("div").click(function(){
      $("div").animate({
        height:'150px',
        width:'150px'
      })
      $("h1").animate({
        height:'150px',
        width:'150px'
      })
      $("div").animate({
        height:'300px',
        width:'300px'
      })
      $("h1").animate({
        height:'300px',
        width:'300px'
      })
    })
  }) 
</script>
<div style = "height:300px;width:300px;background:#000;"></div>

<h1 style = "height:300px;width:300px;background:#000;"></h1>

</body>
</html>

stop() 可以停止动画播放

 $("div").stop();

同一元素执行多条命令

$("div").css("background","red").css("height","900");

只要后面没加“;”就不会结束

内容和属性

获取内容

$("div").text();

测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  	<script src="/jquery-3.4.0.min.js"></script>
    <title>Document</title>
</head>
<body>
<script type="text/javascript">
//加载完后定义一个方法
$(function() {    
  $("div").click(function(){
	alert($("div").text());
    })
  }) 
</script>
<div style = "height:300px;width:300px;background:#000;">获取的内容</div>
</body>
</html>

除了获取“div”也可以获取其他元素的内容

获取属性

$("div").attr("style");

测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  	<script src="/jquery-3.4.0.min.js"></script>
    <title>Document</title>
</head>
<body>
<script type="text/javascript">
//加载完后定义一个方法
$(function() {    
  $("div").click(function(){
		alert($("div").attr("style"));
    })
  }) 
</script>
<div style = "height:300px;width:300px;background:#000;">获取的内容</div>
</body>
</html>

获取 input (输入框)

$(“input”).val();

测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  	<script src="/jquery-3.4.0.min.js"></script>
    <title>Document</title>
</head>
<body>
<script type="text/javascript">
//加载完后定义一个方法
$(function() {    
  $("div").click(function(){
    alert($("input").val());
    })
  }) 
</script>
<div style = "height:300px;width:300px;background:#000;"></div>

<p>输入框: <input type="password" value="微渺WeiMiao博客"></p>
</body>
</html>

改变内容

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

$("div").text("你好,世界");

html() – 设置或返回所选元素的内容(包括 HTML 标签)

$("div").html("<h1>你好,世界</h1>");

val() – 设置或返回表单字段的值

$(“input”).val(“博主最帅”);

测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  	<script src="/jquery-3.4.0.min.js"></script>
    <title>Document</title>
</head>
<body>
<script type="text/javascript">
//加载完后定义一个方法
$(function() {    
  $("div").click(function(){
    $("#id0").text("博主最帅<h1>撒打算</h1>");
    $("#id1").html("<h1>这和“text”的区别在于“html”会应用字符串里的标签,text只会完整的输出</h1>");
    $("input").val("博主最帅");
    })
  }) 
</script>
  <div id = "id0">哈哈哈哈哈哈哈哈哈<h1>阿松大</h1></div>
  <div id ="id1"><li>啊实打实大苏打</li></div>
<p>输入框: <input type="text" value="微渺WeiMiao博客"></p>
</body>
</html>

添加元素 AND 删除元素

添加元素

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

$("p").append("追加文本");

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

$("p").prepend("追加文本");

注意:这个是在标签里面添加


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

$("p").after("追加文本");

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

$("p").before("追加文本");

注意:这个是在标签外添加

删除元素

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

$("#d").remove();
执行remove后

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

执行 empty 后

注意看图文字

CSS

addClass() – 向被选元素添加一个或多个类

$("#d").addClass();

removeClass() – 从被选元素删除一个或多个类

$("#d").removeClass();

toggleClass() – 对被选元素进行添加/删除类的切换操作

$("#d").toggleClass();

添加和删除类

这些是操作在上面三种写法

css() – 设置或返回样式属性

$("#d").css("color");//返回样式("")里填写需要获取的属性
$("#d").css("color","blue");//设置单条样式使用("","")的格式
$("#d").css({"color":"blue","background-color":"#b0c4de"});//设置多条样式使用("":"","":"")的格式(推荐)

css()是在该标签中添加“style”

尺寸

详细: https://www.runoob.com/jquery/jquery-dimensions.html

边框:border:1px solid blue;
内边距: padding :20px

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

$(".z").width();

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

 $(".z"). height (); 

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

 $(".z"). innerWidth(); 

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

 $(".z"). innerHeight(); 

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

 $(".z"). outerWidth(); 

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

 $(".z"). outerHeight(); 

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  	<script src="/jquery-3.4.0.min.js"></script>
    <title>Document</title>
  	<style type="text/css">
      .x
      {
      	background-color:#6495ed;
        width:500px;
        height:500px;
      }
      .z
      {
      	background-color: #2645ed;
        padding:20px;
        width:200px;
        height:200px;
        border:30px solid #6586;
      }
    </style>
</head>
<body>
<script type="text/javascript">
//加载完后定义一个方法
$(function() {    
  $("div").click(function(){
      var width = $(".z").width();
      var innerWidth = $(".z").innerWidth();
      var outerWidth = $(".z").outerWidth();
      $("#d").append(width+"|"+innerWidth+"|"+outerWidth);
    })
  }) 
</script>
  <div id = "d" class = "x">
    <div class = "z">
    
    </div>
  </div>
</body>
</html>

-发现错误或者有什么建议请留言告知

1 评论
留言