您的位置：首页 > Web前端 > JQuery

总结jQuery学习笔记-带你由浅入深学习jQuery（1）

2018-03-16 08:48 459 查看

JavaScript中的数据类型回顾一下：

    javascript的数据类型：
        number             数值型
        String                字符串类型
        boolean             真假值
        function           函数
        object                对象

        null                     空值
        NAN                   非数值
        undefined         未定义
        javascript中的注释：
        单行注释                   //
        多行注释                   /**/

JavaScript函数的定义：
    第一种函数的定义方式
        使用function关键字定义。
        function 函数名(参数列表) {
        函数体
        }
    第二种函数的定义方式：
        var   函数名 = function(参数列表){
        }
JavaScript中自定义对象：
Object形式的自定义对象
    var 变量名 = new Object();
    变量名.属性名 = 值;
    变量名.方法名 = function(){}
<
d4f1
p>对象的访问：    变量名.属性名/方法名();
    花括号形式的自定义对象
    var 变量名 = {
    属性名 : 值,
方法： function(){}
};

对象的访问：
变量名.属性名/方法名()；

JavaScript中常用事件。
    onload事件              页面加载完成之后
    onclick事件              单击事件
    onblur事件               失去焦点
    onchange事件         内容发生改变，常用于下拉列表，和文本输入框
    onsubmit事件         表单提交事件。

    静态注册事件：静态注册指的是直接使用标签的事件属性。在事件属性中赋于事件响应的代码。这种方式我们称之为静态注册。
     动态注册事件：先获取标签对象，然后通过标签对象.事件名=function(){} 这种形式我们称之为动态注册。
    window.onload = function(){
    1、先获取标签对象
    2、通过标签对象.事件名=function(){}
    }

DOM 全称是Document Object Model 文档对象模型
Document对象的常用方法：
document.getElementById() 通过id属性查找标签对象。
document.getElementsByTagName()     通过标签名查找标签对象集合。这个集合的操作跟数组一样。集合中的元素顺序，是这些标签在html页面中，从上到下的顺序。
document.getElementsByName()通过name属性查找标签对象集合。这个集合的操作跟数组一样。集合中的元素顺序，是这些标签在html页面中，从上到下的顺序。
节点对象的常用属性和方法：
属性：
    childNodes：        返回当前节点的全部孩子节点
    firstChild：                返回第一个子节点
    lastChild：                返回最后一个子节点
    parentNode：          返回父节点
    previousSibling：     返回上一个兄弟节点
    nextSibling：            返回下一个兄弟节点
方法：
    appendChild              添加子节点
-------------------------------------------------------------------------------------------------上述为对JavaScript的一个回顾
下面为jQuery的引入------------------------------------------------------------------------------------------------------------

JQuery介绍

什么是JQuery ?jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。
JQuery核心思想！！！它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。JQuery流行程度 jQuery现在已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。JQuery好处！！！jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

JQuery 的初体验！！！

需求：使用JQuery给一个按钮绑定单击事件?<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// window.onload = function(){
// //1.获取标签对象
// var btnObj = document.getElementById("btnId");
// //2.通过标签对象.事件名=function(){}
// btnObj.onclick = function(){
// alert("这是原生的js的单击事件");
// }
// }

//1.先引入jquery的类库
// alert($);
//2.页面加载完成之后
$(function(){
//3.先获取标签对象
var $btnObj = $("#btnId"); // 相当于document.getElementById("btnId");
//4.绑定事件
$btnObj.click( function(){
alert("这是jquery的单击事件");
} );
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>

常见问题？
1、使用jquery一定要引入jquery库吗？                      答案：              是

2、jquery中的$到底是什么？答案：              是一个函数

3、怎么为按钮添加点击响应函数的？答案：
                                                                                                    $(function(){ ///先页面加载完成之后。
                                                                                                            1、获取标签对象
                                                                                                          2、通过标签对象.click( function(){} );
                                                                                                            });

Jquery 核心函数 $()

$ 是jquery的核心函数，能完成jquery的很多功能。$()就是调用$这个函数
1、传入参数为 [ 函数] 时：
    $(function(){})
    功能相当于
    window.onload = function(){}
2、传入参数为 [ HTML 字符串 ] 时：
    $("<span>12</span>");创建标签对象相当于
        var span = document.createElement(“span”);
        span.innerHTML = “12”;
3、传入参数为 [ 选择器字符串 ] 时：$(“#id”)
$(“#id属性值”);        相当于document.getElementById();
        $(“标签名”);                     相当于document.getElementsByTagName();
        $(“.class”);                  通过class属性来查

4、传入参数为 [DOM对象 ] 时：
        $(dom对象)
        var btnObj = document.getElementById(“btn01”);
        var $btnObj = $( btnObj );

JQuery对象和dom对象区分

什么是jquery对象，什么是dom对象

           Dom对象
            1.通过getElementById()查询出来的标签对象是Dom对象
            2.通过getElementsByName()查询出来的标签对象是Dom对象
            3.通过getElementsByTagName()查询出来的标签对象是Dom对象
            4.通过createElement() 方法创建的对象，是Dom对象
             【object HtmlxxxxElement】

            JQuery对象
            5.通过JQuery提供的API创建的对象，是JQuery对象
            6.通过JQuery包装的Dom对象，也是JQuery对象
            7.通过JQuery提供的API查询到的对象，是JQuery对象
             【object object】

问题：JQuery对象的本质是什么？

JQuery对象本身是一个数组 + 一系列的JQuery函数组成。
其中，这个数组中每个元素都是dom对象。

Jquery对象和Dom对象使用区别

jquery对象，在使用上，不能使用dom对象的属性和方法。
dom对象也不能使用jquery对象的属性和方法。

Dom对象和Jquery对象互转

          1、dom对象转化为jquery对象（*重点）
            vardivObj = doucment.createElement(“div”);
            转成jquery对象
            var $divObj = $( divObj );
2、jquery对象转为dom对象（*重点）
                            var$jqueryObj = $(“标签名”);
var dom对象 = $jqueryObj[下标];

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航