web前端

一、jQuery：简单来说，jQuery是一个JavaScript函数库。
jQuery在做项目开发的时候，通常使用1.9之类的版本库，为了使其稳定。
jQuery的引入：和外部js文件引入一致。
$和jQuery是作为整个window对象的顶级变量。
1、jQuery获取dom元素的方法：jQuery获取的dom对象不管是一个或者多个都是集合型，要想获取dom元素，首先要了解它的选择器。
例如：存在一个button标签和ul>li标签
jQuery的选择器：
（1）* ：指获取所有对象元素

console.log($("*"));  //输出的是整个HTML标签集合

（2）通过tagName获取dom元素

console.log($("button"));  //获取的是一个集合

（3）通过id获取dom元素

console.log($("#btn"));

（4）通过class获取dom元素

console.log($(".btnlist"));

（5）通过>获取dom元素

console.log($("body>button"));

（6）通过空格获取dom元素

console.log($("body button"));

（7）混合使用

console.log($("body>button#btn"));

（8）通过id一次性获取多个dom元素

console.log($("#btn,#btn1"));

（9）获取当前元素的子元素，第一个或最后一个

console.log($("ul>li:first"));
console.log($("ul>li:first-child"));
console.log($("ul>li:last"));
console.log($("ul>li:last-child"));

（10）通过not获取dom元素:除了当前元素，获取其他元素

console.log($("ul>li:not(#li4)"));

（11）even:通过偶数的索引值来获取元素

console.log($("ul>li:even"));

odd:通过奇数的索引值来获取元素

console.lof($("ul>li:odd"));

eq:通过索引来获取元素

console.log($("li:eq(0)"));

（12）通过小于或大于索引值来获取元素

console.log($("li:lt(3)"))；
console.log($("li:gt(3)"));

（13）:has 指获取当前元素里面必须有某元素

console.log($("ul:has(#li4)"));    //输出的是ul

（14）：parent之获取的元素必须有子集，子集包括元素或者文本

console.log($("li#li4:parent"));   //获取的是li4

（15）属性选择器

console.log($("li[id][class]"));  //获取li中含有id或者class的元素
console.log($("li[id='li4']"));   //获取li中id为li4的元素

（16）:nth-child(3)指根据序号获取元素

console.log($("ul>li:nth-child(3)"));   //获取的是第三个序列的li

2、jQuery操作dom元素的属性和方法：
jQuery可以进行隐式迭代，即可以操作一组元素.js不可以进行隐式迭代，即不能操作一组元素
（1）设置元素的文本值：在js中设置元素文本用innerhtml或innertext，而在jQuery中用html或text

$("button.btn").html("html");   //不带参数是为获取，带参数是为设置其值
$("button.btn").text("html");  //button标签的文本值按钮改为html
$("button.btn").html("<span>html</span>");   //button标签的文本值为html，它可以自动解析span标签中的文本值
$("button.btn").text("<span>html</span>");    //button标签的文本值为<span>html</span>

（2）获取元素的文本值：当设置元素的文本值时，可以一次性设置多个相同的文本值，但在获取元素的文本值时，因为文本值各不相同，所以一次只能获取一个元素的文本值，但若一定要获取所有元素的文本值，只有进行遍历。

for(var i=0;i<$("button.btn").length;i++)
{
console.log($("button.btn").eq(i).html());  //eq是通过索引来获取元素
}

（3）获取或设置input文本框的value值:val()

console.log($("input").val());   //获取value值
$("input").val(321);    //设置value的值为321

（4）给元素添加类：addClass

$("input").addClass("txt txt1");    //可以一次性添加多个类

给元素移除类名称：removeClass

$("input").removeClass("txt1");

元素类名的切换：若该元素有该类名，则为删去该类名，若元素没有该类名，则为添加该类名，方法为toggleClass

$("input").toggleClass("txt");

设置或获取元素属性的方法：attr

$("input").attr("id","user");   //设置元素的id为user
console.log($("input").attr("id"));  //获取元素的id为user，输出结果为user

设置自定义属性并获取

$("input").attr("data-user","maodou");   //设置元素的data-user为maodou
console.log($("input").attr("data-user"));  //获取元素的data-user为maodou，输出结果为maodou

移除元素的属性：removeAttr

$("input").removeAttr("id");
$("input").removeAttr("data-user");

一次性设置多个属性，但不能获取多个属性

$("input").attr({
    id:"username",
    "data-list":"list",
 });

(6)操作css：设置或获取元素的样式，可以设置一个或多个

$("#block").css("border","1px solid silver");     //设置一个样式
$("#block").css({       //设置多个样式
    width:"100px",
    height:"100px",
    border:"1px solid silver",
    backgroundColor:"red",
});
console.log($("#block").css("backgroundColor"));   //获取元素的样式，输出为rgb格式，且不能同时获取多个样式
console.log($("#block").css("border"));

（7）offset:获取当前元素的相对偏移量，返回值是对象，里边分别是left和top值

console.log($("#block").offset());

position:用法与offset相类似
scrollTop：当前元素，相对滚动条到顶部的距离
scrollLeft：当前元素相对于滚动条到左边的距离

console.log($(window).scrollTop);

（8）height、width：获取当前元素的宽和高

console.log($("#block").height);
console.log($("#block").width);

也可以使其带回调函数，也就是在其原来的高上重新设值

$("#block").height(function (index,oldheight){
     return oldheight+100;
});

3、jQuery中动态创建dom元素以及添加
如何动态创建dom元素

var str=document.creatElement("div");    //js创建dom元素
var s=$("<div></div>");       //jQuery创建dom元素

如何让创建的元素显示到界面：对于js使用的方法为appendchild，对于jquery，里面有大量的追加方法。
（1）append、appendTo：追加到当前元素的内容之后

$("button").append(s);    //将div追加到button的内容之后
s.appendTo($("button"));   //将div追加到button的内容之后

（2）prepend、prependTo:追加到当前元素的内容之前

$("button").prepend(s);    //将div追加到button的内容之前
s.prependTo($("button"));  //将div追加到button的内容之前

（3）after、before：追加到当前元素之后或之前

$("button").after(s);
$("button").before(s);

insertAfter、insertBefore:与after和before相类似,追加到当前元素之前或之后

s.insertAfter($("button"));
s.insertBefore($("button"));

（4）wrap、unwrap：包裹当前匹配元素和移除当前匹配元素的包裹元素

$("button").wrap(s);   //将button用div包裹起来
$("button").wrap();    //移除包裹button的div

（5）wrapAll：将所有匹配的元素用一个元素包裹起来
wrapInner：用标签包裹匹配元素的内容

$("button").wrapAll(s);   //用一个div将所有button包裹起来
$("button").wrapInner("<span></span>");  //将button元素的内容用span标签包裹起来

（6）replaceWitn、replaceAll：用元素替换匹配元素

$("button").replaceWith($("<span></span>"));  //将所有的button标签换成了空的span标签
$("<span></span>").replaceAll($("button"));   //将所有的button标签换成了空的span标签

（7）empty：清空当前元素的所有内容
remove：移除当前元素

$("body").empty();   //清空body里的所有元素
$("body").remove();  //移除所有的button按钮

（8）clone：若没有参数，默认是浅克隆，值为false

$("button").clone(true).appendTo($("#clo"));    //将button添加到div中，为深克隆

4、jQuery里边的筛选
（1）eq(index)：按照索引来筛选元素

console.log($("li").eq(3));    //根据索引来筛选所有li中的3号索引

（2）first和last：获取当前元素里面子集元素的第一个和最后一个

console.log($("li").first());
console.log($("li").last());

（3）hasClass：检测当前元素有没有固定的类，若有返回true，没有则返回false

console.log($("li").eq(2).hasClass("liinfo"));   //检测2号索引位有没有liinfo这个类，返回true

（4）filter：过滤元素

console.log($(""));

（5）is：判断在当前元素中是否含有该属性：若有返回true，若无则返回false

console.log($("button").is(".btn"));
$("button").is(function (index){
    console.log(index,this,$(this));
});

（6）map：映射，将一个集合元素转化为另一个元素集合

var a=[1,2,3];
console.log(a.map(function (value, index) {
         return value * value;
}));

（7）has：找当前匹配元素里面谁具有这个元素

$("div").has("ol").css("border","1px solid black");

（8）not(selector)：当前匹配元素中除去特定元素，获取其余的元素

console.log($("div").not($("div").eq(0)));

（9）slice：选取jquery集合里面的一部分

console.log($("button").slice(0, 2));

（10）children()：获取当前元素所有子集

console.log($("body").children());

（11）find()：查找元素

 console.log($("body").find(".btn1"));

（12）next()：下一个元素
prev()：上一个元素

console.log($(".btn1").next());
console.log($(".btn1").nextAll());
console.log($(".btn1").prev());
console.log($(".btn1").prevAll());

（13） parent：找当前元素的直接父容器
parents：找当前元素所有的父容器

console.log($(".btn1").parent());
console.log($(".btn1").parents());

（14）siblings()：找同胞兄弟元素

console.log($(".btn1").siblings(".btn2"));

5、jQuery里特定的方法
（1）each：集合遍历，参数是索引

$("button").each(function (index) {
            $(this).click(function (){
             console.log(index);
             });
});

（2）get(index)：根据索引获取指定元素，不加参数直接获取整个集合

console.log($("button").get(0));

（3）index()：获取当前元素的索引值，或者直接在一个集合里面获取特定元素的索引值

console.log($("button").index($("button:nth-child(3)")));

（4）jQuery.fn.extend()：往jQuery对象里添加新的方法

jQuery.fn.extend({
         mySort: function () {
         $(this).each(function (index) {
         $(this).html("我在修改");
         });
         }
         });
$("button").mySort();

（5）jQuery.extend()：直接是给jquery顶级变量

jQuery.extend({
            mylits: function () {
                console.log(1);
            }
});
$.mylits();

6、jQuery里面的事件绑定
①ready：dom元素加载完成

$(document).ready(function (){
});

简写：

$(function (){
});

②链式操作：在jquery里面对象可以链式操作，在链式操作的时候尽量链式操作标准写到三次，链式操作针对同一个对象进行多次操作，也可以对多个对象进行多次操作。

$("#btn").click(1,function(){
         console.log(e.data);  //data传递给事件的数据，事件里面获取传递的数据e.data
         }).mousedown(function () {
         console.log(1);
         }).mouseleave(function () {
         console.log(2);
         });

③jQuery里的事件：
mouseover mouseenter mousedown mouseleave mousemove mouseout mouseup
keyup keydown keypress
resize
scroll
select
submit
focus
focusin
blur
focusout
change（文本发生变化事件）
dbclick
④jQuery封装事件：也就是js里面的内置事件，在写的时候不带on，直接是函数的写法
（1） one：指定事件类型执行一次

$("#btn").one("mouseleave", function () {
         alert(1);
});

（2）on:可以绑定一个或多个事件

$("button").on("click mouseleave", function (e) {
         console.log(e.type);   //type是事件的类型，通过type可以判断执行的是哪个事件
         });

（3）off: 有type selector fn三个参数，若不带参数，表示事件的全部移除，若带参数，表示移除指定事件

$("ul").on("click mouseleave", "li", function () {
         console.log(1);
         $("ul").off("click mouseleave");
         });

（4）bind：事件绑定，类似于on，有type data fn三个参数，

$("ul").bind("click",function (){
         console.log($(this));
         });

（5）unbind：事件的移除，类似off， 参数如果没有，则所有事件全部移除，有参数，移除指定事件

$("ul").bind("click mouseleave", function () {
         console.log(1);
         $(this).unbind("click");//事件移除
         });

（6）trigger：为指定元素添加触发事件和传递数据，传递数据一集合[]的方式传递，

$("button").click(function (e,a,b) {
         console.log(e,a,b);
         }).trigger("click",[1,2]);

（7）hover：事件切换，mouseover和mouseout

$("ul").hover(function (){
        console.log(1); //over
         },function (){
         console.log(2);//out
         });

⑤jQuery处理事件冒泡:return false

在这里插入代码片