zoukankan      html  css  js  c++  java
  • jQuery基础知识

    Javascript中的基本操作:

    <script src="jquery.min.js"></script>
    <style>
    
    #aa
    {
        width:200px;
    }
    
    </style>
    </head>
    
    <body>
    <div id="aa">hello</div>
    <div class="bb">22</div>
    <div class="bb">33</div>
    <div class="bb">44</div>
    <input type="text" name="cc" />
    
    </body>
    <script>
    var d = document.getElementById("aa");//根据ID找元素,找到是具体的DOM对象
    var c = document.getElementsByClassName("bb");
    var div = document.getElementsByTagName("div");
    var input = document.getElementsByName("cc");
    
    
    //操作内容
    //1.非表单元素
    d.innerHTML;//HTML代码    赋值d,innerHTML="";
    d.innerTEXT;//纯文本 
    
    //2.表单元素
    d.value;
    
    
    //操作属性
    d.setAttribute("bs","pp"); //添加属性
    d.getAttribute("bs");  //获取属性
    d.removeAttribute("bs"); //移除属性
    //操作样式
    d.style.color = "red";
    d.style.backgroundColor = "yellow";  //只能获取内联样式表 ,不能获取内嵌样式表和外联样式表

    jQuery中的基本操作:

    <script>
    $(document).ready(function(e) {
        
        //根据ID找元素,找出的是jQuery对象,如果要取DOM对象,取索引为0的元素
        var jd = $("#aa");//根据ID
        //alert(jd);
        var jc = $(".bb");//根据class
        var div = $("div");//根据标签名
        var ip = $("input[name=cc]"); //根据name找,利用属性选择器
        //alert(ip.eq(0)[0]);//取第几个用eq()方法
        for(var i =0;i<jc.length;i++)
        {
            jc.eq(i);//取数组里的第几个jquery对象
        }
        
        //操作内容
        //1.非表单元素
        jd.html();//取值    赋值jd.html("vv");
        jd.text(); 
    
        //2.表单元素
        jd.val();//取值     赋值jd.val("bb");
        
        
        
        //属性操作
        jd.attr("bs","aa");//设置属性
        jd.attr("bs");//获取属性
        jd.removeAttr("bs"); //移除属性
        
        
        
        //操作样式
        jd.css("background-color","#0F0"); //设置样式
        jd.css("width");  //获取样式
        
        //事件设置
        $("#aa").click(function ()  //给一个元素加事件
        {
            alert("aa");
        });
        
        
        $(".bb").click(function ()  //给多个元素加事件,设置同一个class
        {
            alert($(this).text());
        });
        
        $(".bb").css("color","#F00");; //给多个元素设置相同的样式
    });
    </script>
  • 相关阅读:
    Python机器学习-分类
    Python2.x和Python3.x的区别
    cut命令
    uniq 命令
    sort命令
    KMP算法
    Trie树
    做10年Windows程序员与做10年Linux程序员的区别
    c语言内存模型
    C语言的一个关键字——static
  • 原文地址:https://www.cnblogs.com/Itwonderful/p/5489642.html
Copyright © 2011-2022 走看看