jQuery学习笔记 - 1 页面框架下载完毕后执行逻辑 文本框 单选框 复选框

原创
2018/02/13 18:05
阅读数 124

这几天准备恶补一下jQuery的基础,翻了几本书,自己动手写了一些代码。

我使用的jQuery版本为jquery-3.3.1.js,下载地址:https://code.jquery.com/jquery-3.3.1.js

我使用的Chrome版本为 Version 63.0.3239.132 (Official Build) (64-bit)

1、页面框架下载完毕后执行逻辑

<html>
  <head>
    <title>jQuery学习</title>
	<!--页面框架下载完毕后执行逻辑-->
  </head>
  <body>
    <script src="jquery-3.3.1.js"></script>
    <script>
      //功能类似window.onload=function(){...}
      $(document).ready(function(){
	    alert("hello world!");
	  })
    </script>
  </body>
</html>

效果图如下:

$(document).ready和window.onload功能相似,但也有区别,主要包括:(1)执行时间不同,$(document).ready在页面框架下载完毕后就执行,window.onload必须在页面全部加载完毕(包括图片下载)后才执行;(2)执行数量不同,$(document).ready可以重复写多个,并且每次执行结果不同,window.onload尽管可以执行多个,但仅输出一个执行结果。

2、功能同1

<html>
  <head>
    <title>jQuery学习</title>
	<!--页面框架下载完毕后执行逻辑-->
  </head>
  <body>
    <script src="jquery-3.3.1.js"></script>
    <script>
      //功能等价于$(document).ready(function(){...}
      $(function(){
	    alert("hello world!");
	  })
    </script>
  </body>
</html>

效果图如下:

3、使用jQuery获取、变更文本输入框中的文字和样式

<html>
  <head>
    <title>jQuery学习</title>
    <!--操作文本框-->
  </head>
  <body>
    <input type='text' id='txt'></input>
    <button type="button" id='btn1'>赋值</button>
    <button type="button" id='btn2'>取值</button>
    <button type="button" id='btn3'>变更字体颜色</button>
    <button type="button" id='btn4'>获取字体颜色</button>
    <script src="jquery-3.3.1.js"></script>
    <script>
      
      //按钮1:向文本框赋值
      $('#btn1').click(function(){
        $('#txt').val("Tsybius2014");
      })
      
      //按钮2:获取文本框中的值
      $('#btn2').click(function(){
        alert($('#txt').val());
      })
      
      //按钮3:变更文本框的字体颜色
      $('#btn3').click(function(){
        var rand = Math.floor(Math.random()*5);
        console.log(rand);
        if (rand==0) {
          $('#txt').css("color", "red");
        } else if (rand==1) {
          $('#txt').css("color", "green");
        } else if (rand==2) {
          $('#txt').css("color", "blue");
        } else if (rand==3) {
          $('#txt').css("color", "purple");
        } else if (rand==4) {
          $('#txt').css("color", "orange");
        }
      })
      
      //按钮4:获取文本框的字体颜色
      $('#btn4').click(function(){
        var color = $('#txt').css("color");
        alert(color);
      })
      
    </script>
  </body>
</html>

效果图如下:

4、使用jQuery变更单选框、复选框的勾选情况

<html>
  <head>
    <title>jQuery学习</title>
	<!--操作单选框和复选框-->
  </head>
  <body>
    <div id='divChkOper'>
	  <input type="checkbox" id='chk1'>1</input>
	  <input type="checkbox" id='chk2'>2</input>
	  <input type="checkbox" id='chk3'>3</input>
	  <button type="button" id='btnSelectAll'>全选</button>
	  <button type="button" id='btnClearChk'>清空</button>
	  <button type="button" id='btnGetChk1'>获取第一个复选框的选中状态</button>
	</div>
    <div id='divRadOper'>
	  <input type="radio" id='rad1' value="0" name="xxx">1</input> <!--name一样可实现互斥-->
	  <input type="radio" id='rad2' value="1" name="xxx">2</input>
	  <input type="radio" id='rad3' value="2" name="xxx">3</input>
	  <button type="button" id='btnSelectRad1'>选中第一个单选框</button>
	  <button type="button" id='btnClearRad'>清空</button>
	  <button type="button" id='btnGetRad1'>获取第一个单选框的选中状态</button>
	</div>
    <script src="jquery-3.3.1.js"></script>
    <script>
	
      //按钮:全选复选框 prop和attr有区别
	  $('#btnSelectAll').click(function(){
	    $('#chk1').prop("checked",true);
	    $('#chk2').prop("checked",true);
	    $('#chk3').prop("checked",true);
	  })
	  
      //按钮:清空复选框
	  $('#btnClearChk').click(function(){
	    $('#chk1').prop("checked",false);
	    $('#chk2').prop("checked",false);
	    $('#chk3').prop("checked",false);
	  })
	  
      //按钮:获取第一个复选框的选中状态
	  $('#btnGetChk1').click(function(){
	    var chkValue = $('#chk1').is(":checked");
		if (chkValue==true){
		  alert("已选中");
		} else {
		  alert("未选中");
		}
	  })
	  
      //按钮:选中第一个单选框
	  $('#btnSelectRad1').click(function(){
	    $('#rad1').prop("checked",true);
	  })
	  
      //按钮:清空单选框
	  $('#btnClearRad').click(function(){
	    $('#rad1').prop("checked",false);
	    $('#rad2').prop("checked",false);
	    $('#rad3').prop("checked",false);
	  })
	  
      //按钮:获取第一个单选框的选中状态
	  $('#btnGetRad1').click(function(){
	    var radValue = $('#rad1').is(":checked");
		if (radValue==true){
		  alert("已选中");
		} else {
		  alert("未选中");
		}
	  })
	  
    </script>
  </body>
</html>

效果图如下:

互斥的单选框name应保持一致。修改属性时,应注意prop和attr的区别,在这里我使用了prop修改选中情况。

END

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部