day 38 jq 入门学习(一)

前情提要:

　　jq是简化版本的js 可以把很多很复杂的js 提炼让前端代码更好写

　　　　一:jq的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.12.4.js"></script>

</head>

<body>

    <script>

        console.log( $ );

        console.log( jQuery );

    </script>

</body>

</html>

　　　　二:jq的入口函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.12.4.js"></script>

    <script>

        // window.onload = function(){

        //     console.log ( document.getElementById("title").innerHTML );

        // };

        // window.onload = function(){

        //     console.log(111);

        // }

        // 上面的代码只有最后一个onload里面的代码会被执行，前面的已经被覆盖了，

        // 在jQuery中可以使用ready入口函数来解决这个问题，ready入口函数可以使用多次，

        // $(document).ready(function(){

        //     console.log( document.getElementById("title").innerHTML );

        // });

        //

        // $(document).ready(function(){

        //     console.log("ready");

        // });

        // 上面的ready函数写法可以简化

        $(function(){

            console.log( document.getElementById("title").innerHTML );

        });

        $(function(){

            console.log("ready");

        });

        $(function(){

            // 这里编写我们的js/jQuery代码

        });

    </script>

</head>

<body>

    <h1 id="title">标题</h1>

</body>

</html>

　　　　四:jq的选择器(上)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.12.4.js"></script>

</head>

<body>

<p id="first">一个文本</p>

<script>

    // jQuery参照了css操作元素外观的选择器写法，自己内部实现了一套获取js元素的选择器功能,

    // 这套功能的使用，我们完全可以向之前学习css那样来使用这要选择器功能，

    // jQuery还额外提供了一些css本来没有的选择器

    // document.getElementById()  根据id属性值获取一个元素

    // $("#id值")

    console.log( $("#first") );

    // 通过id元素获取元素的内容

    // js写法

    let f = document.getElementById("first");

    console.log( f.innerHTML );

    // jQuery写法，下面代码就是上面2行代码的缩写

    console.log( $("#first").html() );

    // 细节：$()函数获取到的元素，返回值是一个类数组的jQuery对象，并非js那样的一个元素对象

    // 这个类数组的jQuery对象拥有数组的操作方法，但是并不具备js元素的操作方法

    // 例如：

    console.log( $("#first").innerHTML ); // 这里根本无法获取内容

</script>

<ul class="list">

    <li class="num1">第1个列表</li>

    <li class="num2">第2个列表</li>

    <li class="num2">第3个列表</li>

</ul>

<script>

    // 获取类元素

    // document.getElementsByClassName("类名")

    // $(".类名")

    console.log( $(".list") );

    console.log( $(".list").html() );

    // 可以获取多个类元素

    console.log( $(".num2") );

    // 注意了，如果jQuery对象获取的是多个元素，那么获取内容的时候只会显示第一个成员的内容

    console.log( $(".num2").html() );

    // 所以如果要获取这些元素所有的内容，则使用数组的遍历即可

    // for(let i = 0;i<$(".num2").length;i++){

    //     console.log( $(".num2").eq(i).html() ); // $(".num2")[i] 在jQuery中可以使用 $(".num2").eq(i)

    // }

</script>

<div class="list2">

    <p class="num3">第1个列表</p>

    <p class="num4">第2个列表</p>

    <p class="num4">第3个列表</p>

</div>

<p class="num4">第4个列表</p>

<script>

    // 使用标签名选择器

    console.log( $("div") );

    // 更多的是用使用层级选择器

    console.log( $(".list2 .num3") );

    console.log( $(".list2 .num4") );

</script>

<style>

    input[name=idcard]{

       border:1px solid red;

    }

</style>

<input type="text" name="uname">

<input type="text" name="address">

<input type="text" name="idcard">

<script>

    // 属性选择器

    console.log( $("input") );

    console.log( $("input[name=idcard]") );

</script>

</body>

</html>

　　　　四:jq的选择器(下)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.12.4.js"></script>

</head>

<body>

<ul class="list">

    <li>0</li>  <!-- 索引下标从0开始 -->

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

<script>

    // $(".list li") // 获取所有.list下面的li

    console.log( $(".list li:odd") ); // 获取所有.list下面的索引下标为奇数的li

    console.log( $(".list li:even") );

    // 深入学习，实现一个换色效果

    // .css()   给jQuery元素添加css外观

    $(".list li:odd").css({

        // "color":"red",

        color:"red", // 对象的属性也可以是没有引号的

        // "background-color":"gray"

        backgroundColor:"gray", // 如果样式属性是多个单词组成的，那么不要引号的话就要改成驼峰式

    });

</script>

<ul>

    <li><input type="checkbox" checked></li>

    <li><input type="checkbox"></li>

    <li><input type="checkbox" checked></li>

    <li><input type="checkbox"></li>

</ul>

<script>

    // 获取多选框中具有勾选状态的所有标签,一般用于完成反选,全选或者全不选

    console.log( $("li input:checked") );

</script>

</body>

</html>

　　　　五:对jq的查询结果的过滤操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.12.4.js"></script>

</head>

<body>

<ul class="list">

    <li>1</li>

    <li class="last num">2</li>

    <li class="last">3</li>

    <li class="last num"></li>

</ul>

<script>

    // 获取所有元素li中的第二个[索引下标为1]

    console.log( $(".list li") );

    console.log( $(".list li").eq(1) ); // eq表示从查询结果的数组提取指定下标的成员

    // 获取除了指定元素意外的所有其他li元素

    // not() 表示排除指定选择器对应的元素，提取结果中的其他元素

    console.log( $(".list li").not(".last") );

    // 在所有li.last元素中找出内部具有.num类名的元素

    // has() 表示从结果中提取具有指定选择器对应的元素出来

    // console.log( $(".list .last").has(".num") );  // 这里.last和.num是同一个级别，同一个元素了。所以无法获取

</script>

<ul class="list2">

    <li><a href="">第0个</a></li>

    <li><a class="link" href="">第1个</a></li>

    <li><a href="">第2个</a></li>

    <li><a class="link" href="">第3个</a></li>

    <li><a href="">第4个</a></li>

</ul>

<script>

    // 在所有li元素中找出内部具有.link类名的元素

    // 可以使用has

    console.log( $(".list2 li").has(".link") ); // 注意，这里是返回元素

</script>

</body>

</html>

　　　　六:选择器的关系操作(上)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.12.4.js"></script>

</head>

<body>

<p>第1个文本</p>

<p class="p2">第2个文本</p>

<div class="box">

    <p class="p3">第3个文本</p>

    <a href="">链接</a>

</div>

<a href="">链接</a>

<script>

    // 获取div所有的兄弟元素

    // siblings 获取当前元素的所有兄弟元素

    console.log( $(".box").siblings() );

    // 获取div元素前面的所有兄弟元素

    // prevAll()

    console.log( $(".box").prevAll() );

    // 获取div元素后面的所有兄弟元素

    // nextAll()

    console.log( $(".box").nextAll() );

    // 获取div元素前面的一个兄弟元素

    console.log( $(".box").prev() );

    // 获取div元素后面的一个兄弟元素

    // next() 下一个元素

    // next().next() 下2个元素

    console.log( $(".box").next() );

    // 获取当前元素自身下标，可以使用index();

    console.log( $(".box").index() );

</script>

</body>

</html>

　　　　七:选择器的关系操作(下)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.12.4.js"></script>

</head>

<body>

<p>第1个文本</p>

<p class="p2">第2个文本</p>

<div class="box">

    <p class="p3">第3个文本

        <span>

            <a href="" class="move"></a>

        </span>

    </p>

    <a href="">链接</a>

</div>

<a href="">链接</a>

<script>

    // 获取指定元素的父元素

    // parent()

    console.log( $(".box").parent() );

    console.log( $(".p3").parent().parent() );

    // 获取指定元素的父系元素[爸爸、爷爷、太爷、祖宗]

    console.log( $(".p3").parents() );

    // 获取指定元素的所有子元素

    console.log( $("body").children() );

    // 获取指定元素的所有孙子元素

    console.log( $("body").children().children() );

    // 通过.box获取内部的.move标签

    // find 查找具有指定选择器的子孙元素

    console.log( $(".box").find(".move") );

</script>

</body>

</html>

　　　　八:操作元素的内容和值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.12.4.js"></script>

</head>

<body>

<img src="data:images/1.png" alt="">

<p>第1个文本</p>

<form action="">

    账号：<input type="text" value="admin"><br>

    密码：<input type="password" name="password" ><br>

</form>

<script>

    // 在获取了jQuery结果以后，得到的是一个类数组，如果要获取数组成员第一个元素的内容。

    // 可以通过html()来获取或者修改内容

    // html网页中只有双标签内容，单标签只有属性和值

    // html() 只能获取双标签的内容

    console.log( $("p").html() );

    // html() 还可以修改元素的内容，把要修改后的内容作为参数传入到html()方法中即可

    // 清空内容， 直接使用空白字符串

    $("p").html("<a href=''>新的一个文本</a>");

    // 表单元素就有值

    // val() 获取表单元素的值

    console.log( $("input[type=text]").val() );

    // 修改表单元素的值

    $("input[type=password]").val("xiaoming");

    $("input[type=password]").val(""); // 如果要清空值，则使用空字符串

    // 获取纯文本内容，可以使用 text()

    // 标签代码会被剔除

    console.log( $("body").text() );

</script>

</body>

</html>

　　　　九:操作关系的属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.12.4.js"></script>

</head>

<body>

    <img src="data:images/1.png" alt="">

    <p>第1个文本</p>

    <form action="">

        账号：<input type="text" value="admin"><br>

        密码：<input type="password" name="password" ><br>

        爱好：<input type="checkbox" name="love" value="qq">qq

              <input type="checkbox" name="love" value="bb">bb

              <input type="checkbox" name="love" value="ww">ww

    </form>

    <script>

        // 获取元素指定属性的值

        // 通过attr来获取元素指定属性的值

        console.log( $("img").attr("src") );

        // 设置元素指定属性的值[设置单个属性值]

        $("img").attr("src","images/2.png");

        // 设置多个属性值

        // 参数是json对象，{键1:值,键2:值....}

        $("img").attr({"src":"2.png","alt":"这是一张图片"})

        // 还可以在修改属性的时候，传入匿名函数[扩展]

        $("img").attr("src",function(){

            let num = parseInt(Math.random()*2+1);

            return "images/"+num+".png";

        });

        // 针对在html元素中，有些元素的属性和值是同名的.

        // checked="checked"

        // selected="selected"

        // disabled="disabled"

        // 在js中修改状态都可以使用布尔值来处理

        $("input[name=love]").attr("checked",false);

    </script>

</body>

</html>

　　　　十:邮件里面的全选和反选,取消

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.12.4.js"></script>

</head>

<body>

<ul>

    <li><input type="checkbox" name="love"></li>

    <li><input type="checkbox" name="love"></li>

    <li><input type="checkbox" name="love"></li>

    <li><input type="checkbox" name="love"></li>

    <li><input type="checkbox" name="love"></li>

    <li><input type="checkbox" name="love"></li>

</ul>

全选 <input type="checkbox" name="all">

反选 <input type="checkbox" name="rev">

<script>

// 绑定事件

// js          jQ                                   jQ简写]常用\

// onclick     $("控制器").click(function(){});     $("控制器").on("click",function(){})

// onchange    $("控制器").change(function(){});    $("控制器").on("change",function(){})

// 全选功能

$("input[name=all]").change(function(){

    // 如果在jQuery元素绑定的事件中，表示当前jQuery元素需要使用 $(this)

    // 而this代表的是当前事件的js元素，js元素无法使用jQuery提供的方法

    if( $(this).prop("checked") == true ){

        // 如果当前全选状态没有被定义属性checked，或者属性checked的值不是true，则使用全选

        $("li input").prop("checked",true);

    }else{

        $("li input").prop("checked",false);

    }

});

// 反选[每一框原来没有被选中的，改成选择，否则反之]

$("input[name=rev]").change(function(){

    $("li input").prop("checked",function(){

        console.log( $(this) ) // 这里的 $(this) 代表的是 调用prop的对象

        console.log( $(this).prop("checked") ); // 获取当前元素对象的checked值

        // 把当前元素的checked属性取反，返回

        return !$(this).prop("checked");

    });

});

</script>

</body>

</html>

　　　　十一:操作元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
<style>
.first {
color: red;
font-size: 32px;
}
.last{
border: 1px solid blue;
background-color: orange;
}
.bg{
background-color: #aaaaaa;
}
</style>
</head>
<body>

// 设置元素的指定样式[一个样式]
$(".first").css("background-color","pink");
// 设置多个样式
$(".first").next().css({
"background-color":"yellow",
"border":"1px solid red",
});

// 针对一次性设置多个样式的情况，jQuery还提供了 addClass 和 removeClass给我们使用。
// eq(-1) 表示倒数，只有在jQuery中支持
$("ul li").eq(-1).addClass("last");

// 移除类名
$("ul li").eq(0).removeClass("first");
</script>

<button class="btn">开灯</button>
<script>
$(".btn").click(function(){
// 执行toggleClass的时候，当前元素如果有对应的类名，则被删除
// 如果没有，则自动添加
$("body").toggleClass("bg");
});
</script>
</body>
</html>

　　　　十二:jq的链式编程

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.12.4.js"></script>

    <style>

    </style>

</head>

<body>

<ul>

    <li class="first">第1</li>

    <li>第2</li>

    <li>第3</li>

</ul>

<script>

    $(".first").css("color","red").css("font-size","32px");

    console.log( $(".first") );

    console.log( $(".first").css("color","red") );

    console.log( $(".first").css("color","red").css("font-size","32px") );

    console.log( $(".first").css("font-weight","blod").prop("title","提示文本").html("hello") );

    // 在对象每次调用自身方法的时候，如果返回值是自己当前对象，这种思想就是 链式编程

    // 使用原生的js来编写一个对象，实现这种链式编程。

    let obj = {

        css:function(){

            console.log("执行了css");

            // 实现链式编程的核心就是 return 当前对象this

            return this;

        },

        html:function(){

            return this;

        }

    };

    console.log( obj.css().css().html() );

</script>

</body>

</html>

　　　　十三:事件操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.12.4.js"></script>

</head>

<body>

    <form action="">

        账号：<input type="text" name="uname"><span></span><br>

        密码：<input type="password" name="password"><br>

        确认密码：<input type="password" name="password2"><br>

        <input type="submit" value="注册">

    </form>

    <script>

        // 账号只能6-10位长度

        // onblur

        $("input[name=uname]").on("blur",function(){

            // 获取账号值的长度

            // $(this).val() // 表单值

            // console.log( $(this).val().length );

            unlen = $(this).val().length;

            if( unlen>6 && unlen < 10 ){

                // 合法

                $(this).next().html("账号长度合法");

            }else{

                // 不合法

                $(this).next().html("账号长度不合法");

            }

        });

        $("input[type=submit]").on("click", function(){

            // 获取账值

            let unlen = $("input[name=uname]").val().length

            if( unlen>6 && unlen < 10 ){

                // 合法

                $(this).next().html("账号长度合法");

            }else{

                // 不合法

                $(this).next().html("账号长度不合法");

                // 阻止表单提交

                return false;

            }

        });

    </script>

</body>

</html>

　　　　十四:事件操作hover

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-1.12.4.js"></script>

    <style>

    .level2{

        display: none;

    }

    </style>

</head>

<body>

    <ul class="nav">

        <li><a href="">首页</a></li>

        <li><a href="">商品列表</a>

            <ul class="level2">

                <li><a href="">皮鞋</a></li>

                <li><a href="">男装</a></li>

                <li><a href="">皮衣</a></li>

            </ul>

        </li>

        <li><a href="">商品列表</a>

            <ul class="level2">

                <li><a href="">皮鞋</a></li>

                <li><a href="">男装</a></li>

                <li><a href="">皮衣</a></li>

            </ul>

        </li>

    </ul>

    <script>

        console.log( $(".nav").children() );

        $(".nav").children().hover(function(){

            // 鼠标移入

            $(this).find(".level2").css("display","block");

        },function(){

            // 鼠标移出

            $(this).find(".level2").css("display","none");

        });

    </script>

</body>

</html>

day 38 jq 入门学习(一)的更多相关文章

JQ入门学习实战演练
选择器是JQuery一大特色,所有的DOM操作.事件操作.Ajax操作都离不开选择器.熟练掌握JQuery的选择器,可以节省很多代码,很大程序上简化我们的脚本编程工作. JQuery的选择器很类似于样 ...
第15.38节 PyQt(Python+Qt)入门学习：containers容器类部件QDockWidget停靠窗功能详解
专栏:Python基础教程目录专栏:使用PyQt开发图形界面Python应用专栏:PyQt入门学习老猿Python博文目录一.概述 QDockWidget类提供了一个可以停靠在QMainWin ...
opengl入门学习
OpenGL入门学习说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640 ...
Aho-Corasick算法、多模正则匹配、Snort入门学习
希望解决的问题 . 在一些高流量.高IO的WAF中,是如何对规则库(POST.GET)中的字符串进行多正则匹配的,是单条轮询执行,还是多模式并发执行 . Snort是怎么组织.匹配高达上千条的正则规则 ...
Lucene.net入门学习系列(2)
Lucene.net入门学习系列(2) Lucene.net入门学习系列(1)-分词 Lucene.net入门学习系列(2)-创建索引 Lucene.net入门学习系列(3)-全文检索在使用Luce ...
dubbo入门学习笔记之入门demo(基于普通maven项目)
注:本笔记接dubbo入门学习笔记之环境准备继续记录; (四)开发服务提供者和消费者并让他们在启动时分别向注册中心注册和订阅服务需求:订单服务中初始化订单功能需要调用用户服务的获取用户信息的接口(订 ...
OpenGL入门学习(转载）
说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640*480分辨率.16色 ...
反射实现Model修改前后的内容对比【API调用】腾讯云短信 Windows操作系统下Redis服务安装图文详解 Redis入门学习
反射实现Model修改前后的内容对比在开发过程中,我们会遇到这样一个问题,编辑了一个对象之后,我们想要把这个对象修改了哪些内容保存下来,以便将来查看和追责. 首先我们要创建一个User类 1 p ...
ElasticStack的入门学习
Beats,Logstash负责数据收集与处理.相当于ETL(Extract Transform Load).Elasticsearch负责数据存储.查询.分析.Kibana负责数据探索与可视化分析. ...

随机推荐

在平台中使用JNDI 数据源
有些情况下为了系统的安全性考虑,可以将数据源配置成JNDI,在程序中只需要使用容器的JNDI路径就可以了. 配置方法 1.在容器中配置数据源 <Context path="/&quo ...
jquery checkbox反复调用attr('checked', true/false)只有第一次生效 Jquery 中 $('obj').attr('checked',true)失效的几种解决方案
1.$('obj').prop('checked',true) 2. $(':checkbox').each(function(){ this.checked=true; }) 为什么:attr为失效 ...
vim 查找替换批量替换
一.vi查找: 当你用vi打开一个文件后,因为文件太长,如何才能找到你所要查找的关键字呢?在vi里可没有菜单-〉查找, 不过没关系,你在命令模式下敲斜杆(/)这时在状态栏(也就是屏幕左下脚)就出 ...
以太坊虚拟机（EVM）
转载链接:https://ethfans.org/posts/solidity-chapter1-introduciton-to-smart-contracts 概括总览: 以太坊虚拟机(EVM)是以 ...
mysql学习之路_连接查询
回顾列属性:主键,自增长,唯一键. 关系:一对一,一对多,多对多三层范式: 1NF:字段设计必须符合原子性 2NF:不存在部分依赖(没有复合主键) 3NF:不存在传递依赖(实体单独成表) 逆规范化 ...
jdk1.6的配置
执行下列命令安装jdk1.7 /usr/lib/jvm$ sudo apt-get install openjdk-7-jdk openjdk-7-jre 会得到下面这两个文件: 查看当前jdk版本: ...
深入浅出javascript（五）函数
全局函数自定义函数函数对象函数的属性和方法一.全局函数全局函数不同于内置对象的方法(来源于网络),一共有7个,可以直接使用. escape( ).eval( ).isFinite( ).is ...
javascript的Mixins
mixin在javascript里可以看作是一种从别的对象"借用"功能的方法.每一个新定义的对象都有一个 prototype属性,其他的对象就可以从这里"借用" ...
redis状态监控可视化工具RedisLive使用
首先,别人写的工具,赞一下 github地址 https://github.com/nkrode/RedisLive 然后,fork一下,自己加点功能 gui介绍(直接copy的github图片) ...
Jmeter-安装与配置
前言越长大越无脑,很多东西还是很容易忘记,哈哈,虽然网上也有很多关于Jmeter的安装配置教程,但还是想在自己的博客上记录下,便于以后查阅. JMeter的安装配置过程我的环境信息如下: 操作系统 ...

day 38 jq 入门 学习(一)

day 38 jq 入门 学习(一)的更多相关文章

随机推荐

热门专题

day 38 jq 入门学习(一)

day 38 jq 入门学习(一)的更多相关文章