jQuery

jQuery 
概述
jquery是一个框架,是一个库,他是将Javascript进行封装,以供开发者调用的时候更加的方便,jQuery解决了很多的不兼容的问题,用起来更加的方便.
我学的是1.8.3的版本,最新的是3.6的版本,结尾是min.js表示的是压缩版本,
开发的时候我们用什么功能根据手册就可以了
----------------------------------------------------
开发的第一步是将jquery引入到HTML文件中,引入是在head标签的script标签的src属性中写入所在的路径.引入是否成功用alert($);进行测试,$符代表的是jQuery对象,我们在引入的时候有两种引入的方式,第一种是本地引入,第二种是直接在src的值部分传一个网络路径,例如百度前端资源公共库,或者淘宝360都有这种资源公共库
----------------------------------------------------
我对整个jquery做的总结就是
找到你要操作的节点,然后要么增删改这个节点,要么给节点加上一个样式,或者点击的事件或者匹配或者传输交互,注意在jquery代码中也是可以写JavaScript代码的,
----------------------------------------------------
速记分类
----------------------------------------------------
选择器:
简单的说就是找到我们要操作的节,
基本的选择器有
ID选择器----->根据一个节点的ID值去找到这一个节点,语法是$(#id值);
元素选择器--->通过标签名找到所有的节点语法是$("标签名");
类选择器----->通过节点的class属性是值找到这个节点;$("class属性值");
匹配到所有节点的选择器---->$("*");
注意选择器的使用是可以一次用多个选择器的,例如$("myid,idv,myclass");注意多个选择器中间用逗号隔开表示的是多个选择器各选各的,不是要每一个选择器都要满足条件.
----------------------------------------------------
层级选择:就是根据节点的关系来找节点,例如
1,祖先元素  空格  后代元素--->匹配到祖先元素下的标签名和后代元素相同的元素;
2,父元素  >  子元素----->匹配到父元素下所有的与子元素相同的节点,孙子级别的是匹配不到的;
3,元素1  +  元素2--->匹配到元素1后面是元素2的所有的元素(注意这里是同级的),匹配的范围是整个文档中所有符合条件的元素;
4,元素1  ~  元素2--->匹配到元素1之后同级的所有的名字是元素2的节点;
----------------------------------------------------
1,父级元素  :  条件单词或者条件方法()----->匹配到所有的符合条件的节点,有的是根据属性值作为条件,有的是根据奇数偶数,有的是根据索引值,等等吧


下面是没有冒号之前没有父级元素的
2,$(":input")匹配所有 input, textarea, select 和 button 元素
$(:text)匹配所有的单行文本框


----------------------------------------------------
$("元素名[属性名]");通过属性名找到具有此属性的节点,
$("元素名[属性名='属性值']");通过属性名=具体属性值,找到符合条件的的节点, 
[属性名 ^=  属性值]匹配属性值以固定值开头的元素
$("input[id][name$='man']")多重选择器并用来进行匹配,符合有ID属性且name属性值以man结尾


文档处理
其中是对节点的     1插入节点,2删除节点3替换()修改节点4复制节点(克隆)
筛选
也是为了找到节点,不过这里面基本上都是方法,更倾向于从一个集合里做一个筛选,可以理解成过滤匹配,或者从一个集合里查找想要的节点
事件
事件就是找到节点之后,再给节点添加各种事件,当然这里还有一些简单的动画效果,重点记忆下面的方法
先让所有的HTML标签加载,再去执行jQuery操作的方法,功能同于js中的window.οnlοad=function(){},
$(document).ready(function(){
  // jquery中页面加载完成之后执行的方法
});


与上面方法作用相同
$(function(){
  //  jquery中页面加载完成之后执行的方法
});
on()方法,参数一是事件的类型,参数二是一个匿名函数,即事件处理函数
hover();参数1和参数2都是匿名函数,参数1是鼠标移入时调用的方法,参数2是鼠标移出时调用的方法
----------------------------------------------------
遍历:可用于例遍对象和数组。
$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});
each方法有两个参数,参数一是要遍历的对象或者数组,参数二是一个匿名函数  i 表示的是下标索引,n表示的是下标对应的值,当我们拿到了下标和值的时候就可以做一些我们想做的操作,比如获取数据,或者添加事件
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});
----------------------------------------------------
$.trim("  hello, how are you?  ");去掉字符串起始和结尾的空格。
动态的创建一个元素节点
$("<div></div>");--->创建一个div标签,然后可以把它放到他要放到位置;
创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。
$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");
-----------------------------------
$("节点").each(匿名函数) ;让匹配到的所有节点遍历去执行一个匿名函数,
$("节点").get(num);从获取到的节点集合中获取到第num减一个节点对象
-----------------------------------
属性
atrr();参数如果是一个的话,就是获取属性的值,如果说是两个的话就是设置属性;如果设置多个属性的值的话,属性名和值之间需要用冒号链接,每对属性之间用逗号隔开,多个属性用一个大括号包起来,格式和json的格式是一样的.
1,$("img").attr("src"); 2,$("img").attr("src","test.jpg");
3,$("img").attr({ src: "test.jpg", alt: "Test Image" });
--------------------------------------------------------------------
removeAttr("属性名");给匹配到的节点删除一个属性
$("img").removeAttr("src");
---------------------------------------------------------------------
prop()获取在匹配的元素集中的第一个元素的属性值。
参数是一个的属性的话获取的是属性的值
参数是两个的话是设置,属性的值
注意.removeProp("用prop设置的属性名");用来删除由.prop()方法设置的属性集
---------------------------------------------------------------------
addClass("类名");为每个匹配的元素添加指定的类名。
removeClass("类名");为匹配到的标签删除类名或指定的类名.
toggleClass("类名");如果存在（不存在）就删除（添加）一个类。
css();参数有一个的时候是获取属性的值,参数两个的时候是设置属性值.
---------------------------------------------------------------------
html();无参数的时候表示获取匹配到节点的值,有参数的时候表示设置匹配到的标签内的值,当参数是方法的时候,表示遍历添加获取到的标签内的值.注意text()方法和val()方法的功能与html()方法相同.
jQuery中ajax
get方式
$.get(url, [data], [callback], [type]);
--------------------------------------
url:待载入页面的URL地址,这是处理异步请求需要配合的PHP脚本文件,一般是请求数据库的操作,(注意这个参数是必须写的)


data:待发送 Key/value 参数。一般是需要处理的数据,这里要用json格式写,外面包着大括号


callback:载入成功时回调函数。当异步请求成功自动调用这个函数,


type:返回内容格式，xml, html, script, json, text, _default。第四个参数是确定返回值是什么格式,一般写是json格式
--------------------------------------
例子
 $.get('./1.php', {"id":1, "name":"admin"}, function(data){
                // console.log(data);
                    
                // 声明空字符串。
                var str = '';


                // 遍历
                $.each(data, function(i, n){
                    // console.log(n);
                    str += i + ':' + n + '<br/>';
                });


                // 写入 did
                $('#did').html(str);


            }, 'json');


------------------------------------------------------

post方式
$.post(url, [data], [callback], [type]);
注意他的参数和get的参数是相同的
----------------------------------------------
url:待载入页面的URL地址,这是处理异步请求需要配合的PHP脚本文件,一般是请求数据库的操作,(注意这个参数是必须写的)


data:待发送 Key/value 参数。一般是需要处理的数据,这里要用json格式写,外面包着大括号


callback:载入成功时回调函数。当异步请求成功自动调用这个函数,


type:返回内容格式，xml, html, script, json, text, _default。第四个参数是确定返回值是什么格式,一般写是json格式
-----------------------------------------------------
例子
  $.post('./1.php', {"id":1, "name":"admin"}, function(data){
                // console.log(data);
                    
                // 声明空字符串。
                var str = '';


                // 遍历
                $.each(data, function(i, n){
                    // console.log(n);
                    str += i + ':' + n + '<br/>';
                });


                // 写入 did
                $('#did').html(str);


            }, 'json');
-------------------------------------------------------------
ajax自定义
$.ajax(url,[settings]);
注意:使用的时候一般用这个,因为他可以写异步出现错误时的处理方法.
参数两个:url:一个用来包含发送请求的URL字符串。一般是一个PHP脚本,用来处理请求连接服务器的.
settings:AJAX 请求设置。所有选项都是可选的。一般会选的几项:
1.type-->请求方式GET或者POST
2.async-->用异步还是同步,false表示异步
3.data---->请求处理的数据
4.success--->异步请求成功调用的方法
5. beforeSend-->发送异步请求之前调用的方法
6.error--->请求失败执行的方法
7.dataType-->返回数据的格式,一般写json
8.起始还有很多设置的参数,具体的参数去手册查找,注意,所有的参数的格式都是json键值对的形式,
----------------------------------------------
例子
 $.ajax('./1.php', {
                type: "POST",
                async: false,
                data: {"id":1, "name":"admin"},
                success: function(data)
                {
                    $("#time").fadeOut(200);
                    // console.log(data);
                    
                    // 声明空字符串。
                    var str = '';


                    // 遍历
                    $.each(data, function(i, n){
                        // console.log(n);
                        str += i + ':' + n + '<br/>';
                    });


                    // 写入 did
                    $('#did').html(str);
                },
                beforeSend: function(){
                    // $("#did").html('加载中....');
                    
                    $("#time").show();


                },
                error: function()
                {
                    console.log('数据异常。');
                },
                dataType: 'json',
                timeout:2000
            });