jquery

最新推荐文章于 2022-11-16 10:54:32 发布

可爱绒绒帽

最新推荐文章于 2022-11-16 10:54:32 发布

阅读量147

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/IIWOWKSS/article/details/105422292

版权

Jquery

源码：Demo 3

选择器

jquery是一个轻量级js库
核心是选择器，用于获取页面元素
语法：
- jQuery(选择器表达式)
- $(选择器表达式)
基本选择器：
- $("#id") - ID选择器，指定id元素的对象
- $("标签") - 元素选择器，选择指定标签名的选择器
- $(".class") - 类选择器，选中拥有指定css类的元素
- $("S1,S2,SN") - 组合选择器，对元素进行组合
层叠选择器： 根据元素的位置关系来获取元素的选择器表达式
- $("ancestor descendant") - 后代选择器
- $("ancestor>descendant") - 子选择器
- $("prev~siblings") - 兄弟选择器：prev之后的同级元素
属性选择器：根据元素的属性值来选择元素的选择器表达式
- $("selector[attribute=value]") - 选中属性值等于具体值的的组件
- $("selector[attribute^=value]") - 选中属性值以某值开头的组件
- $("selector[attribute$=value]") - 选中属性值以某值结尾的组件
- $("selector[attribute*=value]") - 选中属性包含某值的组件
位置选择器： 根据位置获取指定的元素
- $("selector:first") - 获取第一个元素
- $("selector:last") - 获取最后一个元素
- $("selector:even") - 获取偶数位置的元素(从0开始)
- $("selector:odd") - 获取奇数位置的元素(从0开始)
- $("selector:eq(n)") - 获取指定位置的元素(从0开始)
表单选择器： 获取表单元素
- $("selector:input") - 所有输入元素
- $("selector:text") - 获取文本框
- $("selector:password") - 获取密码框
- $("selector:submit") - 获取提交按钮
- $("selector:reset") - 获取重置按钮

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    document.getElementById("btnSelect").onclick = function () {
        var selector = document.getElementById("txtSelector").value;
        // jquery选择器
        // 选择器
        $("*").removeClass("highlight"); //选择所有去除highlight类
        $(selector).addClass("highlight");//选择selector添加highlight类
    }
</script>

操作元素属性

attr(name|properties|key) - 获取或设置元素属性
removeAttr(name) - 移除元素属性

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    //获取属性值
    var href_attr = $("a[href*='163']").attr("href");
    alert(href_attr);
    //更改属性值
    $("a[href*='163']").attr("href", "http://www.github.com/iiwowks/");
    //获取默认第一个a标签的href
    var attr = $("a").attr("href");
    alert(attr);
    //移除属性
    $("a").removeAttr("href");
</script>

操作元素的css样式

css() - 获取或设置匹配元素的样式属性
addClass() - 为每个匹配的元素添加指定的类名
removeClass() - 从所有匹配的元素中删除全部或者指定的类

    <style>
        .myclass {
            font-style: italic;
            color: darkblue;
        }

        /* 高亮css类 */
        .highlight {
            color: red;
            font-size: 30px;
            background: lightblue;
        }
    </style>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    //获取css类 默认第一个a的color属性
    var color = $("a").css("color");
    alert(color);
    //设置css类属性 传入一个json对象
    $("a").css({"color": "red", "front-weight": "bold", "font-style": "italic"});
    //
    $("a").css("color", "red");
    alert(color);
    //增加css类
    $("li").addClass("highlight myclass");
    //移除指定的所有css类
    $("p").removeClass("myclass");
</script>

设置元素内容

val() - 获取或设置输入项的值
text() - 获取或设置元素的纯文本
html() - 获取或设置元素内部的HTML

<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    //获取、设置输入项表单内容
    $("input[name = 'uname']").val("administrator");

    //获取元素值
    var uname = $("input[name = 'uname']").val();
    alert(uname);
    //获取、设置元素纯文本 text() 会转义标签
    $("span.myclass").text("<b> github————— gayhub </b>");

    //html()不会做转义
    //$("span.myclass").html("<b> github————— gayhub </b>");
    var str = $("sapn.myclass").html();
    //屏蔽标签，直接输出文本
    var str = $("sapn.myclass").text();
    alert(str);
</script>

事件处理

on("click", function) - 为选中的页面元素绑定单击事件
click(function) - 是绑定事件的简写形式

常用事件：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ABHjSoLH-1586443182969)(/images/web/批注 2020-04-05 163754.png)]

<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");
    });
    //
    $("span.myclass").click(function(){
        $(this).css("background-color", "lightgreen");
    });
    //键盘事件
    $("input[name = 'uname']").keypress(function(event){
        //可以在浏览器中查看具体的event内容
        console.log(event);
        if( event.keyCode == 32){
            $(this).css("color", "red");
        }
    });
</script>

页面就绪函数

☞在页面加载完成后执行的函数
语法1：$(document).ready(function)
语法2：$(function)

Ajax

源码：Demo 3

Asynchronous JavaScript And XML(异步的js和xml)
Ajax可以在不刷新页面的前提下，进行页面局部更新

使用流程

创建XMLHttpRequest对象
发送Ajax请求
处理服务器响应

创建XMLHttpRequest对象

        var xmlhttp;
        if(window.XMLHttpRequest){  
            xmlhttp = new XMLHttpRequest();
        }else{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

发送Ajax请求

xmlhttp.open() - 创建请求
xmlhttp.send() - 发送请求

        //创建请求
        //xmlhttp.open("GET", "http://localhost/test?name=admin", true); //get方法，地址，是否异步
        xmlhttp.open("GET", "/Demo3/ajax/content", true);//此处需要添加上下文路径/Demo3/
        //发送到服务器
        xmlhttp.send();

处理服务器响应

xmlhttp.onreadystatechange() 事件：监听ajax的执行过程
xmlhttp.readyState属性说明XMLHttpRequest当前状态
xmlhttp.status属性：服务器响应状态码 200：成功，404：未找到

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kof7MsTI-1586443182973)(/images/web/image-20200407155734387.png)]

<body>
<input id="btnLoad" type="button" value="加载">
<div id="divContent"></div>
<script>
    document.getElementById("btnLoad").onclick = function(){
        //1. 创建XmlHttpRequest对象
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log(xmlhttp);
        //2. 发送Ajax请求
        xmlhttp.open("GET" , "/Demo3/ajax/content" , true);
        xmlhttp.send();
        //3. 处理服务器响应
        xmlhttp.onreadystatechange = function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                var t = xmlhttp.responseText;
                alert(t);
                document.getElementById("divContent").innerHTML = t;
            }
        }
    }
</script>
</body>

jquery对ajax的支持

jquery对Ajax进行封装，提供了$.ajax()方法
语法：&.ajax(options)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aBfhupQC-1586443182975)(/images/web/image-20200407180459568.png)]

    <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        // 页面就绪函数
        $(function(){
            $.ajax({
                "url": "/Demo3/ajax/news_list",
                "type": "get",
                // "data": "t=leetcode&xing=zheng&ming=junan",
                "data": {"t": "leetcode", "xing": "zheng", "ming": "junan"},
                "dataType": "json",
                "success": function(json){
                    console.log(json);
                    for(var i = 0; i < json.length; i++){
                        $("#container").append("<h1>" + json[i].title + "</h1>");
                    }
                },
                "error": function (xmlhttp, errorText){
                    console.log(xmlhtpp);
                    console.log(errorText);

                    if(xmlhttp.status == "405"){
                        alert("无效的请求方式");
                    }else if(xmlhttp.status == "404"){
                        alert("未找到url资源");
                    }else if(xmlhttp.status == "500"){
                        alert("服务器内部错误");
                    }
                    else{
                        alert("产生异常");
                    }
                }
            })
        })
    </script>