33.JQuery

1.简单介绍


2.JQuery选择器

image.png


image.png

注意：兄弟选择器$("prev~siblings")是选择"prev"之后的同级标签，不一定要向邻，但是一定要在prev之后。


image.png

image.png

image.png

注意：
对于表单选择器，input标签就算没有书写 text=input，他依然会选中
但是对于属性选择器 input[type="text"],对于没有书写 text=input，他不会被选中

<!DOCTYPE html >

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实验室</title>

<style>
.myclass {
    font-style: italic;
    color: darkblue;
}
/* 高亮css类 */
.highlight {
    color: red;
    font-size: 30px;
    background: lightblue;
}
</style>

</head>

<body>
    <div class="section">
        <h2>jQuery选择器实验室</h2>
        <input style="height: 24px" id="txtSelector" />
        <button id="btnSelect" style="height: 30px">选择</button>
        <hr />
        <div>
            <p id="welcome">欢迎来到选择器实验室</p>
            <ul>
                <li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
                        style="color: darkgreen" href="http://www.so.com">360</a>
                </span>
                </li>
                <li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
                        style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
                </span>
                </li>
                <li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
                        <a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
                </span>
                </li>
            </ul>

            <span class="myclass ">我是拥有myclass类的span标签</span>

            <p class="myclass">我是拥有myclass的p标签</p>
            <form id="info" action="#" method="get">
                <div>
                    用户名：<input type="text" name="uname" value="admin" /> 密码：<input
                        type="password" name="upsd" value="123456" />
                </div>
                <div>
                    婚姻状况： <select id="marital_status">
                        <option value="1">未婚</option>
                        <option value="2">已婚</option>
                        <option value="3">离异</option>
                        <option value="4">丧偶</option>
                    </select>
                </div>
                <div class="left clear-left">
                    <input type="submit" value="提交" /> <input type="reset" value="重置" />
                </div>
            </form>
        </div>
    </div>
    
    <!-- 引用jquery库 -->
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        document.getElementById("btnSelect").onclick = function(){
            //jquery的选择器方法
            $("*").removeClass("highlight");//将所有标签都移除"highlight"类，这样css就不会使其高亮
            var selector = document.getElementById("txtSelector").value;//获取输入的标签(字符串)
            $(selector).addClass("highlight");//对选中的标签添加类，使css能够生效
        };
    </script>  
</body>
</html>
image.png

3.操作元素

image.png
<!DOCTYPE html >

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作元素属性</title>

<style>
.myclass {
    font-style: italic;
    color: darkblue;
}
/* 高亮css类 */
.highlight {
    color: red;
    font-size: 30px;
    background: lightblue;
}
</style>

</head>

<body>
    <div class="section">
        <h2>jQuery选择器实验室</h2>
        <input style="height: 24px" id="txtSelector" />
        <button id="btnSelect" style="height: 30px">选择</button>
        <hr />
        <div>
            <p id="welcome">欢迎来到选择器实验室</p>
            <ul>
                <li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
                        style="color: darkgreen" href="http://www.so.com">360</a>
                </span>
                </li>
                <li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
                        style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
                </span>
                </li>
                <li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
                        <a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
                </span>
                </li>
            </ul>

            <span class="myclass ">我是拥有myclass类的span标签</span>

            <p class="myclass">我是拥有myclass的p标签</p>
            <form id="info" action="#" method="get">
                <div>
                    用户名：<input type="text" name="uname" value="admin" /> 密码：<input
                        type="password" name="upsd" value="123456" />
                </div>
                <div>
                    婚姻状况： <select id="marital_status">
                        <option value="1">未婚</option>
                        <option value="2">已婚</option>
                        <option value="3">离异</option>
                        <option value="4">丧偶</option>
                    </select>
                </div>
                <div class="left clear-left">
                    <input type="submit" value="提交" /> <input type="reset" value="重置" />
                </div>
            </form>
        </div>
    </div>
    
    <!-- 引用jquery库 -->
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
    //1.获取、设置、移除属性
        /*若选中第多个元素，则只会返回第一个符合要求的属性*/
        var href_attr = $("a[href*='163']").attr("href");//.attr()一个参数代表获取属性值
        alert(href_attr);
        /*若选中第多个元素，则全部元素的属性都会被设置*/
        $("a[href*='163']").attr("href","http://www.163.com");//attr()两个参数代表设置属性值
        $("a").removeAttr("href");//移除符合条件的元素的属性
    //2.
    </script>  
</body>
</html>

4.操作元素的css样式

<!DOCTYPE html >

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作元素属性</title>

<style>
.myclass {
    font-style: italic;
    color: darkblue;
}
/* 高亮css类 */
.highlight {
    color: red;
    font-size: 30px;
    background: lightblue;
}
</style>

</head>

<body>
    <div class="section">
        <h2>jQuery选择器实验室</h2>
        <input style="height: 24px" id="txtSelector" />
        <button id="btnSelect" style="height: 30px">选择</button>
        <hr />
        <div>
            <p id="welcome">欢迎来到选择器实验室</p>
            <ul>
                <li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
                        style="color: darkgreen" href="http://www.so.com">360</a>
                </span>
                </li>
                <li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
                        style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
                </span>
                </li>
                <li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
                        <a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
                </span>
                </li>
            </ul>

            <span class="myclass ">我是拥有myclass类的span标签</span>

            <p class="myclass">我是拥有myclass的p标签</p>
            <form id="info" action="#" method="get">
                <div>
                    用户名：<input type="text" name="uname" value="admin" /> 密码：<input
                        type="password" name="upsd" value="123456" />
                </div>
                <div>
                    婚姻状况： <select id="marital_status">
                        <option value="1">未婚</option>
                        <option value="2">已婚</option>
                        <option value="3">离异</option>
                        <option value="4">丧偶</option>
                    </select>
                </div>
                <div class="left clear-left">
                    <input type="submit" value="提交" /> <input type="reset" value="重置" />
                </div>
            </form>
        </div>
    </div>
    
    <!-- 引用jquery库 -->
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $("a").css("color","red");//设置css属性
        $("a").css({"color":"red","font-weight":"bold","font-style":"italic"});//设置多个属性，用json
        var color = $("a").css("color");//获取css属性，若选择了多个，则只返回第一个
        alert(color);
        $("li").addClass("highlight");//动态为元素增加类以变css修饰
        $("li").addClass("highlight myclass");//动态为元素增加多个类，用空格
        $("p").removeClass("myclass");//移除类
    </script>  
</body>
</html>

5.设置元素内容

image.png
<!DOCTYPE html >

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作元素属性</title>

<style>
.myclass {
    font-style: italic;
    color: darkblue;
}
/* 高亮css类 */
.highlight {
    color: red;
    font-size: 30px;
    background: lightblue;
}
</style>

</head>

<body>
    <div class="section">
        <h2>jQuery选择器实验室</h2>
        <input style="height: 24px" id="txtSelector" />
        <button id="btnSelect" style="height: 30px">选择</button>
        <hr />
        <div>
            <p id="welcome">欢迎来到选择器实验室</p>
            <ul>
                <li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
                        style="color: darkgreen" href="http://www.so.com">360</a>
                </span>
                </li>
                <li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
                        style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
                </span>
                </li>
                <li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
                        <a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
                </span>
                </li>
            </ul>

            <span class="myclass ">我是拥有myclass类的span标签</span>

            <p class="myclass">我是拥有myclass的p标签</p>
            <form id="info" action="#" method="get">
                <div>
                    用户名：<input type="text" name="uname" value="admin" /> 密码：<input
                        type="password" name="upsd" value="123456" />
                </div>
                <div>
                    婚姻状况： <select id="marital_status">
                        <option value="1">未婚</option>
                        <option value="2">已婚</option>
                        <option value="3">离异</option>
                        <option value="4">丧偶</option>
                    </select>
                </div>
                <div class="left clear-left">
                    <input type="submit" value="提交" /> <input type="reset" value="重置" />
                </div>
            </form>
        </div>
    </div>
    
    <!-- 引用jquery库 -->
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $("input[name='uname']").val("administrator");//设置文本框的数据（表单）
        var v = $("input[name='uname']").val();//获取文本框数据
        alert(v);
        //设置文本内容，如span
        //$("span.myclass").text("<b>hello world</b>");//会对<b></b>进行转译，原样输出<b></b>
        $("span.myclass").html("<b>hello world</b>");//不会对<b></b>进行转译，会出现加粗效果
        //var vspan = $("span.myclass").html();//结果：<b>hello world</b>
        var vspan = $("span.myclass").text();//结果:hello world
        alert(vspan);
        //优先使用text方法
    </script>  
</body>
</html>

6.JQuery常用事件

image.png

image.png
<!DOCTYPE html >

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作元素属性</title>

<style>
.myclass {
    font-style: italic;
    color: darkblue;
}
/* 高亮css类 */
.highlight {
    color: red;
    font-size: 30px;
    background: lightblue;
}
</style>

</head>

<body>
    <div class="section">
        <h2>jQuery选择器实验室</h2>
        <input style="height: 24px" id="txtSelector" />
        <button id="btnSelect" style="height: 30px">选择</button>
        <hr />
        <div>
            <p id="welcome">欢迎来到选择器实验室</p>
            <ul>
                <li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
                        style="color: darkgreen" href="http://www.so.com">360</a>
                </span>
                </li>
                <li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
                        style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
                </span>
                </li>
                <li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
                        <a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
                </span>
                </li>
            </ul>

            <span class="myclass ">我是拥有myclass类的span标签</span>

            <p class="myclass">我是拥有myclass的p标签</p>
            <form id="info" action="#" method="get">
                <div>
                    用户名：<input type="text" name="uname" value="admin" /> 密码：<input
                        type="password" name="upsd" value="123456" />
                </div>
                <div>
                    婚姻状况： <select id="marital_status">
                        <option value="1">未婚</option>
                        <option value="2">已婚</option>
                        <option value="3">离异</option>
                        <option value="4">丧偶</option>
                    </select>
                </div>
                <div class="left clear-left">
                    <input type="submit" value="提交" /> <input type="reset" value="重置" />
                </div>
            </form>
        </div>
    </div>
    
    <!-- 引用jquery库 -->
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $("p.myclass").on("click" , function(){
            //$(this)是指当前事件产生的对象
            $(this).css("background-color","yellow");
        });
        
        $("p.myclass").click(function(){
            $(this).css("background-color","lightgreen");
        });
        //实现当文本框输入空格时，显示红色
        $("input[name='uname']").keypress(function(event){
            console.log(event);//event可以获取事件相关的参数
            if(event.keyCode == 32){
                $(this).css("color","red");
            }
        });
    </script>   
</body>
</html>

7.练习

image.png
<!DOCTYPE html >

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery练习</title>

<style type="text/css">
.div1{

    float: left;
    width: 50px;
    line-height: 30px;
    background-color: lightgray;
    margin-left: 10px;
    text-align: center;
    vertical-align: middle;
}
.div2{
    width: 300px;
    height: 300px;
    border: solid gray 1px;
    margin-top: 60px;
    color: red;
}
</style>


</head>
<body>
    <h2>请选择背景颜色</h2>
    <div>
    <div id="blue" class="div1">蓝色</div>
    <div id="green" class="div1">绿色</div>
    </div>
    <div class="div2" id="bg">
    </div>
    <div>输入颜色首字母： <input type="text" name="color"></div>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(window).on('load',function(){
            alert("欢迎来到设置颜色的页面");
        });
        $("#blue").click(function(){
            $(".div2").css({"font-style":"normal","font-weight":"normal"});
            $(".div2").css({"background-color":"blue","color":"red"});
            $(".div2").text("蓝色背景");
        });
        $("#green").click(function(){
            $(".div2").css({"background-color":"green","color":"red","font-style":"italic","font-weight":"bold"});
            $(".div2").text("绿色背景");
        });
        $("input[type='text']").keypress(function(event){
            if(event.keyCode == 66){
                $(".div2").css("background-color","blue");
                $(".div2").text("");
            }else if(event.keyCode == 71){
                $(".div2").css("background-color","green");
                $(".div2").text("");
            }
            
        });
        
    </script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,014评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,796评论 3赞 386
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,484评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,830评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,946评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,114评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,182评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,927评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,369评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,533评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,166评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2赞 351

推荐阅读更多精彩内容

  • jquery 权威指南 笔记
    第一章 入门 基本功能：访问和操作 dom 元素，控制页面样式，对页面的事件处理，与ajax完美结合，有丰富的插件...
    X_Arts阅读 1,034评论 0赞 2
  • Jquery知识点总结
    一：认识jquery jquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Aj...
    xuguibin阅读 1,706评论 1赞 7
  • jQuery基础(2)
    (续jQuery基础(1)) 第5章 DOM节点的复制与替换 （1）DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,324评论 0赞 8
  • jQuery
    jQuery模块 选择器、DOM操作、事件、AJAX与动画 匿名函数自执行 作用：解决命名空间与变量污染的问题 总...
    青青玉立阅读 878评论 0赞 0
  • 2016年度微博自评TOP10@我是宋小雷
    No.10 生活嘛，就是要生动的活着！ 自评评委会评语: “生活，就是要生动的活着”，只要去找，乐趣可以有很多，比...
    我是宋小雷阅读 521评论 0赞 0