jquery基本语法（一）

https://www.cnblogs.com/haiyan123/p/7657151.html

一、jQuery基础
1.为什么要用jquery？
    写起来简单，省事，开发效率高，兼容性好
2、什么是jQuery?
    jQuery是一个兼容多浏览器的JavaScript库（类似python里面的模块）
3、如何使用jQuery？
    1、导入 <script src="jquery-3.2.1.js"></script>
           或者<script src="jquery-3.2.1.min.js"></script>
    2、语法规则：$("")
4、JS和jQuery的区别？
    jQuery就是用JS写的
    js是基础，jQuery是工具
5、jQuery介绍
    - 版本
      - 1.x
         兼容IE8。。。
      - 3.x
         最新
   - .min.xx
      压缩的：生产环境用
   - 没有压缩的（没有.min.xx）：开发用
6、 jQuery知识点
    　　html:裸体的人
    　　css:穿了衣服的人
   　　 JS：让人动起来
7、选择器：
   1、基本选择器
        - ID选择器                  $("#id的值")
        - 类选择器（class）          $(".class的值")
        - 标签选择器(html标签)       $("标签的名字")
        - 所有标签                  $("*")

        - 组合选择器                $("xx,xxx")
   2、层级选择器
        - 从一个标签的子子孙孙去找    $("父亲子子孙孙")
        - 从一个标签的儿子里面找      $("父亲>儿子标签")
        - 找紧挨着的标签             $("标签+下面紧挨着的那个标签")
        - 找后面所有同级的           $("标签~兄弟")

8、jQuery对象：
        - 用jQuery选择器查出来的就是jQuery对象
        - jQuery对象，他就可以使用jQuery方法，不能使用DOM的方法

        - DOM对象和jQuery对象转换：
            - $(".c1")[0] --> DOM对象
            - $(DOM对象)

jquery基本语法（一）

9、筛选器
        - 写在引号里面的
            基本筛选器
            　　$(" :first")   找第一个
　　$(" :not('')") 不是/非
            　　$("#i1>input":not('.c1,.c2'))
            　　$(" :even")     偶数
            　　$(" :odd")      奇数
            　　$(" :eq(index)")       找等于index的
            　　$(" :gt(index)")       找大于index的
            　　$(" :lt(index)")       找小于index的
            　　$(" :last")     最后一个
            　　$(" :focus")    焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>hello</div>

<a href="">click</a>

<p id="p1" alex="sb">pppp</p>
<p id="p2" alex="sb">pppp</p>
<div class="outer">outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>
    <p>alex</p>
</div>
<div class="outer2">Yuan</div>
<p>xialv</p>

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>4444</li>
    <li>4444</li>
    <li>4444</li>
</ul>

<input type="text">
<input type="checkbox">
<input type="submit">

<script src="jquery-3.1.1.js"></script>
<script>
    //基本选择器
    //$("div").css("color","red")
    //$("*").css("color","red")
    //$("#p1").css("color","red")

    //$(".outer").css("color","red")

    // $(".inner,p,div").css("color","red")


    //层级选择器

    //$(".outer p").css("color","red")
    //$(".outer>p").css("color","red")
    //$(".outer+p").css("color","red")
    //$(".outer~p").css("color","red")

    //基本筛选器

    //$("li:first").css("color","red")
   // $("li:eq(0)").css("color","red")
    //$("li:gt(2)").css("color","red")
    //$("li:lt(2)").css("color","red")

    //属性选择器
    // $("[alex='sb'][id='p1']").css("color","red")

    //表单选择器
     //$("[type='text']").css("width","200px")
     //$(":text").css("width","400px")

</script>
</body>
</html>

选择器