jQuery01-入门-选择器

瑶大头*^_^*

已于 2023-04-15 10:07:16 修改

阅读量90

点赞数 2

分类专栏： jQuery专栏文章标签： javascript 前端 jquery

于 2023-04-09 16:37:16 首次发布

本文链接：https://blog.csdn.net/qq_73126462/article/details/130043566

版权

jQuery专栏专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一:What?是什么？

JavaScript库：封装了很多JS代码
JavaScript库：jQuery(90%)、Ext JS
官方地址：http://jquery.com/

二:Why?为什么要学习？

查看官方jQueryLOGO：write less，do more
为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

三:Where?哪些情况下用？

中大型网站开发
是一些前端框架的基础，比如EasyUI，Bootstrap

四:How?怎么用？

工具：HBuilder

案例1：点击按钮获取输入框中的值（JS对比jQuery）

js方式①
<script>
        window. Onload=function(){
            //根据id拿到按钮
            let btn=document.getElementById("btna");
            //给按钮添加点击事件  匿名函数
            btn.onclick=function( ){
                //根据id拿到文本框的值
                let str=document.getElementById("aa").value;
                //弹出
                alert(str);
            }
        }
    </script>

jQuery方式②
 <!-- 引入外部js=jQuery的类库 -->
    <script src="jquery-3.6.4.js"></script>
    <!-- 另起一个script块 -->
    <script>
        //页面载入的函数=加载DOM
        // $(document).ready(function( ){
        //     alert(1);
        // })
        
        //简便写法    $=jQuery
       $(function(){
        //相当于window.onload

        案例一
           let btn=$("#btnb");
           btn.click(function(){
            let str=$("#aa").val( );
            alert(str);
        })

<body>
    <h2>jQuery入门&选择器</h2>
    <h3>一.jQuery入门</h3>
    <h4>1.点击按钮弹出文本框的值</h4>
    <input  type="text" id="aa"/>
    <input  type="button" id="btna" value="点击[纯js方式]"/>
    <input  type="button" id="btnb" value="点击[jQuery方式]"/>
<body/>

3.使用jQuery步骤

3.1.1.下载jQuery库开发版本：jquery-3.3.1.js 生产版本：jquery-3.3.1.min.js

3.1.2.生产版本：jquery-3.3.1.min.js

3.1.3.使用

五:jQuery选择器& 层次选择器

一.基本选择器

ID选择器：#ID
类选择器：.class
元素选择器:element
通配符：*
多个选择器(并集)：selector1,selector2
多个选择器(交集)：selector1 selector2
查找所有元素，查询子元素

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

 <h3>二.jQuery选择器</h3>
    <h4>2.1-2.2  基本选择器 & 层次选择器</h4>
    <div id="xx">
        <p>这是第一个div的段流&nbsp;<span>啦啦啦啦啦</span></p>
        <span>瑶瑶天天开心</span>
        <h3>-------------</h3>
        <span>很好喝</span>
    </div>
    <div class="yy">
        这是第二个div
    </div>
    <p>这是外面的段流</p>
    <span>瑶瑶很厉害</span>

 // 2.1-2.2  基本选择器 & 层次选择器

        //单个样式
        // $("#xx").css("background","yellow");//id选择器  #
        //多个样式
        //背景是粉红色  字体是红色  类选择器  .
        // $(".yy").css({"background":"pink","color":"red"});
        //标签选择器  
        // $("div").css("background","yellow");
        //通配符
        // $("*").css("background","yellow");
        //并集   所有的p和span 
        // $("p,span").css("color","red");
        //找后代标签
        // $("div span").css("color","pink");
        //找儿子  父子关系
        // $("p>span").css("color","pink")
        //紧跟着p的span标签  同级
        // $("p+span").css("color","green");
        //找p后面所有的span标签  同级
        // $("p~span").css("color","green");

二.过滤选择器

参考jQuery文档
获取第一个元素:first
最后一个元素:last
获取偶数下标的元素:even
获取奇数下标的元素:odd
获取某一范围元素 :gt大于 :lt小于

案例4：使用过滤选择器，选择li中的元素

 <h4>2.3 过滤选择器</h4>
    <ul>
        <li>0-瑶瑶</li>
        <li>0-欣欣</li>
        <li>0-慧慧</li>
        <li>0-辉辉</li>
        <li>0-哈哈</li>
        <li>0-简介</li>
    </ul>

 //过滤选择器

        //第一个
        // $("ul>li:first").css("color","green");
        //最后一个
        // $("ul>li:last").css("color","green");
        //第3个
        // $("ul>li:eq(2)").css("color","green");
        //倒数第2个
        // $("ul>li:eq(-2)").css("color","green");
        // 下标为偶数   奇数行
        //  $("ul>li:even").css("color","green");
        // 下标为奇数   偶数行
        //  $("ul>li:odd").css("color","pink");
        //大于0
        // $("ul>li:gt(0)").css("color","pink");
        //小于6
        // $("ul>li:lt(6)").css("color","pink");
        //0>x>6  先小于后大于
        // $("ul>li:lt(5):gt(0)").css("color","pink");

案例5：表格隔行换色

<h4>案例5:表格隔行换色</h4>
    <table border="1px" width="400px">
    <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>

        //案例5:表格隔行换色
        $("table tr:even").css("background","pink");
        $("table tr:odd").css("background","green");

三.表单选择器

参考jQuery文档
获取选择单选框的值
获取选择多选框的值
获取选择下拉值

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

  <h4>2.4表单选择器</h4>  
    <form action="" id="myForm">
        性别:<input type="radio" checked="checked" name="ssex" value="男"/>男
            <input type="radio" name="ssex" value="女"/>女<br/>
        爱好:<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>
    
    // 2.4表单选择器
     $("#ok").click(function(){
            // 拿性别的值
            let sex=$("#myForm input:radio:checked").val();
            console.info(sex);
            // 拿爱好的值
            $("#myForm input:checkbox:checked").each(function(){
                console.log($(this).val());
            })
            // 拿地址 :selected:被选中的
           let address=$("#myForm select option:selected").val();
           console.log(address);
        });

瑶大头*^_^*

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery01-入门-选择器

3.1.1.下载jQuery库开发版本：jquery-3.3.1.js 生产版本：jquery-3.3.1.min.js。3.1.2.生产版本：jquery-3.3.1.min.js。3.使用jQuery步骤。
复制链接

扫一扫