day 54 jQuery, part-1

上节内容回顾:

1. 前情回顾

        1. DOM对象和BOM对象
            1. BOM 对象 --> window
                location
                    location.href    
                    location.href="https://www.sogo.com"
                    location.reload
                history
                navigator
            2. DOM
                1. document结构
                    1. 节点
                        1. 文档节点
                        2. 元素节点
                        3. 属性节点
                        4. 文本节点
                    2. 查找标签
                        1. 基本查找
                            1. ID查找 --> docuemnt.getElementById
                            2. 标签名查找 --> document.getElementsByTagName
                            3. class名查找 --> document.getElementsByClassName
                            // 4. 属性查找    --> document.getElementsByName
                        2. 层级查找
                            1. 上一级父标签 --> eleObj.parentElement
                            2. 儿子标签     --> eleObj.children
                            3. 第一个儿子   --> eleObj.firstElementChild
                            4. 最后一个儿子 --> eleObj.lastElementChild
                            5. 上一个兄弟标签 --> eleObj.previousElementSibling
                            5. 下一个兄弟标签  --> eleObj.nextElementSibling
                            
                    3. 创建标签
                        1. doucument.creatElement("div")  --> 要创建什么标签括号里面就写什么
                        2. 设置标签内容
                            1. eleObj.innerHTML = "<p>P标签</p>"
                            2. eleObj.innerText = "标签中间的文本"
                    
                        3. 标签属性
                            1. input标签相关
                                1. inputEle.value  --> 获取input框的输入值
                                2. inputEle.value = "请输入xxx" --> 设置input框的值
                            2. checkbox标签相关
                                1. checkboxEle.checked --> 返回true或false
                                2. checkboxEle.checked = true  --> 选中该checkbox
                            3. select标签相关
                                1. selectObj.options  --> 获取所有的option选项 （数组）
                                2. selecObj.selectedIndex  --> 获取选中的option的索引值
                                3. selecObj.options.length=0 --> 快速清空option
        
        2. JS 事件
            常用事件
                onclick
                ondbclick
                onload
                blur
                fouces
                onchange (select联动示例)
            绑定事件方法
                1. 在标签上通过特定的事件属性绑定事件
                    比如： <div onclick="f()">点我点我点我</div> 
                2. 通过JS绑定事件
                    eleObj.onclick = function(){ ... }
                3. 事件委托（利用事件冒泡）
                    找到父标签，给子标签绑定事件
                    <ul>li*100</ul>
                    
                    ulEle.onclick=function(){
                        event.target  --> 点击的那个标签对象
                        alert(event.target.innerText)
                    }
                    
    补充知识点
        1. 定时器示例
        2. addEventListener

View Code

补充的定时器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器示例</title>
</head>
<body>

<input type="text" id="i1">

<input type="button" value="开始" onclick="start();">
<input type="button" value="结束" onclick="end();">

<script>
    var t;   // undefined
   function f() {
        var dateObj = new Date();
    //  获取i1标签
    var i1Ele = document.getElementById("i1");
    i1Ele.value=dateObj.toLocaleString();
   }
    // 每隔一秒就执行一次f()
    function start() {
       f();
       // 只创建一个定时器，有定时器的话我就不创建了
        if (t === undefined) {
            t = setInterval(f, 1000);
        }
    }

    // 停止计时
    function end() {
        clearInterval(t);
        // t现在是什么？
        console.log("---> ", t)
        t = undefined;
    }

</script>
</body>
</html>

View Code

<!--<!DOCTYPE html>-->
<!--<html lang="zh-CN">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<meta http-equiv="x-ua-compatible" content="IE=edge">-->
    <!--<title>定时器练习</title>-->
<!--</head>-->
<!--<body>-->

<!--<input type="text" id="i1">-->

<!--<input type="button" value="start" onclick="beginning();">-->
<!--<input type="button" value="end" onclick="stop();">-->

<!--<script>-->
    <!--var t;  //提前声明一个变量,为后续做铺垫-->
    <!--function f(){-->
        <!--var dateObj=new Date();-->
        <!--//获取i1标签-->
        <!--var i1Ele=document.getElementById("i1");-->
        <!--i1Ele.value=dateObj.toLocaleString();  //把dateObj这个当前-->
        <!--// 时间的赋值变量转换成字符串,toLacaleString它本身就是-->
        <!--// 把当前时间转换成字符串的意思-->
    <!--}-->
    <!--//每间隔一秒就执行一次f()-->
    <!--function beginning(){-->
        <!--f();-->
        <!--//只创建一个定时器,有就不创建,没有则创建t就是计时器-->
        <!--if (t===undefined){-->
            <!--t=setInterval(f,500);-->
<!--按照指定周期来调用函数,这里在括号里面写函数名,以及自定义时间,-->
        <!--}-->
    <!--}-->
    <!--//停止计时-->
    <!--function stop(){-->
<!--clearInterval是函数被调用,这里是终止定时器-->
        <!--clearInterval(t);-->
        <!--//t现在是什么?-->
        <!--console.log("-&ndash;&gt;",t)-->
        <!--t=undefined;-->
    <!--}-->

<!--</script>-->
<!--</body>-->
<!--</html>-->

View Code

绑定多个事件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定多个事件</title>
</head>
<body>

<input type="button" value="点我" id="i1">

<script>
    function f1() {
        console.log(1);
    }

    function f2() {
         console.log(2);
    }


    var i1Ele = document.getElementById("i1");
//    i1Ele.onclick=function () {
//        // 点击之后要执行的函数
//        f1();
//    };
//
//    i1Ele.onclick=function () {
//        f2();
//    };

    // addEventListener， 绑定多个事件，不覆盖
    i1Ele.addEventListener("click", f1);
    i1Ele.addEventListener("click", f2);

</script>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>绑定多个事件</title>
</head>
<body>
<!--这里是设定一个按钮-->
<input type="button" value="kick me" id="i1">

<script>
    <!--定义两个函数-->
    function f1(){
        console.log(1);
    }
    
    function f2(){
        console.log(2);
    }
//找到上面设定的那个按钮赋值给一个变量
    var i1Ele=document.getElementById("i1");
//    i1Ele.onclick=function(){
//        f1();   //这样写后加载的会覆盖前面先加载的,
//    };
//
//    i1Ele.onclick=function(){
//        f2();
//    };

    //addEventListener, 绑定多个事件,不覆盖
//    这里是把上面找到的变量,跟两个事件绑定到一起,这里就实现了同时绑定两个事件
//    关键字是addEventListener它就是绑定多个事件用的
    i1Ele.addEventListener("click",f1);
    i1Ele.addEventListener("click",f2);

</script>
</body>
</html>

View Code

今日内容开始:

jQuery是什么?

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

特点:write less,do more

它本身是一个别人写好的类库---前端专用名词,类似于我们之前学的模块,都是别人封装好的底层的东西,我们直接拿过来用就可以了.这个概念也类似于我们的函数,也是封装好的功能,直接拿到页面上引用即可,方便快捷

jQuery怎么用,

引用jQuery文件,有两种方式: ===========>我们的jQuery文件必须要引用否则会报错,无法使用,不论是在html文件中还是在console里面都是一样的效果.

一种是放到当前文件夹里面,以本地文件的方式引用,

另一种是cnd凡是引用,即在线引用,就是我们不需要下载到本地即可引用,

既然这里涉及到了在线引用的话就会牵扯出来版本问题,关于版本:

我们一般使用 3.x

jQuery.js 这个是完整版,

jQuery.min.js 这个是压缩的完整版

jQuery对象:

通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么它就可以使用jQuery里面的方法,例如:$("#i1").html(). ===>这里的意思是获取id值为i1的元素的html代码,其中html()是jQuery的里面的方法.

下面是基础语法:

下面开始具体的使用方法:

选择器:

1,查找标签:固定的原则是 $("写入条件") 注:$后面是没有空格的

1,基本查找:

id 查找========> $("#id值")

class名查找==================> $(".class名")

标签名查找=================> $("标签名")

查找所有元素==========>$("*") ---一般不常用

组合查找================>$("#id,className,tagName") 这里在查询条件里面添加了三个条件.这三个条件是彼此独立的,互不干涉,互不影响,只要在查询的时候满足其中的一个条件就可以拿到返回结果,他们之间是分开的,彼此互不干扰的.

层级选择器:

这里的x和y可以是任何的选择器

所有后代查找(子子孙孙):$("x y")

所有儿子查找:$("x > y")

所有紧挨在x后面的y标签:$("x ~ y")

基本筛选器:

$("#d p")====>所有的id值为d的标签的所有的子孙标签为p标签的标签

:first $("#d p:first")===>在所有的排标签的基础上找到第一个满足条件的p标签

:last $("#d p:last")===>在所有满足条件的p标签中找到最后一个

:ep(index) 前面两个是找第一个和最后一个,这里是找指定位置的那一个,自定义索引值,注意是索引值,我们的索引都是从0开始的,$("#d p:eq(3)") ===>找到满足条件的p标签里面的索引值为3也就是第4个标签

:gt(index) 索引值大于自定义索引值的标签 =====>$("#d p:gt(3)")所有满足条件的p标签里面索引值大于3的p标签

:lt(index) 索引值小于自定义索引值的标签=========>$("#d p:lt(3)")所有满足条件的p标签里面索引值小于3的p标签

:not(选择器) 所选择的标签里面不含有自定义选择器的标签===>$("#d p:not(.c1)") 所有满足条件的p标签里面不含有c1类属性的p标签 ======>$("#my-checkbox input:not(:checked)")还有一类写法,这样写的区别是not括号里面的内容,checked前有一个冒号,如果没有这个冒号就得不到想要的结果,这句话的意思是我们要找到id值为my-checkbox的下面的input标签,然后再找到的input标签里面找没有被选中的input标签,选中是checked,这就需要把冒号加在checked前面

:even 所有偶数的标签 ==>$("#d p:event")所有满足条件的p标签里面索引为偶数的p标签

:odd 所有基数的标签====>$("#d p:odd")所有满足条件的p标签里面索引为基数的p标签

2,修改标签样式:

原生js:

获取样式类:document.getElementById("d1")

添加样式类:classList.add(.cls) ======>

移除样式类:classList.remove(.cls)=======>

jQuery修改标签样式:

获取样式类:$("#d1")[0] =====>获取id值为d1标签的样式类

添加样式类:addClass();========>$("#d1").addClass("c2") ====>给id值作为d1的标签添加类属性值c2

移除样式类:removeClass();=======>$("#d1").removeClass("c3")==>给id值作为d1的标签删除类属性值为c3的属性.

切换css类名,有就移除,没有就添加:toggleClass();========>$("#d1").toggleClass("c4")==>给id值为d1的标签做判断,如果有c4这个类属性那么就从重删除它,否则就把它添加上.

jquery中的三种等号分别的意思：

“=”：赋值运算，如下

var a = 3;
var b = "3"

var a1=null
var a2=undefined

var a3=0
var a4=false

“==”：等于，如下（类型不同，也可能相等）
a==b
true（这里之所以返回true是因为a是数字，b是字符串，在判断是否相等时，内部自动做了字符串和数字之间的转换，把字符串转换成了数字之后再去比较的，所以就是相等的，就返回了true）

a1==a2
true（这里的null和undefined类型不同，但是用“==”就是相等的，他们在内部自动进行了类型转换，返回的就是true）

a3==a4（这里的0和false类型不同，但是用“==”就是相等的，在内部把a3的赋值结果0转换成了false跟a4去做对比，或者是把a4的赋值结果false转换成了0跟a3去做对比，就返回了true）
true

“===”强等于，如下（类型必须相同，同时值也必须相同才相等）

a===b
false（很明显，数字跟字符串类型不同，返回false）

a1===a2
false（null和undefined类型也不同，返回false）

a3===a4
false（数字和bool值类型不同也无法相等，返回false）

后期更新

3,修改标签

4,创建标签/添加标签/删除标签

5,事件

6,动画

7,插件

8,Ajax

posted @ 2018-01-02 16:15 dream-子皿阅读(164) 评论(0) 编辑收藏举报

刷新页面返回顶部

孟郊

day 54 jQuery, part-1

公告