初识jQuery

一、jQuery简介

　　jQuery是对JavaScript的封装，简化了JS代码，是主流框架的基础(VUE,EasyUI,Bootstrap)  它是2006年推出的

二、JQuery的优势：

　　体积小，压缩后只有100KB左右
　　强大的选择器
　　出色的DOM封装
　　可靠的事件处理机制
　　出色的浏览器兼容性
　　使用隐式迭代简化编程
　　丰富的插件支持

三、引入Jquery库

<script src="js/jquery-3.4.1.js" type="text/javascript"></script>

四、JQuery加载页面触发

<script type="text/javascript">
            /*js代码*/
            window.onload=function(){
                alert('js加载一');
            };
            /*jquery代码*/
            $(document).ready(function(){
                alert('Jquery加载一');
            });
            jQuery(document).ready(function(){
                alert('Jquery加载二');
            });
            /*对Jquery加载上面两种方式的简写*/
            $(function(){
                alert('Jquery加载三');
            });
        </script>

五、window.onload和$(document).ready区别：
　　　　window.onload只能有一个，没有简写方式，必须等待页面所有资源加载完毕之后才能触发
　　　　$(document).ready可有多个，简介为$(function(){//代码})，等待页面上所有文档结构（html标签）记载完后触发
六、JQuery设置样式：

<script type="text/javascript">
            /*操作样式addClass()方法*/
            $(function(){
                //其实上就是动态的给标签加了一个class属性
                /* $("#whtdiv").addClass("wht"); */
                //单个设置css
                /* $("#lldiv").css("color","yellow");
                //设置多个
                $("#lldiv").css({"border":"1px solid blue","background-color":"pink"});
                //链式方式
                $("#whtdiv").css("color","green").css("border","1px solid blue"); */
                
                //下一个元素
                $("#whtdiv").css("color","green").next().css("color","pink").next().css("color","orange");
                
            });
            
        </script>

七、JQuery常用方法和事件：详情请见W3C

$(function(){
            /*给显示图片按钮注册一个click事件*/
            $("#show").click(function(){
                $("#imgs").slideDown(3000);
            });
            $("#hide").click(function(){
                $("#imgs").slideUp(3000);
            });
        });
        ----------------------------------------
        $(function(){
            $("li").mouseover(function(){
                //不能用$("li")
                $(this).css("color","blue");
            }).mouseout(function(){
                $(this).css("color","black");
            });
            
        });

八、JQuery对象和Dom对象的相互转换

<script type="text/javascript">
            $(function(){
                /*js获取dom对象*/
                /* var dom=document.getElementById("wht5"); */
                /* alert(dom.innerHTML); */
                /* alert(dom.innerText); */
                /* 获取value属性值*/
                /* alert(dom.value); */
                
                
                /*jquery对象*/
                /* var $jdom=$("#wht5"); */
                /* alert(jdom.html()); */
                /* alert(jdom.text()); */
                /* 一般用于表单*/
                /* alert($jdom.val()); */
                
                /*Dom对象转换Jquery对象*/
                var dom=document.getElementById("wht");
                var $jdom=$(dom);
                $jdom.html();
                
                
                /*jquery转dom对象*/
                var $jdom=$("#wht5");
                var dom=$jdom[0];
                /* var dom=$jdom.get(0); */
                alert(dom.value);
            }); 
        </script>

九、总结

 

posted on 2019-06-12 15:20 关耳er 阅读(…) 评论(…) 编辑 收藏
版权声明：本文为Zzzzn原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Zzzzn/p/11009867.html