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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容