jquery-基础

一 jq入门

1.1 JS与JQ页面加载区别

<script>
            window.onload = function(){
                alert("张三");
            }
            
            //传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)
            window.onload = function(){
                alert("老王");
            }
            
            //JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)
            jQuery(document).ready(function(){
                alert("李四");
            });
            
            //JQ不存在覆盖问题，加载的时候是顺序执行
            $(document).ready(function(){
                alert("王五");
            });
            
            //简写方式
            $(function(){
                alert("汾九");
            });
            
        </script>

1.2 js和jq的获取

    <script>
            $(function(){
                //1.JS方式获取
                /*document.getElementById("btn").onclick= function(){
                    location.href="惊喜.html";
                }*/
                
                //2.JQ方式获取=====>>>$("#btn")
                $("#btn").click(function(){
                    location.href="惊喜.html"
                });
            });
        </script>

二 DOM对象和JQ对象的转换

2.1 dom和jq对象

js
//1.JS的DOM操作
                //document.getElementById("span1").innerHTML="萌萌哒！";
                //DOM对象无法操作JQ对象里面属性和方法
                //document.getElementById("span1").html("萌萌哒！");

jq
$("#btn").click(function(){
                    //JQ对象无法操作JS里面的属性和方法！！！
                    //$("#span1").innerHTML="呵呵哒！"
                    $("#span1").html("呵呵哒！");