zoukankan      html  css  js  c++  java
  • 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>
    

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

  • 相关阅读:
    深入理解RunLoop
    Universal Framework for iOS
    Framework的制作流程,Xode-6.0.1
    Xcode 6制作动态及静态Framework
    Volley与Picasso的对比
    WebView全面学习(二)-- Native与js双方通信
    WebView全面学习(一)--常用类和方法
    Hybrid框架安全隐患分析
    Android笔记--View绘制流程源码分析(二)
    Android笔记--View绘制流程源码分析(一)
  • 原文地址:https://www.cnblogs.com/xiaohaihuaihuai/p/8352039.html
Copyright © 2011-2022 走看看