Jquery学习(1)

什么是JQuery?

1. 一个快速、简洁的JavaScript框架
2. 设计的宗旨是"write less,do more"
3. jQuery兼容各种主流浏览器，如IE6.0+、 FF 1.5+ 、 Safari 2.0+ 、Opera 9.0+等

JQuery的好处？

1. 简化JS的复杂操作；
2. 不再需要关心兼容性；
3. 提供大量实用方法

如何学习JQ？

1. https://jquery.com/ JQ的官方网站（查阅中文文档）
2. JQ只是辅助工具，要正确面对
3. 需要分阶段学习

JQuery版本区别

1.0 可以兼容到IE8以下
2.0 只兼容IE8以上
3.0

Jquery设计思想

1)选择网页元素

1. 模拟CSS选择网页元素 https://www.runoob.com/cssref/css-selectors.html
2. 独有表达式选择
3. 多种筛选方法

2)Jquery写法

1. 方法函数化
2. 链式操作
3. 取值赋值合体

3)JQ与JS关系
可以共存，但不能混用

    <script>
        window.onload=function(){
      //#id
       // $("#div1").css("backgroundColor",'red');

       //.class
       // $(".box").css("backgroundColor",'red');

        // tagName
        // $("ul li").css("backgroundColor","blue");

        // name
        // $("[name=hello]").css("backgroundColor","yellow");

        // 表达式的写法
        // $("li:first").css("backgroundColor","red");
        // $("li:last").css("backgroundColor","red");
        // $("li:even").css("backgroundColor","blue");
        // $("li:odd").css("backgroundColor","red");
        // $("li:eq(2)").css("backgroundColor","yellow");

        // 多种方式筛选
        // $("li").eq(2).css("backgroundColor","yellow");
        // $("li.box").css("backgroundColor",'red');
        // $("li").filter(".box").css("backgroundColor","red");

        }
    </script>

    <div id="div1">div</div>
    <input type="text" name='hello'>
    <ul>
        <li class='box'>111</li>
        <li name='hello'>222</li>
        <li>333</li>
        <li class='box'>444</li>
        <li>555</li>
    </ul>

    <script>
        //[注]在JQ中基本上见不到等于号。所有的赋值操作都是函数传参的操作。
        $(function(){
           /*  $("h1").click(function(){
                alert("click");
            })
            $("h1").css("backgroundColor","orange");
            $("h1").mouseover(function(){
                this.style.backgroundColor='red';
            })
            $("h1").mouseout(function(){
                this.style.backgroundColor='blue';
            }) */
            // [注]我们可以通过链式操作对上述操作进行简化
            $("h1").click(function(){
                alert("click");
            }).css("backgroundColor","orange")
            .mouseover(function(){
                this.style.backgroundColor='red';
            }).mouseout(function(){
                this.style.backgroundColor='blue';
            })

            /* innerHTML  value */
           /*  alert($("#div1").html());
            $("#div1").html("<h2>我是h2</h2>"); */

            alert($("input").val());
            $("input").val("world hello");
        })
    </script>

   <h1>hello world</h1>
   <div id='div1'>
       <em>em</em>
       div文本
   </div>
   <input type="text" value="hello world">