jquery初体验

jquery:
jquery是一个js框架（node.js angular.js bootstrap.js ）

这个框架可以帮我快速方便的操作html的css样式，修改html内容，查找html元素

使用jquery的方法：先导入jquery-3.1.1.js文件到项目，

           然后在要使用jquery-3.1.1.js的页面中引入该js文件<script src = ""></script>

获取jquery对象的方法：var $a = $("#one");  获取id为one的所有元素
               $a.val() ;  获取a的value值
               $a.html();  获取a的innerHTML

jquery对象和js对象之间的转换：js--->jquery
                   var j = document.getElementById("one");
                     var $j = $(j);

                    jquery--->js

                    var $a = $("#one"); 
                    var a = $a.get(0);  //注意：每个jquery对象都是一个类数组

在jquery中如何表示页面已经加载完毕？
$(document).ready(function(){
   alert("xxx");
})
$(function(){
})

选择器：

基本选择器：$("#one");  找id为one的所有元素
element  $("div");   找元素名为div的所有元素
.class   $(".myclass"); 找class为.myclass的所有元素
*        $("*");        找所有的元素
多选择器  $("div,.one"); 找元素名为div和class为one的所有元素

层次选择器：
A  B ，获得A元素内部所有的B元素。（爷孙）    $("body div")
A > B ，获得A元素内部所有的B子元素。（父子） $("body>div")
A + B ，获得A元素后面的第一个兄弟B。（兄弟） $("#one+")
A ~ B ，获得A元素后面的所有的兄弟B。（兄弟） $("#two~div")
A.siblings(“div”)，A的所有是div的兄弟   $("#two").siblings("div")

基本过滤选择器： （所有的过滤都有：号） 
:first 第一个 $("div:first")
:last 最后一个 $("div:last")
:eq(index)获得指定索引 $("div:eq(3)")
:gt(index)大于 $("div:gt(3)")
:lt(index) 小于 $("div:lt(3)")
:even 偶数，从 0 开始计数。例如：查找表格的1、3、5...行（即索引值0、2、4...） $("div:even")
:odd 奇数 $("div:odd")
:not(selector) 去除所有与给定选择器匹配的元素 $("div:not(:last)")
------------------------------
:header 获得所有标题元素。例如：<h1>...<h6> $(":header")
:animated 获得所有动画 $(":animated")
:focus 获得焦点
is(“条件”)是否符合指定条件

内容过滤选择器： （所有的过滤都有：号）
:empty 当前元素是否为空（是否有标签体--子元素、文本）$("div:empty")
:has(...) 当前元素，是否含有指定的子元素 $("div:has(.one)")
:parent 当前元素是否是父元素（自己是否拥有子元素） $("div:parent")
:contains( text ) 标签体是否含有指定的文本 $("div:contains('aa')")

可见元素过滤器
:hidden 隐藏。特指<xxx style="display:none;">，获得<input type="hidden">
:visible 可见（默认）

//jquery中的遍历方式
$("div").each(function(){ })
$.each($("div"),function(){ })

属性选择器：

[属性名] 获得指定的属性名的元素 $("div[title]")

[属性名=值] 获得属性名等于指定值的的元素【1】 $("div[title='test']")

[属性名!=值] 获得属性名不等于指定值的的元素
$("div[title!='test']")

[as1][as2][as3].... 复合选择器，多个条件同时成立。类似 where ...and...and【2】
$("div[id][title='test']")
---------------------------------------（下面了解）
[属性名^=值] 获得以属性值开头的元素
$("div[title^='t']")

[属性名$=值] 获得以属性值结尾的元素
$("div[title$='t']")

[属性名*=值] 获得含有属性值的元素
$("div[title*='t']")

子元素过滤选择器：

:nth-child(index) ，获得第几个孩子，从1开始。
:first-child ，获得第一个孩子（每个符合条件的第一个孩子都获取到）
:last-child ，获得最后孩子
:only-child ，获得独生子

:first-child 和:first 区别： :first始终只会获取第一个符合条件的元素(只有一个) 。:first-child可能获取到一堆符合条件的孩子

表单元素过滤选择器：

:input 所有的表单元素。（<input> / <select> / <textarea> / <button>）
:text 文本框<input type="text">
:password 密码框<input type=" password ">
:radio 单选<input type="radio">
:checkbox 复选框<input type="checkbox">
:submit 提交按钮<input type="submit">
:image 图片按钮<input type="image" src="">
:reset 重置按钮<input type="reset">
:file 文件上传<input type="file">
:hidden 隐藏域<input type="hidden"> ,还可以获得<xxx style="display:none">
:button 所有普通按钮。<button >或<input type="button">
select 下拉列表（没有:号）
textarea 多行文本框（没有:号）

表单元对象属性过滤选择器：

:enabled 可用 $(":input:enabled")
:disabled 不可用。<xxx disabled="disabled">或<xxx disabled="">或<xxx disabled>
$(":input:disabled")
:checked 选中（单选框radio、复选框 checkbox） $(":checkbox:checked")
:selected 选择（下拉列表 select option） $("select :selected")

表单元对象属性过滤选择器：
attr(name) 获得指定属性名的值 $("div").attr("class"); 获取div中class的属性值
attr(key ,val ) 给一个指定属性名设置值 $("div").attr("class","myclass"); 给div设置class 属性值
removeAttr(name) 移除指定属性 $("div").removeAttr("class"); 移除div设置class 属性值

addClass("my") 追加一个类
removeClass("my") 将指定类移除
toggleClass("my") 如果有my将移除，如果没有将添加。

val() 获得value的值（<input>、<textarea>、<select>、<option>）
val(text) 设置value的值
 
html() 获得html代码，含有标签
html(...) 设置html代码，如果有标签，将进行解析。
 
text() 获得文本值，将标签进行过滤
text(...) 设置文本值，如果有标签，将被转义 --><< && ><