初始jQuery

jQuery简介

1、jQuery由美国人Jhon Resig于2006年创建

2、 jQuery是由目前最流行的Javascript程序库，它是对Javascript对象和函数的封装
3、他的设计理念是写最少的代码，做最多的事（write less，do more）

jQuery获取链接：http://jquery.com

jQuery语法

jQuery的语法结构

组成	说明和作用
$()	工厂函数将DOM对象转换为jQuery对象
selector	选择器获取需要操作的DOM元素
action()	方法 jQuery中提供的方法，其中包括绑定事件处理的方法

语法：$(“selector”).action();

jQuery操作页面元素

方法	语法
addClass()	语法：jQuery对象.addClass([class名])；示例：$(" current").addClass(“current”);
css()	语法：设置一个css样式：css(“属性”,“属性值”) 设置多个css样式：css({“属性”：“属性值”，“属性”：“属性值”})
show() hide()	语法：显示：dollar符 (“current”).show() ; 隐藏：$(“current”).hide()
next()	链式操作

$ = jQuery

jQuery链式操作和隐式迭代

链式操作

$(".stripe
tr").mouseover(function(){ 
        $(this).addClass("over");})
$(".stripe
tr").mouseout(function(){ 
        $(this).removeClass("over");
})


但是我们写成了：

$(".stripe
tr").mouseover(function(){ 
            
$(this).addClass("over");}).mouseout(function(){
                
$(this).removeClass("over");})

因为鼠标移入移除都是发生在同一个对象上的，所以我们可以将发生在同一个对象上的动作连起来写，这样子如果有很

多对象并且在他们身上发生了很多动作那么就会节省很多代码

<body>
<ul>
    <li id="frIstLi">HTML</li>
    <li>css</li>
    <li>java</li>
    <li>js</li>
    <li>jQuery</li>
    <li>oop</li>
    <li>api</li>
    <li>mysql</li>
</ul>

<script src="js/jquery-1.8.3.js"></script>
<script>
    $(document).ready(function (){
        $("#frIstLi").css("color","pink").next().css("color","red")
    })
</script>
</body>

隐式迭代

1、在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用,这就叫做隐式迭代
　
2、我想把ul下的每个li都加个样式jquery写法就是:$(“ul li”).addClass(“test”),就是把ul下的每一个li都加了test的样式，我们并没有去取得所有li然后循环加样式
　
3、如果获取的是多元素的值，大部分情况下返回的是第一个元素的值
　
4、each方法：大部分情况下是不需要使用each方法的，因为jquery有隐式迭代的特性，但是如果要对每个元素做不同的处理就要用到each方法了

<ul>
    <li>HTML</li>
    <li>css</li>
    <li>java</li>
    <li>js</li>
    <li>jQuery</li>
    <li>oop</li>
    <li>api</li>
    <li>mysql</li>
</ul>

<script src="js/jquery-1.8.3.js"></script>
<script>
    $(document).ready(function (){
        // $("li").css({"font-wight":"bolder","color":"green"})
        // for (let i = 0; i < $("li").length; i++) {
        //     $("li")[i].click=function (){
        //         for (let j = 0; j < $("li").length; j++) {
        //             $("li")[i].style.color = '';
        //         }
        //         $("li")[i].style.color = 'pink';
        //     }
        // }
        $("li").each(function (){
            $("li").click(function (){
                $("li").css({"font-wight":"bolder","color":"green"})
            })
        })
    })
</script>