前段jQuery的介绍和使用

最新推荐文章于 2024-09-02 22:23:47 发布

DI O

最新推荐文章于 2024-09-02 22:23:47 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/LeFran/article/details/118069679

html 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了前端开发的三大组成部分：HTML、CSS和JavaScript，着重讲解了jQuery。jQuery是一个免费、开源的JavaScript库，它简化了JavaScript编程，使得网页行为操作和交互效果的实现更为简便。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端开发三大块
1、HTML：负责网页结构

2、CSS：负责网页样式

3、JavaScript：负责网页行为，比如:网页与用户的交互效果

jQuery:

定义
jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。
作用
jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 导入jquery使用线上导入 必须能访问外部网络 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> 
    <script>
        // //  如果在head标签内使用方法,使用$(document).ready方法进行加载
        // $(document).ready(function(){
        //     // 通过选择器选择要操作的标签
        //     // 标签选择器  使用标签的名称进行选择 确认标签后使用css样式进行传递
        //     // json形式 传递多参 使用逗号隔开 使用 key:vaule形式
        //     $('div').css({"background-color": 'red'})
        // })
    </script>
    <title>jquery的使用</title>
</head>
<body>

    <div class='box1'>
        左大腚
    </div>

    <div class='box2'>
        jquery的使用
    </div >

    <div id="box3">
        奥术大师
    </div>

    <div>
        <p id="p1">
            第一个p标签
        </p>
    </div>
       
    <div>
        <p>
            第二个p标签
        </p> 
    </div>

    <ul>
        <li>姓名: 张三</li>
    </ul>

    <!-- 用户登录 -->
    姓名: <input type="text" value="张三">
    
    <br>
    <!-- 用户登录 -->
    姓名: <input type="text" id='name'>
    密码: <input type="text" id='password'>
    <input type="button" value="登录按钮" id="ip1">



    <br>
    <a href="https://www.baidu.com/"> 百度链接</a>

    <br>
    <!-- 用户输入的数据会保存到vaule中 -->
    <!-- 姓名: <input type="text" value ='我是你爹'> -->
    <script>
        // 如果在body标签内可以直接使用jquery方法
        // $('div').css({"background-color": 'LightGreen'})


        // class选择器 $(.类命名的名字)
        $('.box1').css({"background-color": 'Blue'})
        $('.box2').css({"background-color": 'Chartreuse'})
        
        // id选择器
        $('#box3').css({"background-color": 'green'})
        
        // 过滤标签 has 方法可以根据内嵌标签的id或者class命名的名字确认要操作那个父标签
        $('div').has('#p1').css({"background-color": 'pink'})
        
        // 按照标签的数量编号过滤要操作的标签
        // alert($('div'))
        console.log($('div'))
        $('div').eq(4).css({"background-color":'Yellow'})

        // 将内容写入标签 html覆盖写入方法 ,会将原来的页面进行覆盖
        $('div').has('#p1').html('<p> 第三个p标签 </p>')
        // 追加写入数据
        $('div').eq(4).append('<p> 第一百个个p标签 </p>')

        //循环添加学生数据
        var nameList=['李四','王五','赵六']
        for(var index = 0 ; index < nameList.length;index++){
            $('ul').append('<li> 姓名' + nameList[index] +"</li>")
        }

        // 获取标签属性
        var data = $('a').prop('href')
        // alert(data)

        //修改设置属性 按照json{'属性':'属性值'}
        $('a').prop({'href':'https://www.bilibili.com/'})

        // 获取input标签输入的值
        // var data = $('input').prop('value')
        var data = $('input').val()

        // alert(data)

        //事件的使用
        // 失去焦点事件 当用户输入信息完成后 鼠标离开失去焦点,验证触发失去焦点事件,验证用户输入的信息
        // blur() 需要接受一个函数参数进行调用,
        $('#name').blur(function(){
            // 当焦点时间被触发时,执行验证信息的逻辑 this 代表当前标签
            var name = $(this).val()
            if(name.length<=5){
                alert('名字不能小于5位')
            }
           
        })

            // 点击事件
            // click(function(){业务})
            $('#ip1').click(function(){
                var name = $('#name').val()
                var password = $('#password').val() 
                
                // 验证用户时候否输入
                if(!name || !password){
                alert('数据为空啊呆瓜')
            }
            })


            // // 对象使用
            // // 直接赋值json对象
            // var person = {
            //     'name':'jihn',
            //     'age':20,
            //     'func1':function(){
            //         alert(2222)
            //     }
            // }
            // // 取值
            // alert(person.name)
            // person.func1()


            // json字符串   
            // json 形式的key :vaule必须是双引号
            var json_str = '{"name":"jinx","age":16}'
            // json解析 将字符串转化为对象
            var json_obj =JSON.parse(json_str)
            alert(json_obj.name)


            // ajax请求
            $.ajax({
                'url':'https://api.apishop.net/common/weather/get15DaysWeatherByArea?apiKey=BH31b4Sf9d55ab43b8d461f64d8907128f996fc042ac82b&area=北京',
                'type':'GET',
                'typeData':'JSON',
                success:function(response){
                    //成功  response
                    console.log(response)
                    console.log(typeof(response))
                    console.log(JSON.parse(response))

                },
                error:function(){
                    //请求失败
                }
            })


    </script>
    
</body>
</html>

在这里插入代码片