JQuery入门

最新推荐文章于 2024-07-04 10:38:01 发布

DavinDeng

最新推荐文章于 2024-07-04 10:38:01 发布

阅读量169

点赞数

分类专栏：前端文章标签： jquery

原文链接：https://www.jianshu.com/p/1f8df907f053

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JQuery

概念

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

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

JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

//根据id获取元素
function get(id){
    var obj = document.getElementById(id);
    return obj;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/common.js"></script>
</head>
<body>

<div id="div1">div1</div>
<div id="div2">div2</div>

</body>
<script>
    // var div1 = document.getElementById("div1");
    // var div2 = document.getElementById("div2");

    var div1 = get("div1");
    var div2 = get("div2");

    alert(div1);
    alert(div2);
</script>
</html>

快速入门

步骤：

下载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：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快
导入JQuery的js文件：导入min.js文件
使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">this is div1</div>
<div id="div2">this is div2</div>
</body>
<script>
    //获取页面上的元素
    var div1 = $("#div1");
    alert(div1.html());

</script>
</html>

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

JQuery对象在操作时，更加方便。
JQuery对象和js对象方法不通用的.
两者相互转换

jq – > js : jq对象[索引] 或者 jq对象.get(索引)
js – > jq : $(js对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">this is div1</div>
<div id="div2">this is div2</div>
</body>
<script>
    //获取页面上的元素
    // var div1 = $("#div1");
    // alert(div1.html());

    //js和jq对象的相互转换
    var divArr = document.getElementsByTagName("div");
    //alert(divArr);//可以当成数组来使用
    for (var i = 0; i < divArr.length; i++) {
        // divArr[i].innerHTML="aaa";
        //js对象转换为jq对象
        //$(divArr[i]).html("aaa");
    }

    var divArr2 = $("div");
    //alert(divArr2);//也可以当成数组来使用
    //divArr2.html("ccc");
	//divArr2.innerHTML="bbb";js和jq对象的方法属性不通用
    for (var i = 0; i < divArr2.length; i++) {
        //jq转换为js对象
        divArr2.get(i).innerHTML="ddd";
    }

    var $div1 = $("#div1");
    $div1[0].innerHTML="eee";





</script>
</html>

##选择器：筛选具有相似特征的元素(标签)

基本操作学习：

事件绑定
//1.获取b1按钮
$("#b1").click(function(){
alert(“abc”);
});
入口函数
$(function () {

});
window.onload 和 $(function) 区别

window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
$(function)可以定义多次的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>

        window.onload=function () {
            $("#btn1").click(function () {
                alert("132");
            });
        }
        //定义多次，后面的会覆盖前面的
        window.onload=function () {
            $("#btn1").click(function () {
                alert("abc");
            });
        }

        
        
       $(function () {//dom文档加载完成之后，执行其中的代码
           $("#btn1").click(function () {
               alert("456");
           });
       });

        //可以定义多次
        $(function () {
            $("#btn1").click(function () {
                alert("456");
            });
        });
    </script>
</head>
<body>
    <button id="btn1">按钮</button>
</body>


</html>

DOM操作

1. 内容操作

html(): 获取/设置元素的标签体内容内容 --> 内容
text(): 获取/设置元素的标签体纯文本内容内容 --> 内容
val()：获取/设置元素的value属性值

2. 属性操作

1. 通用属性操作

attr(): 获取/设置元素的属性attribute
removeAttr():删除属性
prop():获取/设置元素的属性propertity
removeProp():删除属性

attr和prop区别？

如果操作的是元素的固有属性，则建议使用prop
如果操作的是元素自定义的属性，则建议使用attr

从jQuery1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。
jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。