函数

2.1 size()方法和length属性

2.2 jQuery全面支持css2.1的选择器

2.3 jQuery全面支持css3的选择器

2.4 jQuery自己发明的伪类

2.5 ()函数和jQuery函数等价

2.6 ()函数得到的是jQuery对象

2.7 关于引号

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * $() 函数
     * 1. jq 是批量处理的，jq函数的结果是一个 jq 对象
     * 说明：
     * a.在创建变量保存 jq 对象的时候，约定习惯使用 $ 做前缀，表示对象为 jq 对象而不是 js 对象
     * b.jq 对象和 js 对象不是同一种类型，因此两者所拥有的方法不能混合使用
     */
    var $div = $('div');
    console.log($div);
    console.log(typeof $div)
</script>
</body>
</html>

mark

size()方法和length属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<div class="div3"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * $() 函数
     * 1. jq 是批量处理的，jq函数的结果是一个 jq 对象
     * 说明：
     * a.在创建变量保存 jq 对象的时候，约定习惯使用 $ 做前缀，表示对象为 jq 对象而不是 js 对象
     * b.jq 对象和 js 对象不是同一种类型，因此两者所拥有的方法不能混合使用
     * c.jq 中提供了 size() 方法和 length 属性，用来获取 jq 对象中包含的页面元素个数
     */
    var $div = $('div');
    console.log($div.size());
    console.log($div.length)
</script>
</body>
</html>

全面支持css2.1和css3的选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * $() 函数
     * 2. $ 函数在对页面元素的选择上具有非常灵活的写法
     * 说明：
     * a.$() 函数全面支持 css2.1 之前的所有选择器写法
     * b.$() 函数全面支持 css3 中的所有选择器写法
     * c.$() 函数在选中页面元素的时候不存在兼容性的问题
     */
    // 空格和+都被称为关系选择器
    // 空格表示：包含关系
    // + 表示：相连关系，表示读取 div1 选择器后面紧挨着它的div2 选择器
    // 下面的例子：是证明选择器的写法是支持的
    var $div2 = $('.div1+.div2');
    console.log($div2);
</script>
</body>
</html>

mark

自己发明的伪类

jQuery自己发明的【伪类】

其实这里我个人觉得更精准的说法应该是jq自己发明的【筛选器】。

因为他们的作用是能够从指定元素集合中【筛选】出想要的元素。

jq中自创的筛选器有七种：

选择器:first 选中指定元素集合中的第一个元素

选择器:last 选中指定元素集合中的最后一个元素

选择器:eq(n) 选中指定元素集合中从0开始，第n个元素

选择器:lt(n) 选中指定元素集合中从0开始，第n个元素之前的所有元素

选择器:gt(n) 选中指定元素集合中从0开始，第n个元素之后的所有元素

选择器:odd 选中指定元素集合中从0开始，所有奇数序号的元素

选择器:even 选中指定元素集合中从0开始，所有偶数序号的元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
    <style>
        .div1{  width: 50px; height: 50px; background-color: orange;
            margin: 10px;  }
    </style>
</head>
<body>
<div class="div1">div0</div>
<div class="div1">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
<div class="div1">div4</div>
<div class="div1">div5</div>
<div class="div1">div6</div>
<div class="div1">div7</div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
	
    // 选中所有div
    var $div = $('div');
    console.log($div);
    $('div').css('background-color','red');
</script>
</body>
</html>

选择器:first

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
    <style>
        .div1{  width: 50px; height: 50px; background-color: orange;
            margin: 10px;  }
    </style>
</head>
<body>
<div class="div1">div0</div>
<div class="div1">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
<div class="div1">div4</div>
<div class="div1">div5</div>
<div class="div1">div6</div>
<div class="div1">div7</div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
	
	// 选择器:first  选中指定元素集合中的第一个元素
    $('div:first').css('background-color','red');
</script>
</body>
</html>

mark

选择器:last

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
    <style>
        .div1{  width: 50px; height: 50px; background-color: orange;
            margin: 10px;  }
    </style>
</head>
<body>
<div class="div1">div0</div>
<div class="div1">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
<div class="div1">div4</div>
<div class="div1">div5</div>
<div class="div1">div6</div>
<div class="div1">div7</div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    // 选择器:last  选中指定元素集合中的最后一个元素
    $('div:last').css('background-color','red');
</script>
</body>
</html>

mark

选择器:eq(n)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
    <style>
        .div1{  width: 50px; height: 50px; background-color: orange;
            margin: 10px;  }
    </style>
</head>
<body>
<div class="div1">div0</div>
<div class="div1">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
<div class="div1">div4</div>
<div class="div1">div5</div>
<div class="div1">div6</div>
<div class="div1">div7</div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
	// 下标为 3 的元素
    $('div:eq(3)').css('background-color','red');
    // 另一种写法
    //$('div').eq(3).css('background-color','red');
</script>
</body>
</html>

mark

选择器:lt(n)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
    <style>
        .div1{  width: 50px; height: 50px; background-color: orange;
            margin: 10px;  }
    </style>
</head>
<body>
<div class="div1">div0</div>
<div class="div1">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
<div class="div1">div4</div>
<div class="div1">div5</div>
<div class="div1">div6</div>
<div class="div1">div7</div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    // 小于下标为 4 的元素
    $('div:lt(4)').css('background-color','red');
</script>
</body>
</html>

mark

选择器:gt(n)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
    <style>
        .div1{  width: 50px; height: 50px; background-color: orange;
            margin: 10px;  }
    </style>
</head>
<body>
<div class="div1">div0</div>
<div class="div1">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
<div class="div1">div4</div>
<div class="div1">div5</div>
<div class="div1">div6</div>
<div class="div1">div7</div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    // 大于下标为 4 的元素
    $('div:gt(4)').css('background-color','red');
</script>
</body>
</html>

mark

选择器:odd

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
    <style>
        .div1{  width: 50px; height: 50px; background-color: orange;
            margin: 10px;  }
    </style>
</head>
<body>
<div class="div1">div0</div>
<div class="div1">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
<div class="div1">div4</div>
<div class="div1">div5</div>
<div class="div1">div6</div>
<div class="div1">div7</div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    // 下标为奇数的触发
    $('div:odd').css('background-color','red');
</script>
</body>
</html>

mark

选择器:even

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
    <style>
        .div1{  width: 50px; height: 50px; background-color: orange;
            margin: 10px;  }
    </style>
</head>
<body>
<div class="div1">div0</div>
<div class="div1">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
<div class="div1">div4</div>
<div class="div1">div5</div>
<div class="div1">div6</div>
<div class="div1">div7</div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    // 下标为偶数的触发
    $('div:even').css('background-color','red');
</script>
</body>
</html>

mark

实例：表格奇数行颜色加深

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
</head>
<body>
<table border="1" cellapacing="0" align="center" width="600px">
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
</table>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    // jq 批量的，所以可以一次选择多个
    // 下标为奇数的触发
    $('tr:odd').css('background-color','darkgray');
</script>
</body>
</html>

$()函数和jQuery函数等价

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
</head>
<body>
<table border="1" cellapacing="0" align="center" width="600px">
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
    <tr><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td><td>111</td></tr>
</table>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * $() 和 jQuery() 的关系
     * 说明：在 jq 框架中 $() 完全等价于 jQuery() 函数，两者作用相同，只是写法不同而已。
     * 原因：
     * a.简操作
     * b.避免冲突
     */
    jQuery('tr:odd').css('background-color','darkgray');
</script>
</body>
</html>

$ ()函数得到的是jQuery对象

jq 方法返回值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
</head>
<body>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * $() 和 jQuery() 的关系
     * $() 函数的执行结果会返回一个 jq 对象
     * 说明：jq 对象是一个集合对象，和 js 中的 "对象" 不是一个东西
     */
    // js中规定函数都会有一个执行结果，或者说是返回值。
    // 如果函数没有返回值，会默认设置为 undefined
    function func(){}
    var result = func();
    console.log(result);
</script>
</body>
</html>

jq对象仅能够调用jq中设定的属性和方法，对于原生js的属性和方法都无法调用
jq对象可以在必要的时候转换为js原生对象。
1. jq对象可以通过【jq对象[n]】方式转换为js原生对象
  
  var p = $(“p”)[0];
2. jq对象可以通过【.get(n)】方式转换为js原生对象
  
  var p = $(“p”).get(0);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
</head>
<body>
<span>123</span>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * $() 和 jQuery() 的关系
     * 说明：jq 对象因为和 js 对象不同，因此 js 的方法对 jq 无效 反之。。
     */
    console.log($('span'));
</script>
</body>
</html>

jq 转换为 js

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson2</title>
</head>
<body>
<span>123</span>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * 补充：
     * 可以通过 jq 对象后【添加中括号】或调用【get(n)】方法，将 jq 对象装换为 js 对象。
     */
    // 方式1： var span = $('span')[0];
    // 方式 2：
    var span = $('span').get(0);
    console.log(span);
</script>
</body>
</html>

mark

关于引号

前面提到过$()在选择元素的时候括号中先写引号，但是存在获取某些对象的时候不需要加引号的特例：

$(window)
$(document)
$(this)