zoukankan      html  css  js  c++  java
  • JQuery

    JQuery

    JQuery和JS没有什么本质区别

    JQuery可以看成JS的升级版本,这两者可以混着使用

    引用JQuery文件

    <script src="jquery-3.2.1.min.js"></script>

    $符号代表选择器

    <script type="text/javascript">
        $(document).ready(function(e){    //给当前页面一个页面加载完成事件
              
                //页面加载完成之后执行
           
          })
    </script>

    JS与JQuery的对比

    JS

    //找元素,DOM对象
            var a = document.getElementById("aa");
            alert(a);
            
            var a = document.getElementsByClassName("aa");
            alert(a[1]);
            
            var a = document.getElementsByTagName("div");
            
            var a = document.getElementsByName("uid");
            alert(a[0]);
            
    //操作内容
            a.innerHTML //操作元素里面的html代码
            a.innerTEXT //操作元素里面的文本
            
            a.value //操作表单元素的值
            
    //操作属性
            a.setAttribute("",""); //设置
            a.removeAttribute(""); //移除
            a.getAttribute(""); //获取
            
    //操作样式
            a.style.backgroudColor = "red";

    JQuery

    //找元素,Jquery对象
            var b = $("#aa"); //根据ID找
            alert(b[0]);   //取索引0可以找到DOM对象
            
            var b = $(".aa"); //根据class找
            alert(b[1]); //找到的是DOM对象
            alert(b.eq(1)); //找到的是Jquery对象
            
            var b = $("div"); //根据标签名找
            alert(b[0]);
            
            var b = $("[id='aa']"); //根据属性找
            alert(b[0]);
            
    //操作内容
                //非表单元素
                b.html(); //操作元素里面的HTML代码
                b.text(); //操作元素里面的文本
                
                //表单元素
                b.val("hello");
                
    //操作属性
                //设置属性
                b.attr("bs","test");
                //获取属性
                alert(b.attr("aa"));
                //移除属性
                b.removeAttr("aa");
                
                b.prop("checked",false);
                
    //操作样式,可以获取内嵌的样式
            b.css("background-color","red");
            alert(b.css("width"));
            alert(b.css("background-color"));
  • 相关阅读:
    layDate 只显示 小时&分钟
    获取从今天以后一周的日期列表
    Laravel_$rules参数规则
    Layui——分步表单
    XML命名空间详解
    centos7搭建svn服务器
    jvm原理
    动态代理与反射
    java之JUC
    实现从数据库加载数据并返回easyui-tree所需要数据
  • 原文地址:https://www.cnblogs.com/Whitehat/p/8596058.html
Copyright © 2011-2022 走看看