jquery（1）

//第一种写法
$(document).ready(function() {
    
});
//第二种写法
$(function() {
    
});

<script>
  //1.$是什么?
  //如果报了这个错误:$ is not defined,就说明没有引入jQuery文件.
  // $(function () {
  //
  // });


  //2.jQuery文件结构.
  //其实是一个自执行函数.
  // (function(){
  //   window.jQuery = window.$ = jQuery;
  // }());


  //3.
  //a.引入一个js文件,是会执行这js文件中的代码的.
  //console.log(num);//10
  //b.jQuery文件是一个自执行函数,执行这个jQUERY文件中的代码,其实就是执行这个自执行函数.
  //c.这个自执行文件就是给window对象添加一个jQuery属性和$属性.
  //console.log(window);
  //d.$其实和jQuery是等价的,是一个函数.

  // console.log(window.jQuery === window.$);//true
  // console.log(Object.prototype.toString.call($));//'[object Function]'


  //4.$是一个函数
  //参数传递不同,效果也不一样.
  //4.1 如果参数传递的是一个匿名函数-入口函数
  // $(function(){
  // });

  //4.2 如果参数传递的是一个字符串-选择器/创建一个标签
  //$('#one');
  //$('<div>啦啦,我是一个div</div>');

  //4.3 如果参数是一个dom对象,那他就会把dom对象转换成jQuery对象.
  //$(dom对象);

</script>

var $li = $("li");
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)

基本选择器
名称    用法    描述
ID选择器    $(“#id”);    获取指定ID的元素
类选择器    $(“.class”);    获取同一类class的元素
标签选择器    $(“div”);    获取同一类标签的所有元素
并集选择器    $(“div,p,li”);    使用逗号分隔，只要符合条件之一就可。
交集选择器    $(“div.redClass”);    获取class为redClass的div元素
总结：跟css的选择器用法一模一样。

层级选择器
名称    用法    描述
子代选择器    $(“ul>li”);    使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器    $(“ul li”);    使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
总结：跟css的选择器用法一模一样。

过滤选择器
名称    用法    描述
:eq（index）    $(“li:eq(2)”).css(“color”, ”red”);    获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd    $(“li:odd”).css(“color”, ”red”);    获取到的li元素中，选择索引号为奇数的元素
:even    $(“li:even”).css(“color”, ”red”);    获取到的li元素中，选择索引号为偶数的元素

名称    用法    描述
children(selector)    $(“ul”).children(“li”)    相当于$(“ul>li”)，子类选择器
find(selector)    $(“ul”).find(“li”);    相当于$(“ul li”),后代选择器
siblings(selector)    $(“#first”).siblings(“li”);    查找兄弟节点，不包括自己本身。
parent()    $(“#first”).parent();    查找父亲
eq(index)    $(“li”).eq(2);    相当于$(“li:eq(2)”),index从0开始
next()    $(“li”).next()    找下一个兄弟
prev()    $(“li”).prev()    找上一次兄弟
总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。