jQuery（入门&选择器）

敢敢130

已于 2024-06-04 17:58:37 修改

阅读量1.1k

点赞数

文章标签： jquery 前端 html

于 2022-03-17 23:18:36 首次发布

本文链接：https://blog.csdn.net/weixin_67465673/article/details/123531668

版权

思维导图

一、笔记：

1. jQuery是什么？jQuery是一个快速、简洁的JavaScript框架。

2.为什么要学jQuery?倡导写更少的代码量，做更多的事情。

3.jQuery里如何动态设置样式css的？单个属性和多个属性的区别？

$（"div"）.css("color","red");        $("div").css({键：值，键：值})

4.jQuery的事件？失焦事件？该如何表示？

 $("#btn").click(function(){});简便的点击事件

$("document").  ready(function(){});   这个也是点击事件但简便的更方便

5.哪些情况下适合用？中型网站开发、jQuery是一些前端的基础，比如EasyUI、Bootstrap。

6.开发工具：HBuider 使用步骤：①下载jQuery库 ②引入，将js文件复制到项目中 ③使用

案例1：点击按钮获取输入框中的值（对比js和jQuery）
jQuery选择器

一、.基础选择器：1、ID选择器：#id 2、类选择器：.class 3、元素选择器：element 4、通配符：* 5、多个选择器：交集：selector 1 selector 2 并集：selector 1,selector 2

案例2：使用基本选择器，改变元素的背景颜色和字体颜色（div p span）

二、层次选择器：查找使用元素，查询子元素

案例3：使用层次选择器，选中某个元素下面的所有元素和子元素

三、过滤选择器：获取第一个元素：first 获取最后一个元素：last

获取偶数下标：even 获取奇数下标：odd

获取某一范围元素：gl大于 gt小于

案例4：使用过滤选择器，选择li中元素
案例5：表格隔行换色
表单选择器

案例6：获取表单中的单选、多选、下拉框

四、代码块：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            /* window.onload=function(){
                //拿到按钮
                var btn = document.getElementById("btn");
                //给按钮添加点击事件
                btn.onclick=function(){//匿名函数
                    //拿到文本框  的值
                    var a = document.getElementById("aa") .value;
                    alert(a);
                }
            } */
        </script>
        <!-- 引入外部js=jQuery的类库 -->
        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        <!-- 另起一个script块 -->
        <script type="text/javascript">
            //页面载入函数 加载DOM
            $(function(){//相当于window.onload
                //案例1
                /* var b = $("#btnb");//拿到按钮
                //给按钮添加点击事件
                b.click(function(){
                    var a = $("#aa").val();//拿到文本框的值
                    alert(a);
                }) */
                
                //2.1 基本选择器
                // $("#xx").css("background","yellow");//id选择器
                // $(".yy").css({"background":"yellow","color":"red"});//类选择器
                // $("div").css("background","pink");//标签选择器=元素选择器
                // $("*").css("background".,"yellow");//标签选择器=元素选择器
                // $("p,span").css("background","yellow");//并集
                // $("div span").css("background","yellow");//交集 后代标签span
                // $("div>span").css("background","yellow");//父子关系 
                // $("p>span").css("background","yellow");//p 标签的儿子span
                // $("p+span").css("background","yellow");//兄弟关系 p后面紧跟着的span
                
                //2.3 过滤选择器
                // $("ul>li:first").css("background","yellow");//第一个
                // $("ul>li:last").css("background","yellow");//最后一个
                // $("ul>li:even").css("background","yellow");//偶数下标
                // $("ul>li:odd").css("background","yellow");//奇数下标
                // $("ul>li:gt(0)").css("background","yellow");//大于零
                // $("ul>li:lt(4)").css("background","yellow");//小于四
                //0>x>4    先小于后大于
            //     $("ul>li:lt(4):gt(0)").css("background","yellow");
            
            //案例5 隔行换色
            // $("table tr:even").css("background","pink");
            // $("table tr:odd").css("background","yellow");
            
            //2.4 表单选择器
            $("#ok").click(function(){
                //拿性别
                var sex = $("#myForm input:radio:checked").val();
                console.info(sex);
                
                //拿爱好
            //     $("#myForm input:checkbox:checked").each(function(){
            //         console.info($(this).val());
            //     })
            
            //地址
            // var address = $("#myFrom select option:selected").val();
            //     console.info(address);
            
            })
            })
        </script>
    </head>
    <body>
        <h2>jQuery入门&选择器</h2>
        <h3>一、jQuery入门</h3>
        <h4>案例1:点击按钮弹出文本框的值</h4>
        <input type="text" id="aa" />
        <input id="btna" type="button" value="点击[js方式]" />
        <input id="btnb" type="button" value="点击[jQuery方式]" />
        <h3>二、jQuery选择器</h3>
        <h4>2.1-2.2 基本选择器&层次选择器</h4>
        <div id="xx">
            <p>这是第一个div中的段落&nbsp;<span>羡慕</span></p>
            <span>爱情故事</span>
        </div>
        <div class="yy">
            这是第二个div
        </div>
        <p>这是第一个外面的段落</p>
        <span>麻拐和蛤蟆的外部爱情故事</span>
        <h4>2.3 过滤选择器</h4>
        <ul>
            <li>0-单身</li>
            <li>1-好男人</li>
            <li>2-高冷</li>
            <li>3-逗比</li>
            <li>4-清高</li>
        </ul>
        <h4>案例5：表格隔行换色</h4>
        <table border="1px" width="50%">
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
        <h4>2.4 表单选择器</h4>
        <form action="" id="myForm">
            性别:<input type="radio" name="ssex" value="男"/>男
            <input type="radio" name="ssex" value="女"/>女<br />
            爱好:<input type="checkbox" value="打王者"/>打王者
            <input type="checkbox" value="看美女"/>看美女
            <input type="checkbox" value="看帅哥"/>看帅哥
            <input type="checkbox" value="装清高"/>装清高<br />
            地址:
            <select>
                <option value ="湖南省">湖南省</option>
                <option value ="浙江省">浙江省</option>
                <option value ="广东省">广东省</option>
            </select><br />
            <input type="button" value="提交" id="ok"/>
        </form>
        <pre>
            
            
            
            
        </pre>
    </body>
</html>

敢敢130

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery（入门&选择器）

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> /* window.onload=function(){ //拿到按钮 var...
复制链接

扫一扫