JQuery基础知识和方法

一、jquery基础知识

　　什么是jquery，jquery是javascript框架库的一种，而javascript框架库又是什么呢？javascript框架库就是一个javascript文件，里面封装了大量的函数，或者说封装了很多兼容性的代码，可以执行和应用。

　　而jquery就是一种常见的javascript框架库，是对javascript的封装，目的是为了简化js代码的应用。

二、JQuery与DOM的区别与转换

　　用一个简单的点击事件来列举两者之间的区别，代码如下：

　　两者实现的效果一致，其中使用jquery对代码进行了精简，使页面整洁干净。

<body>
    <div id="btn">
        <input type="button"  value="点击出现一个块" >
    </div>
    <div  id="aa"></div>
</body>
<script src="jquery.min.js"></script>
<script>
    //原生的js代码。添加一个点击事件
    window.onload=function(){
        document.getElementById("btn").onclick=function(){
            var data = document.getElementById("aa");
            data.style.width = "100px";
            data.style.height = "100px";
            data.style.background ="blue";
        }
    }
    //js封装的jquery的代码。注意，当使用$符号来编写js的时候，必须 引用jquery文件。
    $(function(){
        $("#btn").click(function(){
            $("#aa").css({"width":"200px","height":"200px","background":"red"})
        })
    })
</script>
</html>

三、JQuery方法的总结

jquery的方法

.val(” ") -----> 内容为空，表示获取属性value的值。填写内容，则表示赋予其value值。

.css( ) -------> 赋予其css样式，或者替换原有的css样式，其中有两个参数，第一个为属性，第二个为值，

　　表现形式为： .css("width","200px")

　　或者通过键值对的方式： .css({"width":"200px","height":"100px"})

.html() ------> 设置标签中间显示其他标签及内容，类似于innerHTML

.text() ------->设置标签中间显示的文本内容，类似于innerText

.show() -------〉表示让该元素显示，其中show里面可以加数字，表示多久显示完整，以毫秒为单位。1000

.hide() -------〉表示让该元素隐藏，

.siblings(" ")-------〉获取除该元素以外的所有兄弟元素，来调整样式。

.index() ---------〉获取当前元素的索引值，

.find() -------〉针对当前元素，找里面的其他兄弟元素。

.click((function(){ }); -------->当鼠标点击时，给它一个功能

.mouseover(function(){ })；------> 当鼠标移入时，给它添加一个效果

.mouseout(function(){ })；--------> 当鼠标移出时，给它添加一个效果

JQuery基础知识和方法

猜你喜欢