什么是jquery?

jquery是轻量级的js框架
写的少做的多
封装js常用的代码,及拿即用
优化html文档,事件处理,动画设计和Ajax交互

官网

www.jquery.com

理念

用更少的代码,实现更多的功能

成就

全世界排名前100的网站,46%的的网站都在用

微软把其作为他们的官方库

引入jQuery

使用在线引入

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

本地引入

<script src="js/jquery.js"></script>

jquery里面使用css选择器

$(document)选择整个文档对象
$('#myId')选择id为myid的网页元素
$('div.myclass')选择class为没有class的div元素

jQuery的特有表达式

$('a:first')选择网页中的第一个a元素
$('tr:odd')选择表格中的基数行
$('div:visible')选择可见的div元素

方法函数化

window.onload==>$()
innerhtml==>html()
onlick==click()

原声js 和jQuery的关系

原生js,jq可以共存但是不能混用

强大的过滤器

$(div).has('p')==>包含p元素的div元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <style>
    div {width: 200px;
    height: 200px;
    border:red 2px solid;
   
    }
    </style>
</head>
<body>
    <div class="div0"><p></p></div>
    <div class="div01"></div>
    <div class="div02"></div>
    <div class="div03"></div>
</body>
<script>
    $(function(){
        $("div")
        .has("p")
        .css("border","1px solid green")
    });

</script>
</html>

$('div').not('.myClass')==>class 不等于myClass的div元素

<script>
    $(function(){
        $("div")
        .not(".div33")
        .css("border","5px solid green")
    });

</script>

$('div').filter('.myClass')==>选择class等于myClass的div元素

<script>
    $(function(){
        $("div")
        .filter(".div2")
        .css("border","5px solid green")
    });

</script>

查找相邻元素

$('div').next('p')==>选择div元素后面的第一个p元素

<body>   
    <div><p>4</p></div>
    <div><p>4</p></div>
    <div><p>4</p></div>
    <div><p>4</p></div>
    <p>你好</p>
    <p>你好</p>
</body>
<script>
    $(function(){
        $("div")
        .next("p")
        .css("background", "green")
    });

</script>

next可以没有参数

<body>   
    <div>
        <p>4</p>
        <p>4</p>
        <p>4</p>
        <p>4</p>
    
    </div>
    
    <p>你好</p>
    <p>你好</p>
</body>
<script>
    $(function(){
        $("div")
        .next()
        .css("background", "green")
    });

</script>

$('div').parent();==>选择div元素的父元素

<script>
    $(function(){
        $("div")
        .parent()
        .css("background", "green")
    });

</script>

$('div').children()==>选择div元素的所有子元素

<script>
    $(function(){
        $("div")
        .children()
        .css("background", "green")
    });

</script>

链式操作

$('div').find('h3').eq(2).html('hello')

分解

找到div
选择其中的h3
选择第三个h3

把内容改成hello

<script>
    $(function(){
        $("div")
        .find('h1')
        .eq(2)//下标第二个
        .html('改成我了')
    });

</script>

jq提供了end()方法,使得结果可以后退一步

   <script>
        $(function() {
            $("div")
                .find("h3")
                .eq(6)
                .css("background", "red")    
        });
    </script>

可以两次

   <script>
        $(function() {
            $("div")
                .find("h3")
                .eq(6)
                .css("background", "red")
                
                .end()
                .eq(0)
                .css('background','red')   
        });
    </script>

jQuery入门01