01-选择集转移.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function (){
            // 选择文字 3 的标签
            $li = $('#box');
            $li.css({'background': 'red'});
            // 选择上一个
            $li.prev().css({'background': 'blue'});
            // 上边所有的
            $li.prevAll().css({'color':'green'});
            // 下边一个
            $li.next().css({'background': 'yellowgreen'});
            // 下边所有的
            $li.nextAll().css({'color': 'orange'});
            // 出了自己之外同一级节点
            $li.siblings().css({'font-size': '26px'});

            // 选择父级
            $('ul').parent().css({'background': 'pink'});

            // 选择孩子, 整体的 div 不会有变化
            $('div').children().css({'background': 'blue'});

            // find() 查找的是子标签,最终选择的是子标签, 
            $('div').find('.c_p').css({'color': 'red'});
            // has 过滤,查找的是子标签,选择的是自己
            $('div').has('.c_p').css({'font-size': '30px'})
        });

    
            
    </script>
</head>
<body>
    <ul>
        <!-- li{文字$}*8 -->
        <li>文字1</li>
        <li>文字2</li>
        <li id="box">文字3</li>
        <li>文字4</li>
        <li>文字5</li>
        <li>文字6</li>
        <li>文字7</li>
        <li>文字8</li>
    </ul>

    <div>
        这是第一个 div 
        <p>
            这是 第一个div 中的p
        </p>
    </div>
    <div>
        这是第二个 div 
        <p class="c_p">
            这是 第二个 div 中的p
        </p>
    </div>
</body>
</html>

02-获取标签内容.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 获取标签的内容
            var sResult = $('div').html();
            alert(sResult);
            // 修改标签的内容
            $('div').html('good good study !');
            // 追加内容
            $('div').append('<a href="http://www.baidu.com">百度</a>');
        });
    </script> 
</head>
<body>
    <div>
        好好学习
    </div>
    
</body>
</html>

03-获取和设置标签属性.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $A = $('a');
            // 获取 a 标签的 href 属性
            // alert($A.prop('href'));
            // 设置属性
            $A.prop({'href':'http://www.itcast.cn', 'target': '_blank'});

            
        })
        
        function fnClick(){
            // 获取 input 标签 
            alert($('#box').prop('value'));
        }
        function fnAdd(){
            // alert($('#box').prop('value'));
            var result = $('#box').val();
            // 默认获取到的内容是字符串类型, 想要进行数字加法,需要进行类型转换
            result = parseInt(result);
            $('#box').val(result + 10);

        }
    </script>
</head>
<body>
    <div>
        <a href="http://www.baidu.com">百度</a>
    </div>
    <div>
        <input type="text" name="" id="box" value="10">
        <input type="button" value="点击获取 input 中的内容" onclick="fnClick()">
        <input type="button" value="点击,对 input 中的数字 + 10" onclick="fnAdd()">
    </div>
</body>
</html>

04-jquery 事件.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 80px;
            background: red;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 鼠标点击事件
            $('div').click(function(){
                // 特殊的变量, this, 发生事件的标签对象
                console.log('鼠标点击了:', $(this).html());
            });

            // 鼠标进入
            $('div').mouseover(function(){
                console.log('鼠标进入了:');
                $(this).css({'background': 'green'})
            });

            // 鼠标离开
            $('div').mouseleave(function(){
                console.log('鼠标离开了:');
                $(this).css({'background': 'red'})
            });

            // 获得焦点 输入框
            $('input').focus(function(){
                $(this).prop({'placeholder':' '});
                $(this).css({'font-size': '28px'});
            });

            // 失去焦点
            $('input').blur(function(){
                $(this).prop({'placeholder':'请输入内容'});
                $(this).css({'font-size': ''});
            });
        })
    </script>
</head>
<body>
    <div>
        这是一个 div 
    </div>
    <input type="text" placeholder="请输入内容">
</body>
</html>

05-静态 web服务器-面向对象版.py

import socket
import threading


class HTTPWebServer(object):
    def __init__(self):
        self.server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
        self.server_socket.bind(('', 9090))
        self.server_socket.listen(128)

    def __del__(self):
        self.server_socket.close()

    def start(self):
        while True:
            new_socket, ip_port = self.server_socket.accept()
            print(f'{ip_port} 连接了.....')
            sub_thread = threading.Thread(target=self.handle_client_request, args=(new_socket, ip_port))
            sub_thread.start()

    @staticmethod
    def handle_client_request(n_socket, client_ip_port):
        # 接收请求报文
        buf = n_socket.recv(4096)
        if buf:
            buf = buf.decode()  # 转换为 str
            # 解析资源路径
            file_name = buf.split(' ', 2)[1]
            print(f"请求的资源未: {file_name}")
            if file_name == '/':
                file_name = '/index.html'
            # 6.1 响应行
            response_line = 'HTTP/1.1 200 OKrn'
            # 6.2 响应头
            response_header = 'Server:PYrnName:Py42rnContent-Type: text/html;charset=utf-8rn'
            # 6.3 空行 rn
            # 6.4 响应体(具体的页面数据), 返回 index.html 的页面
            try:
                f = open('static' + file_name, 'rb')  # 读取到是 bytes 类型
                data = f.read()
                f.close()
            except FileNotFoundError:
                f = open('static/error.html', 'rb')
                data = f.read()
                f.close()
                response_line = 'HTTP/1.1 404 NOT FOUNDrn'
            # 合成响应体
            response = (response_line + response_header + 'rn').encode() + data
            n_socket.send(response)
        else:
            print(f"{client_ip_port} 关闭了")

        n_socket.close()


if __name__ == '__main__':
    # 1. 创建服务器对象
    web = HTTPWebServer()
    # 2. 启动服务器
    web.start()

05-事件冒泡.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('div').click(function(){
                $(this).css({'background': 'pink'})
            });
        })
    </script>
</head>
<body>
    <div class="box1">
        这是一个 div 
        <div class="box2">
            好好学习
        </div>
    </div>
</body>
</html>

06-事件绑定出现的问题.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 事件绑定,只能对在绑定之前已经存在的标签进行绑定,新加入的标签不能绑定
            $('li').click(function(){
                console.log($(this).html());
            })
        });

        function fnClick(){
            // 添加 li 标签
            $('ul').append('<li>文字' + ($('li').length+1)  + '</li>')
        }
    </script>

</head>
<body>
    <ul>
        <li>文字1</li>
        <li>文字2</li>
        <li>文字3</li>
        <li>文字4</li>
        <li>文字5</li>
    </ul>
    <input type="button" value="点击添加 li 标签"  onclick="fnClick()">
</body>
</html>

07-事件代理.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // $('li').click(function(){
            //     console.log($(this).html());
            // })
            // 事件代理,让父标签代理子标签的事件
            $('ul').delegate('li', 'click', function(){
                console.log($(this).html());
            });
        });

        function fnClick(){
            // 添加 li 标签
            $('ul').append('<li>文字' + ($('li').length+1)  + '</li>')
        }
    </script>

</head>
<body>
    <ul>
        <li>文字1</li>
        <li>文字2</li>
        <li>文字3</li>
        <li>文字4</li>
        <li>文字5</li>
    </ul>
    <input type="button" value="点击添加 li 标签"  onclick="fnClick()">
</body>
</html>

08-JS 对象.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // JS 对象两种创建方式
        // 方式一 new  Object 
        var oPerson = new Object();
        // 可以给对象添加属性
        oPerson.name = '小王';
        oPerson.age = 18;
        // 添加方法
        oPerson.sayName = function (){
            alert(this.name);
        };
        // 调用属性
        // alert(oPerson.age);
        // 调用方法
        // oPerson.sayName();

        // 方式二, 使用字面量 推荐
        oStudent = {
            name: '小明',
            age: 12,
            sayName:function(){
                alert(this.name);
            }
        }

        // 调用
        alert(oStudent.age);
        oStudent.sayName();
    </script>
</head>
<body>
    
</body>
</html>

09-json字符串.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // json 本质是字符串
        var sS = '["1", 2, {"name":"小明", "age": 18}]';
        console.log(sS, typeof(sS));
        // 将 json 转换为 JS 对象
        var oObj = JSON.parse(sS);
        console.log(oObj, typeof(oObj));
        console.log(oObj[0], oObj[1], oObj[2].name, oObj[2].age);
    </script>
</head>
<body>
    
</body>
</html>

10-天气页面.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>天气查询</h3>
    <p>
        <input type="text"> 
        <input type="button"  value="查询">
    </p>
    <hr>
    <h3>查询结果</h3>
    <ul>
        <li>所在城市: 无</li>
        <li>城市天气: 无</li>
        <li>城市温度: 无</li>
        <li>空气级别: 无</li>
        <li>风力级别: 无</li>
    </ul>
</body>
</html>

脚本宝典总结

以上是脚本宝典为你收集整理的【jquery 】jquery 初识，树欲千尺，唯有根深。全部内容，希望文章能够帮你解决【jquery 】jquery 初识，树欲千尺，唯有根深。所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: Vue组件通信:任意组件之间进行通... 下一篇:网络技术理论：包、片段、帧、数...

猜你在找的心得技巧相关文章

clion结合vcpkg以及GTest的使用 2022-07-07
EGF 2022-06-06
ExtJS 布局-Column布局（Column layout） 2022-06-05
颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
rootfs -根文件系统制作 2022-07-07
网页简单布局之结构与表现原则分享 2022-04-15
小项目中怎么防止Vue的闪现画面效果 2022-04-15
隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
告别硬编码让你的前端表格自动计算的实例代码 2022-04-15

全站导航更多