JQuery学习笔记一

JQuery选择器：

引入JQuery：<script src="http://code.jquery.com/jquery-3.1.1.js"></script> (注：3.1.1版本)

解释：JQuery选择器是JQuery库中的重要部分之一，支持网页开发者所熟悉的css语法，能够轻松快捷的对页面进行设置，能够高效开发JQuery.
语法格式：$(selector).methodName();
selector:字符串表达式，用于识别DOM中的元素，然后使用JQuery提供的方法集合以设置

多个JQuery操作可以以链的形式串起来：
$(selector).method1().method2.method3();

优势：代码简单支持css1-css3选择器完整的检测机制
可使用使用 $(\'#id\')代替js中的document.getElementById()函数等

JQuery一种书写格式：(在DOM执行完后才会执行以下代码)
$(document).ready(function(){
　　//在此处写JQuery代码
})

与window.onload = function(){

}
效果一样

基本选择器：

1.ID选择器(符号：#)

ID选择器就是#id利用DOM元素的ID来筛选匹配元素，并以JQuery包装的形式返回给对象
公式：$("#id");
实例：$("#box"); 获取id属性名为\'box\'的元素
相当于DOM中的document.getElementById("id");

2.元素选择器(符号：无)

公式：$("element");
实例：$("div"); //获取div标签

3.类名选择器(符号：.)

公式：$(".class");
实例：$("box"); //获取类名为box的元素

4.复合选择器(符号：,)

复合选择器可以选择多个选择器(ID 元素类名)组合在一起两个选择器之间用逗号\',\'分隔，只要符合其中任何一个筛选条件就会被匹配，返回一个集合形式的
JQuery包装集，利用JQuery索引可以获得集合中的JQuery对象
注意：多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的选择器，而是将每个选择器匹配的元素合并后一起返回
公式：$("#ID,.class,div");
实例：$("#box1,p"); //选取id为\'box\'，和p标签

5.通配符选择器(符号：*)

$("*") //获取页面上所有DOM元素

层次选择器

1.ancestor descendant 选择器符号：空格(\' \')

公式：$("ancestor descendant")；
ancestor 指任何有效选择器
descendant 指用于匹配的选择器并且是ancestor的后代元素
示例：$("ul li") //匹配ul元素下所有li元素

2.parent > child 选择器符号：大于号(\'>\')

parent: 父元素
child: 子元素
用于在给定的父元素下匹配所有的子元素。只能选择父元素的直接子元素
公式：$("parent > child")
示例：$("form > input") //匹配表单中所有的子元素input

代码：

 1 <div id="box">
 2 <p>aaa</p>
 3 <div>
 4      <p>bbb</p>
 5 </div>
 6 </div>
 7 
 8 <script>
 9 $(document).ready(function(){
10        $("#box > p").html("hhh"); //只改变第一个p元素(儿子)
11 })
12 </script>

3.prev + next选择器符号：加号(\'+\')

用于匹配紧挨着prev元素后的next元素，prev和next是同级元素
公式：$("prev + next");
prev指任何有效元素
next指紧挨着的元素

示例：

 <style>
    #box1{
        height:100px;
        width:100px;
        background-color:red;
    }
     #box2{
        height:100px;
        width:100px;
        background-color:yellow;
    }
     #box3{
        height:100px;
        width:100px;
        background-color:green;
    }
    </style>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
$("#box1 + #box2").html("hhh");

4.prev ~ siblings选择器符号：(\'~\')

用于匹配prev后所有siblings元素。注意：prev和siblings是同级元素
公式：$("prev ~ sibling")
实例：$("div~ul") //匹配div元素后所有同辈的ul元素

属性选择器

通过元素的属性来选择
[attribute] 说明：匹配包含给定属性的元素
示例：$("div[name]"); //匹配含有name属性的div标签
[attribute=value] 说明：匹配属性值为value的元素
示例：$("div[name=\'test\']"); //匹配name是test的div元素
[attribute!=value] 说明：匹配属性值不为value的元素
示例：$("div[name!=\'test\']"); //匹配name不是test的div元素
[attribute*=value] 说明：匹配属性值含有value的元素
示例：$("div[name*=\'test\']"); //匹配name中含有test的div元素
[attribute^=value] 说明：匹配属性值以value为开头的元素
示例：$("div[name^=\'test\']"); //匹配name属性以test的div的元素
[attribute$=value] 说明：匹配属性值以value结尾的元素
示例：$("div[name$=\'test\']"); //匹配name以test为结尾的div的元素

复合选择器

符合选择器需要同时满足多个条件时使用
示例：$("div[id][name=\'test\']") //选择div元素中有id属性并且name=\'test\'的div元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>

<input type="hidden" value="hehe">
<input type="hidden" value="">
<input name="haha" type="text" style="display:none;">


<script>
$(document).ready(function(){
     var obj = $("input[name]");
     console.log(obj);
     var obj1 = $("input[name=\'haha\']");
     console.log(obj1)
     var obj2 = $("input[type][value=\'hehe\']");
     console.log(obj2);
})
</script>
</body>
</html>

表单选择器符号：冒号(:)

表单选择器是匹配经常在表单内出现的元素，但是匹配的元素不一定在表单中
说明：匹配所有input元素
:input 示例：$(":input"); //匹配所有input元素
示例：$("form :input");//匹配form表单中的input元素注意：form后有一个空格(表示后代)
:button 说明：匹配所有按钮即type="button"的input元素
示例：$(":button"); //匹配所有普通button
:checkbox 说明：匹配所有复选框
示例：$(":checkbox");//匹配所有普通复选框
:file 说明：匹配所有文件域
示例：$(":file"); //匹配所有文件

<form>
    <input type="text">
    <input type="button">
    <input type="checkbox">
    <input type="date">
    <input type="email">
    <input type="password">
</form>
    <input type="email" name="" id="" value="">
<script>
 $(document).ready(function(){
    var $jqobj = $("form :input");
    var $jqobj2 = $(":input");
    console.log($jqobj);
    console.log($jqobj2);
 })

简单过滤器

定义：是以冒号(:)开头的，通常用于实现简单过滤效果

<h>11111111111</h>
<p class="pp">aaaaa</p>
<p class="pp">bbbbb</p>
<p class="pp">ccccc</p>
<p class="app">ccccc</p>

<script>
$(".pp:first").html("ddddd"); //只改变第一个class = "pp"
$(".pp:last").html("ddddd");  //改变最后一个
$(".pp:even").html("ddddd");  //改变索引值为偶数的 索引值从0开始

$(":header").html("ddddd");   //设置标题
$("p:nod(.pp)").html("ddddd");//找到所有p标签过滤掉类是.pp的元素，即设置除类pp外的所有p标签

var $jqobj = $(".pp:even").addClass("app");//添加类
$jqobj.removeClass("app")     //删除类
</script>

内容过滤器

是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选
:contains(text) 说明:匹配给定文本的元素
实例:$("li:contains(\'word\')") //匹配含有word内容的li元素

:empty(text) 说明:匹配空元素(没有任何子元素)或者不含有文本的标签
实例:$("td:empty") //匹配td中的空元素(没有任何子元素)或者不含有文本的标签

:has(selector) 说明:匹配含有选择器所匹配元素的元素
实例:$("td:has(p)") //匹配单元格中含有<p>标记的单元格

:parent(selector)说明:匹配含有子元素或者文本的元素实例:$("rd:parent") //匹配不为空的单元格即该单元格中还含有子元素或文本

可见性过滤器

元素的状态有两种，分别是隐藏状态和可见性状态。可见性选择器就是利用可见状态匹配
:visible //匹配所有可见元素

:hidden //匹配所有不可见状态
注意：在应用:hidden过滤器时,display属性和input的type属性为hidden的元素会被匹配到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>

<input type="hidden" value="hehe">
<input type="hidden" value="">
<input type="text" style="display:none;">


<script>
$(document).ready(function(){
     var $jqobj = $("input:hidden");
     var $jqobj2 = $("input:visible");
     $jqobj2.val = ("hello world");   //修改value的值 $jqobj2.val():取值
     console.log($jqobj);
     console.log($jqobj2);
})
</script>
</body>
</html>

子元素过滤器

:first-child 说明：匹配所有给定元素的第一个子元素
示例：$("ul li:first-child"); //匹配ul中第一个子元素li

:last-child 说明：匹配所有给定元素的最后一个子元素
示例：$("ul li:last-child"); //匹配ul中最后一个子元素li

:only-child 说明：如果某个元素是他父元素的唯一一个子元素，那么将会被匹配，如果父元素中含有其他子元素，则不会被匹配
示例：$("ul li:only-child"); //匹配ul中唯一一个子元素li

:nth-child(index/even/odd/equation)说明：匹配每个父元素下的第index个子奇偶元素，index从1开始

示例：$("ul li:nth(even)") //匹配ul中索引值为偶数的li元素

　　　$("ul li:nth(3)") //匹配ul中索引值为3的li元素