JavaEE学习之Jquery基础

最新推荐文章于 2022-12-18 20:58:09 发布

Ace_bb

最新推荐文章于 2022-12-18 20:58:09 发布

阅读量342

点赞数

分类专栏： jQuery 文章标签： javascript java jquery

本文链接：https://blog.csdn.net/Ace_bb/article/details/113595371

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery 基础：

1. 概念：一个JavaScript框架。简化JS开发

    jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨	是“write 
Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优	化HTML文档
操作、事件处理、动画设计和Ajax交互。
    JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

2. 快速入门

	1. 步骤：
		1. 下载JQuery
			* 目前jQuery有三个大版本：
				1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
					 功能不再新增。因此一般项目来说，使用1.x版本就可以了，
					 最终版本：1.12.4 (2016年5月20日)
				2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
					 功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
					 最终版本：2.2.4 (2016年5月20日)
				3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
					 一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
					 目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
			* jquery-xxx.js 与 jquery-xxx.min.js区别：
				1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
				2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

		2. 导入JQuery的js文件：导入min.js文件
		3. 使用
			var div1 = $("#div1");
			alert(div1.html());

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <!-- 导入jquery文件-->
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
<script>
   //使用JQuery获取元素对象
    var div1 = $("#div1");
   alert(div1.html());
    var div2 = $("#div2");
   alert(div2.html());
</script>
</body>
</html>

3. JQuery对象和JS对象区别与转换

	1. JQuery对象在操作时，更加方便。
    2. JQuery对象和js对象方法不通用的.
    3. 两者相互转换
        * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
        * js -- > jq : $(js对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuer对象和js对象的转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
<script>
  //1. 通过js方式来获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs.length);//可以将其当做数组来使用
    //对divs中所有的div 让其标签体内容变为"aaa"
  for (var i = 0; i < divs.length; i++) {
      //divs[i].innerHTML = "aaa";
      $(divs[i]).html("ccc");
  }

    //2. 通过jq方式来获取名称叫div的所有html元素对象
    var $divs = $("div");

  alert($divs.length);//也可以当做数组使用

  //对divs中所有的div 让其标签体内容变为"bbb"  使用jq方式
    //$divs.html("bbb");
   // $divs.innerHTML = "bbb";

  $divs[0].innerHTML = "ddd";
  $divs.get(1).innerHTML = "eee";


    /*
        1. JQuery对象在操作时，更加方便。
        2. JQuery对象和js对象方法不通用的.
        3. 两者相互转换
            * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
            * js -- > jq : $(js对象)
     */

</script>

</body>
</html>