jQuery基础

已于 2025-02-20 15:42:08 修改
阅读量682 收藏 8
点赞数 16
分类专栏： Web开发 文章标签： jquery 前端 javascript
于 2025-02-20 15:38:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Tttian622/article/details/145744820
版权

1.什么是jQuery

jQuery:是一个简洁的、快速的Javascript库。该库中提供了大量可以操作页面元素的工具。

目的在简化了HTML文档的遍历、事件交互处理、动画处理以及封装了Ajax。

2006年发布，最新版本为3.7.1。

2.测试jQuery库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始jQuery</title>
    <!-- 导入jQuery -->
    <script type="text/javascript" src="jquery-3.7.1.js"></script>
    <script type="text/javascript">
        //$:调用jQuery库
        $(document).ready(function(){
            alert('Hello jQuery')
        })
    </script>
</head>
<body>
</body>
</html>

3.操作元素对象

元素对象的加载过程---jQuery与Dom操作元素对象的区别

1.使用源生的ES操作元素对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识jQuery</title>
    <script type="text/javascript" src="jquery-3.7.1.js"></script>
    <script type="text/javascript">
        function a(){
            alert("a")
        }
        function b(){
            alert("b")
        }
        window.onload = a
        window.onload = b
    </script>
</head>
<body>
</body>
</html>

2.使用jQuery操作元素对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识jQuery</title>
    <script type="text/javascript" src="jquery-3.7.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            alert("a")
        })
        $(document).ready(function(){
            alert("b")
        })
    </script>
</head>
<body>
</body>
</html>

4.对于事件的操作

1.ES中挂事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识jQuery</title>
    <script type="text/javascript" src="jquery-3.7.1.js"></script>
    <script type="text/javascript">
        function clickMe(){
            alert("点我了")
        }
    </script>
</head>
<body>
    <p onclick="clickMe()">点击我</p>
</body>
</html>

2.使用jQuery挂事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识jQuery</title>
    <script type="text/javascript" src="jquery-3.7.1.js"></script>
</head>
<body>
    <p class="demo">点击我jQuery</p>
    <script>
        $(".demo").click(function(){
            alert("点我了jQuery")
        })
    </script>
</body>
</html>

5.导航栏

1.导航菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
</head>
<body>
    <div class="box">
        <ul class="menu">
            <li class="level1">
          <a href="#none">衬衫</a>
            <ul class="level2">
              <li><a href="#none">短袖衬衫</a></li>
              <li><a href="#none">长袖衬衫</a></li>
              <li><a href="#none">短袖T恤</a></li>
              <li><a href="#none">长袖T恤</a></li>
            </ul>
            </li>
            <li class="level1">
          <a href="#none">卫衣</a>
            <ul class="level2">
              <li><a href="#none">开襟卫衣</a></li>
              <li><a href="#none">套头卫衣</a></li>
              <li><a href="#none">运动卫衣</a></li>
              <li><a href="#none">童装卫衣</a></li>
            </ul>
            </li>
            <li class="level1">
          <a href="#none">裤子</a>
            <ul class="level2">
              <li><a href="#none">短裤</a></li>
              <li><a href="#none">休闲裤</a></li>
              <li><a href="#none">牛仔裤</a></li>
              <li><a href="#none">免烫卡其裤</a></li>
            </ul>
            </li>
        </ul>
      </div>
</body>
</html>

2. CSS样式代码

<style>
    body{
        margin: 0;
        padding: 0 0 12px 0;
        font-size: 12px;
        line-height: 22px;
        background: #fff;
    }
    ul,li{
        margin: 0;
        padding: 0;
        list-style-type: none;/*设置列表项无默认格式*/
    }
    a{
        color: #00007F;
        text-decoration: none;/*设置超链接文本无下划线*/
    }
    a:hover{
        color: #bd0a01;
        text-decoration: underline;/*设置超链接文本,划入时有下划线*/
    }
    .box{
        width: 150px;
        margin: 0 auto;
    }
    .menu{
        overflow: hidden;/*隐藏溢出的部分*/
        border-color: #C4D5DF;
        border-style: solid;
        border:0 1px 1px 1px;
    }
    .menu li.level1 a{
        display: block;/*块级元素,独占一行*/
        height: 28px;
        line-height: 28px;
        background: #ebf3f8;
        font-weight: 700;
        color:#5893B7;
        text-indent: 14px;/*文本缩进*/
        border-top: 1px solid #C4D5DF;
    }
    .menu li.level1 a:hover{
        text-decoration: none;
    }
    .menu li.level1 a.current{
        background: #B1D7EF;
    }
    .menu li ul{
        overflow: hidden;
    }
    .menu li ul.level2{
        display: block;
    }
    .menu li ul.level2 li a{
        display: block;/*设置块级元素*/
        height: 28px;
        line-height: 28px;
        background: #fff;
        font-weight: 400;
        color:#42556B;
        text-indent: 18px;
        border-top: 0px solid #fff;
        overflow: hidden;
    }
    .menu li ul.level2 li a:hover{
        color:#f60;
    }
</style>

3. 菜单展开和折叠功能

用jQuery编写，实现多级菜单的展开和折叠功能。

当点击一个<a>标签时，显示它的下一个兄弟<ul>。

同时，隐藏所有其他同级<li>中的<ul>。

<script src="jquery-3.7.1.js"></script>
<script>
    $(document).ready(function(){
        //> : level1 下所包含的所有 a
        $(".level1 > a").click(function(){
            当前点击的元素的子元素显示，它父级的兄弟级别的子元素时a的元素的下一级隐藏
            $(this).next().show().parent().siblings().children("a").next().hide()
        })
    })
</script>

6.操作CSS样式

CSS称为层叠样式表，默认情况下，div没有任何效果，需要css样式对其美化。

CSS中提供了大了的样式。由于css是浏览器默认支持的，所以不需要导入任何工具，可以直接在浏览器中解释执行。

1.原生JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作CSS样式 - 不使用jQuery</title>
</head>
<body>
    <div id="tt">CSS称为层叠样式表,默认情况下,div没有任何效果,需要css样式对其美化,在css中提供了大了的样式,
        由于css是浏览器默认支持的,所以不需要导入任何工具,可以直接在浏览器中解释执行。</div>
    <script>
        document.getElementById("tt").style.color = "#999";
    </script>
</body>
</html>

2.使用jQuery的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作CSS样式 - 使用jQuery</title>
    <script src="jquery-3.7.1.js"></script>
</head>
<body>
    <div id="tt">CSS称为层叠样式表,默认情况下,div没有任何效果,需要css样式对其美化,在css中提供了大了的样式,
        由于css是浏览器默认支持的,所以不需要导入任何工具,可以直接在浏览器中解释执行。</div>
    <script>
        $("#tt").css("color", "#999");
    </script>
</body>
</html>

7.操作表格

表格中如果每行最后一个单元格中的checkbox没有被禁用，则为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作表格</title>
    <script src="jquery-3.7.1.js"></script>
    <script>
        $("document").ready(function(){
            $("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red")
        })
    </script>   
</head>
<body>
    <table id="table">
        <tbody>
            <tr>
                <td>第1行</td>
                <td>第1行</td>
                <td>第1行</td>
                <td>第1行</td>
                <td>第1行<input type="checkbox" disabled="disabled"/></td>
            </tr>
            <tr>
                <td>第2行</td>
                <td>第2行</td>
                <td>第2行</td>
                <td>第2行</td>
                <td>第2行<input type="checkbox" /></td>
            </tr>
            <tr>
                <td>第3行</td>
                <td>第3行</td>
                <td>第3行</td>
                <td>第3行</td>
                <td>第3行<input type="checkbox" disabled="disabled"/></td>
            </tr>
            <tr>
                <td>第4行</td>
                <td>第4行</td>
                <td>第4行</td>
                <td>第4行</td>
                <td>第4行<input type="checkbox" /></td>
            </tr>
        </tbody>
    </table>

</body>
</html>

8.jQuery选择器

基本选择器：

  • #id：选择特定id的元素。
  • .class：选择特定class的所有元素。
  • element：选择特定标签名的所有元素。
  • *：选择所有元素。
  • element1, #id：选择特定标签名和特定id的元素。

层次选择器：

  • ancestor descendant：选择特定祖先元素内的所有后代元素。
  • parent > child：选择特定父元素的直接子元素。
  • prev + next：选择特定元素后面的下一个兄弟元素。
  • prev ~ siblings：选择特定元素后面的所有兄弟元素。

基本过滤选择器：

  • :first：选择第一个元素。
  • :last：选择最后一个元素。
  • :not(selector)：选择不匹配选择器的所有元素。
  • :even：选择索引值为偶数的元素。
  • :odd：选择索引值为奇数的元素。
  • :eq(index)：选择索引值等于index的元素。
  • :gt(index)：选择索引值大于index的元素。
  • :lt(index)：选择索引值小于index的元素。
  • :header：选择所有标题元素（<h1>到<h6>）。
  • :animated：选择当前正在执行动画的所有元素。
  • :focus：选择当前获取焦点的所有元素。

内容过滤选择器：

  • :contains(text)：选择包含特定文本的元素。
  • :empty：选择不包含子元素或文本的空元素。
  • :has(selector)：选择包含特定选择器的元素。
  • :parent：选择包含子元素或文本的元素。

属性选择器：

  • [attribute]：选择包含特定属性的元素。
  • [attribute=value]：选择属性值等于特定值的元素。
  • [attribute!=value]：选择属性值不等于特定值的元素（没有该属性的元素也将被选中）。
  • [attribute^=value]：选择属性值以特定值开头的元素。
  • [attribute$=value]：选择属性值以特定值结尾的元素。
  • [attribute*=value]：选择属性值包含特定值的元素。
  • [attribute1][attribute2=value]，选择同时满足多个条件的元素。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style rel="stylesheet">
div,span,p {
  width:140px;
  height:140px;
  margin:5px;
  background:#aaa;
  border:#000 1px solid;
  float:left;
  font-size:17px;
  font-family:Verdana;
  /*自定义字体*/
}
div.mini { 
  width:55px;
  height:55px;
  background-color: #aaa;
  font-size:12px;
}
div.hide { 
  display:none;
}
</style>
<script type="text/javascript" src="jquery-3.7.1.js" ></script>
<script type="text/javascript" src="assist.js"></script>
<script>
  $(document).ready(function(){
    /*基本选择器*/
    //选择id为one的元素
    $("#btn1").click(function(){
      $('#one').css("background","#bfa")
    })
    //选择class值为mini的元素
    $("#btn2").click(function(){
      $('.mini').css("background","#bfa")
    })
    //选择元素名是div的所有元素
    $("#btn3").click(function(){
      $('div').css("background","#bfa")
    })
    //选择所有元素
    $("#btn4").click(function(){
      $('*').css("background","#bfa")
    })
    //选择所有的span元素和id为two的元素
    $("#btn5").click(function(){
      $('span,#two').css("background","#bfa")
    })

    /*层次选择器*/
    //选择body内所有div元素
    $("#btn6").click(function(){
      $('body div').css("background","#bfa")
    })
    //在body内,选择子元素是div的
    $("#btn7").click(function(){
      $('body>div').css("background","#bfa")
    })
    //选择所有class为one的下一个duv元素
    $("#btn8").click(function(){
      $('.one + div').css("background","#bfa")
    })
    //选择 id为two的元素后面的所有div兄弟元素
    $("#btn9").click(function(){
      $('#two ~ div').css("background","#bfa")
    })

    /*基本过滤选择器*/
    //选择第一个div元素
    $("#btn10").click(function(){
      $('div:first').css("background","#bfa")
    })
    //选择最后一个div元素
    $("#btn11").click(function(){
      $('div:last').css("background","#bfa")
    })
    //选择class不为one的 所有div元素
    $("#btn12").click(function(){
      $('div:not(.one)').css("background","#bfa")
    })
    //选择索引值为偶数 的div元素
    $("#btn13").click(function(){
      $('div:even').css("background","#bfa")
    })
    //选择索引值为奇数 的div元素
    $("#btn14").click(function(){
      $('div:odd').css("background","#bfa")
    })
    //选择索引值等于3的元素
    $("#btn15").click(function(){
      $('div:eq(3)').css("background","#bfa")
    })
    //选择索引值大于3的元素
    $("#btn16").click(function(){
      $('div:gt(3)').css("background","#bfa")
    })
    //选择索引值小于3的元素
    $("#btn17").click(function(){
      $("div:lt(3)").css("background","#bfa")
    })
    //选择所有的标题元素
    $("#btn18").click(function(){
      $(":header").css("background","#bfa")
    })
    //选择当前正在执行动画的所有元素
    $("#btn19").click(function(){
      $(":animated").css("background","#bfa")
    })
    //选择当前获取焦点的所有元素
    $("#btn20").click(function(){
      $(":focus").css("background","#bfa")
    })

    /*内容过滤选择器*/
    //选取含有文本“di”的div元素
    $("#btn21").click(function(){
      $("div:contains(di)").css("background","#bfa")
    })
    //选取不包含子元素(或者文本元素)的div空元素
    $("#btn22").click(function(){
      $("div:empty").css("background","#bfa")
    })
    //选取含有class为mini元素 的div元素
    $("#btn23").click(function(){
      $("div:has('.mini')").css("background","#bfa")
    })
    //选取含有子元素(或者文本元素)的div元素
    $("#btn24").click(function(){
      $("div:parent").css("background","#bfa")
    })

    /*属性选择器*/
    //选取含有 属性title 的div元素
    $("#btn25").click(function(){
      $("div[title]").css("background","#bfa")
    })
    //选取 属性title值等于“test”的div元素
    $("#btn26").click(function(){
      $("div[title=test]").css("background","#bfa")
    })
    //选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)
    $("#btn27").click(function(){
      $("div[title!=test]").css("background","#bfa")
    })
    //选取 属性title值 以“te”开始 的div元素
    $("#btn28").click(function(){
      $("div[title^=te]").css("background","#bfa")
    })
    //选取 属性title值 以“est”结束 的div元素
    $("#btn29").click(function(){
      $("div[title$=est]").css("background","#bfa")
    })
    //选取 属性title值 含有“es”的div元素
    $("#btn30").click(function(){
      $("div[title*=es]").css("background","#bfa")
    })
    //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素
    $("#btn31").click(function(){
      $("div[id][title*=es]").css("background","#bfa")
    })
  })
</script>


</head>
<body>
<h3>基本选择器.</h3>
<input type="button" value="选择 id为 one 的元素." id="btn1"/>  
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
<input type="button" value="选择 所有的元素." id="btn4"/>
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
<h3>层次选择器.</h3>
<input type="button" value="选择 body内的所有div元素." id="btn6"/>
<input type="button" value="在body内,选择子元素是div的。" id="btn7"/>
<input type="button" value="选择 所有class为one 的下一个div元素." id="btn8"/>
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn9"/>
<h3>基本过滤选择器.</h3>
<input type="button" value="选择第一个div元素." id="btn10"/>
<input type="button" value="选择最后一个div元素." id="btn11"/>
<input type="button" value="选择class不为one的 所有div元素." id="btn12"/>
<input type="button" value="选择索引值为偶数 的div元素." id="btn13"/>
<input type="button" value="选择索引值为奇数 的div元素." id="btn14"/>
<input type="button" value="选择索引值等于3的元素." id="btn15"/>
<input type="button" value="选择索引值大于3的元素." id="btn16"/>
<input type="button" value="选择索引值小于3的元素." id="btn17"/>
<input type="button" value="选择所有的标题元素." id="btn18"/>
<input type="button" value="选择当前正在执行动画的所有元素." id="btn19"/>
<input type="button" value="选择当前获取焦点的所有元素." id="btn20"/>
<h3>内容过滤选择器.</h3>
<input type="button" value="选取含有文本“di”的div元素." id="btn21"/>
<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn22"/>
<input type="button" value="选取含有class为mini元素 的div元素." id="btn23"/>
<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn24"/>
<h3>可见性过滤选择器.</h3>
<input type="button" value="选取所有不可见的元素.包括input type=hidden和divstyle=display:none;"id="btn_hidden"/>
<h3> 属性选择器.</h3>
<input type="button" value="选取含有 属性title 的div元素." id="btn25"/>
<input type="button" value="选取 属性title值等于“test”的div元素." id="btn26"/>
<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn27"/>
<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn28"/>
<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn29"/>
<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn30"/>
<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn31"/>
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one" >
    id为one,class为one的div
    <div class="mini">class为mini</div>
</div>

<div class="one"  id="two" title="test" >
    id为two,class为one,title为test的div.
    <div class="mini"  title="other">class为mini,title为other</div>
    <div class="mini"  title="test">class为mini,title为test</div>
</div>

<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>

<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"  title="tesst">class为mini,title为tesst</div>
</div>


<div style="display:none;"  class="none">
    style的display为"none"的div
</div>

<div class="hide">class为"hide"的div</div>

<div>
    包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
</body>
</html>

9. 操作元素节点

1. 获取元素

获取<p>标签：var $para = $("p")

获取第二个<li>元素：var $li = $("ul li:eq(1)")

2. 获取属性和文本

获取<p>的title属性：var p_txt = $para.attr("title")

获取<li>的文本内容：var li_txt = $li.text()

3. 创建和插入元素

创建<li>元素并追加到<ul>中：

var $li_1 = $("<li title='西瓜'>西瓜</li>");
var $li_2 = $("<li title='菠萝'>菠萝</li>");
var $parent = $("ul");
$parent.append($li_1).append($li_2);

插入元素到第一位：$parent.prepend($("<li title='葡萄'>葡萄</li>"))

在指定位置插入元素：$("<li title='芒果'>芒果</li>").insertAfter($("ul li:eq(1)"));

4. 删除和清空元素

删除第二个<li>元素：$("ul li:eq(1)").remove();

清空第二个<li>的内容：$("ul li:eq(1)").empty();

5. 复制节点

点击<li>时复制并追加到<ul>中：$(this).clone(true).appendTo("ul");

6. 替换节点

替换<p>标签为<strong>：$("<strong>风吹雨成花</strong>").replaceAll("p");

7. 包裹节点

将<strong>包裹在<i>标签中：$("strong").wrap("<i></i>");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素节点</title>
    <script src="jquery-3.7.1.js"></script>
</head>
<body>
    <p title="选择你最喜欢的水果">选择你最喜欢的水果</p>
    <script>
        $(function(){
            // 获取p节点
            var $para = $("p")
            //获取第二个li元素
            var $li = $("ul li:eq(1)")
            //获取p元素的属性
            var p_txt = $para.attr("title")
            alert(p_txt)
            //获取li元素值
            var li_txt = $li.text()
            alert(li_txt)
            //创建li元素
            var $li_1 = $("<li title='西瓜'>西瓜</li>")
            var $li_2 = $("<li title='菠萝'>菠萝</li>")
            //创建ul元素
            var $parent = $("ul")//document.createElement("ul")
            $parent.append($li_1)
            $parent.append($li_2)
            //插入元素至第一位
            var $li_3 = $("<li title='葡萄'>葡萄</li>")
            $parent.prepend($li_3)
            //插入元素
            var $two_li = $("ul li:eq(1)")
            var $li_4 = $("<li title='芒果'>芒果</li>")
            $li_4.insertAfter($two_li)
            //删除元素
            var $li_remove = $("ul li:eq(1)").remove()
            $li_remove.appendTo("ul")
            //删除title不等于菠萝的元素
            // $("ul li").remove("li[title!=菠萝]")
            //清空元素中的内容
            $("ul li:eq(1)").empty()
            //复制节点
            $("ul li").click(function(){
                $(this).clone(true).appendTo("ul")
            })
            //替换节点
            // $("p").replaceWith("<strong>风吹雨成花</strong>")
            $("<strong>风吹雨成花</strong>").replaceAll("p")
            //包裹节点
            $("strong").wrap("<i></i>")
        })
    </script>
    <ul>
        <li title="苹果">苹果</li>
        <li title="香蕉">香蕉</li>
        <li title="鸭梨">鸭梨</li>
    </ul>
</body>
</html>

jQuery 基础语法
一个专注于机器学习基础与实战的技术博客，内容涵盖算法推导、模型实现、数学原理与代码实践。用通俗的语言解析复杂概念，记录学习过程中的思考与总结，适合机器学习爱好者和从业者参考。
02-27 2904
文章目录jQuery 基础语法一、 jQuery 概述1、 JS 库2、 jQuery 概念3、 jQuery 优点二、 jQuery 基本使用1、 jQuery 使用步骤2、 jQuery 入口函数3、 jQuery 顶级对象4、 jQuery 对象和 DOM 对象三、 jQuery 常用 API1、 jQuery 选择器2、 隐式迭代3、 jQuery 筛选选择器4、 jQuery 筛选方法5、 jQuery 里面的排他思想6、 链式编程四、 jQuery 样式操作1、 操作 CSS 方法2、 设置类样
Jquery基础
m0_60165694的博客
10-15 833
1.什么是 jQuery ？ jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件] 1.jQuery 是一个 JavaScript 函数库。[.js] 2.jQuery 极大地简化了 JavaScript 编程。 3.jQuery 很容易学习。 jQuery库包含以下功能： 1.HTML元素选取 2.HTML元素操作 3.CSS 操作 4.HTML 事件函数 5.JavaScript 特效和动画[元素的隐藏和显示] 6.HTML DOM 遍历和修改
JQuery基础
xlb0408的博客
04-20 1587
/添加类样式1 $(document).ready()=jQuery(document).ready() $(function(){...})=jQuery (function(){...}) $("h2").css("background-color","#CCFFFF").next().css("display","block");其它： 操作表单元素文本：利用的val方法 $("input").val() $("input").val("我修改了表单元素文本");//alert($);
jQuery基础知识
qq_51781439的博客
09-11 1439
一、jQuery简介 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 函数库。 jQuery 库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 提示： 除此之外，jQuery 还提供了大量的插件。 二、jQuery的语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法：...
JQuery基础语法
weixin_54597170的博客
10-27 2058
目录JQuery基础概述JQuery对象和JS对象区别与转换基础操作选择器基本选择器层级选择器属性选择器过滤选择器表单过滤选择器DOM操作内容操作属性操作CRUD操作 JQuery基础 概述 一个JavaScript框架， 简化JS开发， 本质上就是一些js文件，封装了js的原生代码而已。 JQuery对象和JS对象区别与转换 1.操作 JQuery对象在操作时，更加方便。 2.通用性 JQuery对象和js对象方法不通用的. 3.转化 1. jq – > js : jq对
轻松掌握 jQuery 基础
不迁怒，不贰过。小知识，大智慧。
11-15 1238
jQuery是一个优秀的JavaScript框架，它能帮助用户更方便的处理HTML文件、事件、动画效果、AJAX交互等。它的出现极大程度地改变了开发者使用JavaScript的习惯。
JQuery基础事件
FirMoveBrick的博客
08-04 4436
简介 但是毕竟08年的还是php页面的时候，前端的点击事件，基本都是后端在写的，所以13年的时候就用到了以前最火的 jquery ，我为了融入他们的氛围，我不得不用 jquery 写点击事件. 下面，让我们直接进入主题吧！ 简单的点击事件 jq
语法篇JQuery基础
qq_62377885的博客
06-11 1369
jQuery是一个快速、简洁的JavaScript框架，它是John Resig在2006年创建的一个开源项目。它封装了JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式，优化了HTML文档操作、事件处理、动画设计和Ajax交互。它的设计宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
jQuery基础知识汇总
z2431435的博客
08-25 2162
jQuery是一个快速、简洁的JavaScript框架。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jquery基础教程中文版2015
06-26
**jQuery基础教程中文版2015** jQuery是一款强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。2015年发布的这个基础教程，旨在帮助初学者快速掌握jQuery的核心概念和技术。 一、...
jQuery基础文件
03-30
此“jQuery基础文件”压缩包包含了jQuery的三个主要版本：1.11.3，2.1.4和3.3.1。每个版本都有其特定的发布日期和功能特性，适合不同项目的需求。 1. jQuery 1.11.3： 这是jQuery 1.x系列的一个稳定版本，主要支持...
jQuery基础教程jQuery选择器教程pdf版最新版本
11-24
这本“jQuery基础教程及jQuery选择器教程pdf版最新版本”不仅能够帮助新手理解jQuery的基本概念和框架结构，而且能够深入探讨选择器的使用方法和技巧。通过阅读这份教程，新手可以快速掌握如何利用jQuery选择器进行...
国芯思辰| 国产四通道24位生理电采集模拟前端AFE全面替换ADS1294R，心电贴性能再飞跃
weixin_38427020的博客
05-29 647
国芯思辰，国产芯片替代
vue组件和插件的区别
u014642921的博客
05-28 491
只要有install方法并且接受Vue构造函数作为参数，就能够被Vue.use使用。可以是第三方库，也可以是自己编写的组件。
el-table-column如何获取行数据的值
LoveYouQueena的博客
05-29 601
一旦你获取到了当前行的数据，就可以根据需要进行后续的操作或展示，比如删除、编辑当前行的数据等。的模板中定义一个按钮，并为该按钮添加一个点击事件处理器。在Vue 2.x中，你可以使用。属性（在Vue 3.x中）来获取当前行的数据。点击事件处理器会接收到一个参数（在Vue 2.x中是。如果你使用的是Vue 3.x，代码将略有不同，主要是将。中获取当前行的数据，并通过点击事件处理器进行后续操作。在Vue 3.x中，则使用。），该参数包含了当前行的数据。属性（在Vue 2.x中）或者。，在Vue 3.x中也是。
优雅草最新实战项目技术Discuz X3.5电子签约插件开发项目实施方案优雅草·卓伊凡
一颗优雅草科技-央千澈的优快云博客~只想无穷无尽的学习~作息早8-晚8
05-27 1436
优雅草科技将为DiscuzX3.5系统开发电子签约插件，预算9,300元，工期35天。项目采用PHP7.4+e签宝SDK技术栈，实现合同发起、签署、模板管理等功能。包含UI设计、前端开发（响应式页面）、后端插件开发及文档培训。技术方案重点包括：集成e签宝API，新建签约记录数据表，开发后台管理界面，并确保与Discuz原生系统无缝集成。项目采用模块化开发，优先保障核心签约流程，提供3个月维护期。
网易 - 灵犀办公文档
最新发布
葡萄城技术团队博客
05-30 458
网易 - 灵犀办公文档
jQuery基础指南
"这是一本关于jQuery的袖珍参考手册，由David Flanagan编写，旨在帮助读者快速理解和掌握jQuery基础。该书由O'Reilly Media出版，适合教育、商业或促销用途。" jQuery是一种广泛使用的JavaScript库，它简化了网页的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值