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"));