• jquery基础


    ---恢复内容开始---

    使用jQuery要引用jQuery文件

    <head></head>写在头里

    <body>
        <div></div>
        <span id="aa"></span>
        <p class="bb"></p>
        <input  type="button" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
        var a = document.getElementById("aa");//根据id获取
        var a = document.getElementsByClassName("bb");//根据class获取
        var a = document.getElementsByName("cc");//表单元素根据name获取
        var a = document.getElementsByTagName("div");//根据标签名查找
    </script>
    

     jQuery中获取元素

    <body>
        <div>
            <a id="dd"></a>
        </div>
        <span id="aa"></span>
        <p class="bb"></p>
        <input  type="button" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
        var a = $("#aa");//根据id找
        var a = $(".bb");//根据class找  class找到的是数组所以可以取索引
        alert(a[0]);
        alert(a[1]);
        var a = $("div");//根据标签名查找 找到的是数组所以可以取索引
        alert(a[1]);
        var a = $("[name='cc']");//根据属性查找
        var a = $("[id='aa']");//根据属性查找
        var a = $("div").children("#dd");//取子类
    </script>
    

    二、操作内容

    js操作内容

    <body>
        <div>
            <a id="dd"></a>
        </div>
        <span id="aa"><a>你好大家</a></span>
        <div class="bb"><p>大家好</p></div>
        <input  type="button" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
        var a = document.getElementById("aa");
        var b = document.getElementsByClassName("bb");
        var c = document.getElementsByName("cc");
        a.innerHTML = "<p>你好大家</p>"//修改代码和文字
        b.innerText //修改文字信息
        c.value//修改表单元素的value值
    </script>
    

     jQuery操作内容

    <body>
        <div>
            <a id="dd"></a>
        </div>
        <span id="aa"><a>你好大家</a></span>
        <div class="bb"><p>大家好</p></div>
        <input  type="button" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
        var a = $("#aa");
        var b = $(".bb");
        var c = $("[name='cc']");
        a.html("<p>你好大家</p>")//修改代码和文字//取值()为空
        b.text("hao")//修改文字信息     取值()为空
        c.val("hello")//修改表单VALUE  
    </script>
    

    三 操作属性

    js操作属性

    <body>
        <div>
            <a id="dd"></a>
        </div>
        <span id="aa"><a>你好大家</a></span>
        <div class="bb"><p>大家好</p></div>
        <input  type="button" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
        var a = document.getElementById("aa");
        var b = document.getElementsByClassName("bb");
        var c = document.getElementsByName("cc");
        a.setAttribute("","")//设置属性
        a.removeAttribute("")//移出属性
        a.getAttribute("")//获取属性
    </script>
    

     jquery操作属性

    <body>
        <div>
            <a id="dd"></a>
        </div>
        <span id="aa"><a>你好大家</a></span>
        <div class="bb"><p>大家好</p></div>
        <input  type="checkbox" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
        var a = $("#aa");
        var b = $(".bb");
        var c = $("[name='cc']");
        a.attr("","")//设置属性
        a.removeAttr("aa")//移出属性
        a.attr("aa")//获取属性
        c.prop("checked",true)//true是选中,false是不选中
    </script>
    

     四、操作样式

    js操作样式:只操作内联样式

    <body>
        <div>
            <a id="dd"></a>
        </div>
        <span id="aa" style="background-color:#0FF; 20px; height:30px;"><a>你好大家</a></span>
        <div class="bb"><p>大家好</p></div>
        <input  type="button" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
        var a = document.getElementById("aa");
        var b = document.getElementsByClassName("bb");
        var c = document.getElementsByName("cc");
        a.style.backgroundColor = "red"//修改背景色
    </script>
    

    jQuery操作样式:可以操作内嵌样式

    <body>
        <div>
            <a id="dd"></a>
        </div>
        <span id="aa"><a>你好大家</a></span>
        <div class="bb" ><p>大家好</p></div>
        <input  type="checkbox" name="cc" value="ff"/>
    </body>
    <script type="text/javascript">
        var a = $("#aa");
        var b = $(".bb");
        var c = $("[name='cc']");
        a.css("","")//设置css样式
        a.css("width")//获取css样式
        b.eq(0).addClass("")//增加class数组中索引为0的样式
        b.addClass("")//增加样式
        a.removeClass("")//移出样式
    </script>
    

    ---恢复内容结束---

  • 相关阅读:
    python实用技巧总结(二)
    python实用技巧总结(一)
    windows下tensorflow/objectdetection API(SSD)环境搭建(基于tensorflow1.14和python3.6)
    理解Python函数和方法
    理解迭代器和可迭代对象
    Anaconda安装报错
    Windows下命令行Git无法显示中文问题解决方案
    web服务器/HTTP协议基础
    Unity3D第三人称摄像机
    Ubuntu 18.04 安装 mysql
  • 原文地址:https://www.cnblogs.com/xiaohaihuaihuai/p/8352039.html
Copyright © 2020-2023  润新知