文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

Web_jQuery

时间：2020-02-01 21:19:40   收藏：0   阅读：68

第1章： jQuery简介

技术分享图片

 

第2章：jQuery快速入门

2.2 HelloWorld

需求：使用jQuery给一个按钮绑定单击事件

<!-- 导入jQuery库-->
<script type="text/javascript" src="script/jquery-1.7.2.js"/>
<script type="text/javascript">
    //调用jQuery库定义的函数
    //使用$()代替window.onload
    $(function(){
        //根据id属性获取按钮对象，并绑定单击响应函数
        $("#btnId").click(function(){
            //弹出HelloWorld
            alert("HelloWorld");
        });
    });
</script>
<button id ="btnID"> ClickMe</button>

常见问题？

3章：jQuery基本语法

3.1 jQuery源码初分析

(function( window, undefined ) {    //16行
    
    var jQuery = (function() {    //22行
    
        var jQuery = function( selector, context ) {
            // The jQuery object is actually just the init constructor ‘enhanced‘
            return new jQuery.fn.init( selector, context, rootjQuery );
        };
        
        jQuery.fn = jQuery.prototype = {    //97行
            constructor: jQuery,
            init: function( selector, context, rootjQuery ) {
                //...
            }    //207行
            
        };    //319行
    
        //...
        return jQuery;    //981行

    })();    //983行
    
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;    //9384行
    
})( window );    //9404行

说明

1，自执行函数

2，给window添加了两个等同的函数：jQuery（）/$()

3,执行$()后，返回的是jQuery库包装的对象，一般称之为：jQuery对象

3.2 jQuery核心函数： $()

3.2.1 传入参数为函数时：$(function(){})

3.2.2 传入参数为选择器字符串时： $(选择器字符串)

3.2.3 传入参数为HTML字符串时：$(HTML字符串)

3.2.4 传入参数为DOM对象时： $(DOM对象)

3.3 jQuery对象和DOM对象区分

3.3.1 什么是Dom对象，什么是jQuery对象

Dom对象：通过原生的js实现的Dom标准查到的元素对象

  1. 通过getElementById()查询出来的标签对象是Dom对象

  2. 通过getElementsByName()查询出来的标签对象是Dom对象

  3. 通过getElementsByTagName()查询出来的标签对象是Dom对象

  4. 通过createElement() 方法创建的对象，是Dom对象

jQuery对象的本质

　　1，jQuery对象本质是一个封装了Dom对象数组加一系列的jQuery的功能函数function的结构

　　2，习惯上给jQuery对象命名时，变量名前加$,便于区分jQuery对象和js Dom对象

测试代码：

<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">

        $(function(){
            var arr = [12,"abc",true];
            var $btnObjs = $("button");
            alert("111");
            for(var i = 0;i < $btnObjs.length;i++){
                alert($btnObjs[i]);
            }
        });


    </script>
</head>
<body>

    <button id="btn">Button</button>
    <button id="btn2">Button</button>
    <button id="btn3">Button</button>

</body>

3.3.3 jQuery对象和DOM对象使用区别

1，jQuery对象和Dom对象的属性不能互用，只能调用各自声明过的属性

2，jQuery对象和Dom对象的函数也不能互用，只能调用各自声明的函数

<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">
        
        $(function(){
           alert(document.getElementById("testDiv").innerHTML);
            //jQuery对象和DOM对象的属性不能互用，如下的调用是错误的。
           alert($("#testDiv").innerHTML);
            
           alert(document.getElementById("testDiv").getElementsByTagName("span")[0]);
            //jQuery对象和DOM对象的函数不能互用，如下的调用是错误的。
           alert($("#testDiv").getElementsByTagName("span")[0]);
        });
    </script>
</head>

<body>
    <div id="testDiv">Atguigu is <span>100%</span> Very Good!</div>
</body>

3.3.4 DOM对象和jQuery对象的互相转换(掌握)

1，Dom对象转换jQuery对象

　　使用jQuery核心函数包装Dom对象：$(Dom对象)

　　例如：var $btnEle =$（btnEle）

2，jQuery对象转换Dom对象

　　使用数组下标：$btnEle[0]

　　使用get（index）方法：$btnEle.get(0)

技术分享图片

为什么需要二者相互转换呢？

1，Dom对象转为jQuery对象：为了调用JQuery提供的丰富的方法

2，jQuery对象转为Dom对象：有些特殊的需求在框架中没有提供，需要使用原生的js实现

第4章 选择器（重点）

4.1 基本选择器 (重点)

 

（1） id选择器 

//HTML代码：
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

//jQuery代码：
$("#myDiv");

//结果：
[ <div id="myDiv">id="myDiv"</div> ]

（2） 标签选择器

//HTML代码：
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

//jQuery代码：
$("div");

//结果：
[ <div>DIV1</div>, <div>DIV2</div> ]

（3） class选择器

//HTML代码：
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

//jQuery代码：
$(".myClass");

//结果：
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

（4） *选择器

//HTML代码：
<div>DIV</div>
<span>SPAN</span>
<p>P</p>

//jQuery代码：
$("*")

//结果：
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

（5） selector1,selector2,…

//HTML代码：
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

//jQuery代码：
$("div,span,p.myClass") 
//p.myClass：表示查找的标签名必须是p标签，并且class属性要是myclass


//结果：结果数据的顺序与要查询的元素先后顺序不一致，与HTML中元素声明的先后顺序一致。
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

4.2 层级选择器 (重点)

如果想通过Dom元素之间的层级关系来获取特定元素，例如后代元素，子元素，兄弟元素，则需要疼过层级选择器（或层次选择器）

1） ancestor descendant

2） parent > child

3） prev + next

4） prev ~ siblings

 

4.3 过滤选择器：基本

1，过滤选择器主要是通过特定的过滤规则来筛选出所需的Dom元素，该选择器都以“：”开头

2，按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单过滤和表单属性过滤选择器

1） :first

2） :last

3） :not(selector)

4） :even

5） :odd

6） :eq(index)

7） :gt(index)

9） :lt(index)

10） ：header 、：animated、：focus省略

4.4 过滤选择器：内容

1） :contains(text)

2） :has(selector)

3） :empty

4） :parent

4.5 过滤选择器：可见性

1） :hidden

2） :visible

4.6 过滤选择器：属性

1） [attribute]

2） [attribute=value]

3） [attribute!=value]

4） [attribute^=value]

5 ） [attribute$=value]

6） [attribute*=value]

7） [selector1] [selector2] [selectorN]

4.7 过滤选择器：子元素

1） :nth-child(index/even/odd/equation)

2） :first-child

3） :last-child

4） : only-child

4.8 过滤选择器：表单

1） :input

2） :text

3） :password

4） :radio

5） :checkbox

6） :submit

7） :image

8） :reset

9） :button

10） :file

11） :hidden

4.9 过滤选择器：表单对象属性

1） :enabled

2） :disabled

3） :checked

4） :selected

第5章 文档处理（CRUD）

5.1 查找节点

1） $(selector)

2） find(selector)

3） eq(index)

4） filter(expr|obj|ele|fn)

5） children([expr])

6） parent([expr])

7） parents([expr])

8） each(callback)

5.2 获取长度

1） 属性：length

2） 函数：size()

5.3 内部插入节点

1） append(content)

2） appendTo(content)

3） prepend(content)

4） prependTo(content)

5.4 外部插入节点

1） after(content)

2） before(content)

3） insertAfter(content)

4） insertBefore(content)

5.5 创建节点

5.6 删除节点

1） empty()

2） remove()

5.7 修改节点

1） replaceAll(selector)

2） replaceWith(content|fn)

第6章 属性、HTML代码、CSS

6.1 属性操作

1） attr(name ,[value])

2） removeAttr(name)

6.2 HTML代码/值

1）html([val])

2）val([value])

3）text()

6.3 CSS

1） addClass(className)

2） removeClass()

3） css(name,[value])

 

第7章 事件

7.1 常用的事件

1） ready(fn)

技术分享图片

说明：如果window.onload声明多个，不会报错，以最后给window.onload赋值的函数执行为准

2） click([fn])

3） blur([fn])

4） change([fn])

7.2 绑定与解绑事件

1） bind(type, fn)

2） unbind(type)

7.3 事件切换

1） hover(over,out)

<head>
<meta charset="UTF-8">
<title>Insert title here</title>

    <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    
        $(function(){
            $("#h1").hover(function(){
                alert("进入");
            },function(){
                alert("出来");
            });
        });
    
    </script>
</head>
<body>

    <h1 id="h1" style="background-color: red">我是标题</h1>

</body>

2）事件冒泡

1，描述：事件会按照Dom层次结构像水泡一样不断向上直至顶端，即：子元素事件触发引起父元素的事件也触发的现象

2，解决：在事件处理函数中返回false，会对事件停止冒泡

第8章 效果（选学）

8.1 基本

1） show()

2） hide()

3） toggle()

8.2 滑动

1） slideDown()

2） slideUp()

3） slideToggle()

8.3 淡入淡出

1） fadeIn()

2） fadeOut()

3） fadeToggle()

 

原文：https://www.cnblogs.com/Objecting/p/12249924.html

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！