jQuery - 练习

文章参考: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);

获取

  1. text() - 设置或返回所选元素的文本内容
  2. html() - 设置或返回所选元素的内容(包括 HTML 标记)
  3. val() - 设置或返回表单字段的值
  4. 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>

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

添加

  1. append() 方法在被选元素的结尾插入内容
  2. prepend() 方法在被选元素的开头插入内容
  3. after() 方法在被选元素之后插入内容
  4. 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 之后插入新元素
}

删除

  1. remove() - 删除被选元素(及其子元素)
  2. 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

  1. addClass() - 向被选元素添加一个或多个类
  2. removeClass() - 从被选元素删除一个或多个类
  3. toggleClass() - 对被选元素进行添加/删除类的切换操作
  4. 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>

尺寸

  1. width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)
  2. height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)
  3. innerWidth() 方法返回元素的宽度(包括内边距)
  4. innerHeight() 方法返回元素的高度(包括内边距)
  5. outerWidth() 方法返回元素的宽度(包括内边距和边框)
  6. outerHeight() 方法返回元素的高度(包括内边距和边框)
  7. outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)
  8. 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值