jQuery - 练习

最新推荐文章于 2024-05-15 15:59:19 发布

喜闻樂见

最新推荐文章于 2024-05-15 15:59:19 发布

阅读量156

点赞数

分类专栏： jQuery 文章标签： jQuery

Zero

本文链接：https://blog.csdn.net/weixin_43707799/article/details/123913114

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章参考：W3school

首先引入 jquery

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

效果

隐藏 hide()
	隐藏部分parents("").hide()
显示 show()
隐藏/显示 toggle()
eg.
1)$(this).hide();
2)$(this).hide("slow"); //slow、fast、1000、2000...



淡入 fadeIn()
淡出 fadeOut()
淡入到 fadeTo()
淡入/淡出 fadeToggle()
eg.
1)$(this).fadeIn();
2)$(this).fadeIn("slow");//slow、fast、1000、2000...
3)$(this).fadeTo("slow",0.15) //渐变为给定的不透明度（值介于 0 与 1 之间）



下滑 slideDown()
上滑 slideUp()
上/下滑 slideToggle()



前提：元素的 position属性为：relative/fixed /absolute
自定义动画 animate
eg.
1)效果：向右移动100px
$("button").animate({left:'100px'});
<button style="postion:absolute">按钮</button>
2)效果：向右移动，渐放大透明
$("button").animate({
	left:'100px',
	opacity:'0.5', 
	height:'150px',
	width:'150px'
});
//height属性 
使用相对值：height:'+=150px'
使用预定义值：height:'toggle' //show/hide/toggle
3)使用队列（按顺序执行）
$("button").click(function(){
	var button = $("button");
	button.animate({height:'300px',opacity:'0.4'},"slow");
	button.animate({width:'300px',opacity:'0.8',slow});
	button.animate({height:'100px',opacity:'0.4'},"slow");
	button.animate({height:'100px',opacity:'0.8'},"slow");
});


停止动画 stop()
清除动画队列 stopAll()

Callback函数

$("button").click(function(){
	$("button").hide(1000,function(){
		alert("按钮已经隐藏了");
	});
});

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

方法连接（Chaining）

//"button" 元素首先会变为红色，然后向上滑动，然后向下滑动
$("button").css("color","red")
	.slideUp(2000)
	.slideDown(2000);

获取

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() - 获取属性值

alert("获取到文本内容为：" + $("#test").text()); //你好,世界
alert("获取到文本html内容为：" + $("#test").html()); //你好,<b>世界</b>

<p id="test">你好,<b>世界</b></p>

----------------------------------------------

alert("获取到值为：" + $("#test").val()); //你好

<input type="text" id="test" value="你好">

-----------------------------------------------

alert($("#test").attr("href")); //www.baidu.com

<p><a href="www.baidu.com" id="test">百度</a></p>

设置

$("#test1").text("你好1");
$("#test1").html("<b>你好2</b>");
$("#test2").val("你好3")

<p id="test1">test1</p>
<p><input id="test2" type="text" value="你好"></p>

------------------------------------------
改变链接中的 href的值
$("#test").attr("href","www.w3chool.com.cn");

<a id="test" href="www.baidu.com">百度</a>

-------------------------------------------
回调函数待写

添加

append() 方法在被选元素的结尾插入内容
prepend() 方法在被选元素的开头插入内容
after() 方法在被选元素之后插入内容
before() 方法在被选元素之前插内容

$("p").append("<b>添加内容</b>");
$("ol").append("<li>添加的列表</li>")

<p>这是一个段落</p>
<ol>
	<li>列表1</li>
	<li>列表2</li>
</ol>

------------------------------------------
//通过参数接收无限数量的新元素
function appendText(){
	var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
	var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
	var txt3=document.createElement("p");  // 以 DOM 创建新元素
	txt3.innerHTML="Text.";
	$("p").append(txt1,txt2,txt3);         // 追加新元素
}

-----------------------------------------------
function afterText(){
	var txt1="<b>I </b>";                    // 以 HTML 创建新元素
	var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
	var txt3=document.createElement("big");  // 通过 DOM 创建新元素
	txt3.innerHTML="jQuery!";
	$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}

删除

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

$("#test").remove();

<p id="test">这是一段句子</p>

---------------------------------------------

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

<div id="test">
	<p>这是一段句子1</p>
	<p>这是一段句子2</p>
</div>

-----------------------------------------------
//删除 test里面的 p元素
$("#test").remove("p");

<div id="test">
	<p>这是一段句子1</p>
	<p>这是一段句子2</p>
</div>

操作css

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

head
	<script type="text/javascript">
      $(document).ready(function (){
        //添加类
        select("#btn1",1)
        //删除类
        select("#btn2",2)
        //切换类
        select("#btn3",3)
        //返回css属性
        select("#btn4",4)
        //设置css属性
        select("#btn5",5)
      });

      //选择
      function select(btnId,id){
        $(btnId).click(function (){
          switch (id){
            case 1:
              $("h1,h2,p").addClass("blue");
              $("div").addClass("important");
              break;
            case 2:
              $("h1,h2,p").removeClass("blue");
              $("div").removeClass("important");
              break;
            case 3:
              $("h1,h2,p").toggleClass("blue");
              $("div").toggleClass("important");
              break;
            case 4: //获取 p元素的背景颜色属性
              alert("返回颜色是：" + $("p").css("background-color"));
              break
            case 5:
              $("p").css("background-color","yellow")
              break;
            default:
              break;
          }
        });
      }
    </script>

    <style>
      .important{
        font-weight: bold;
        font-size: xx-large;
      }
      .blue{
        color:blue;
      }
    </style>

-------------------------------------
body
	<button id="btn1">添加类</button>
    <button id="btn2">删除类</button>
    <button id="btn3">切换类</button>
    <button id="btn4">返回css属性</button>
    <button id="btn5">设置css属性</button>

    <h1>标题</h1>
    <h2>标题2</h2>
    <p style="background-color:red">一段文本</p>
    <div>重要文本</div>

尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth() 方法返回元素的宽度（包括内边距）
innerHeight() 方法返回元素的高度（包括内边距）
outerWidth() 方法返回元素的宽度（包括内边距和边框）
outerHeight() 方法返回元素的高度（包括内边距和边框）
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）

head
	<style>
      #test{
        height: 600px;
        width: 400px;
        padding: 10px;
        margin: 5px;
        border: 1px solid blue;
        background-color: lightblue;
      }
    </style>
------------------------------------------
body
	<button id="btn">改变宽高</button>
    <div id="test"></div>

    <script type="text/javascript">
      function show(){
        let txt = "";
        txt += "width: " + $("#test").width() + "<br/>";
        txt += "height: " + $("#test").height() + "<br/>";
        txt += "innerWidth: " + $("#test").innerWidth() + "<br/>";
        txt += "innerHeight: " + $("#test").innerHeight() + "<br/>";
        txt += "outerWidth: " + $("#test").outerWidth() + "<br/>";
        txt += "outerHeight: " + $("#test").outerHeight() + "<br/>";
        txt += "windowWidth: " + $(window).width() + "<br/>";
        txt += "windowHeight: " + $(window).height() + "<br/>";
        $("#test").html(txt);
      }

      //显示尺寸
      show()

      //改变 div宽高
      $("#btn").click(function (){
        $("#test").width(700).height(700);
        show()
      });
    </script>