jQuery基础（1）_dom操作中,用( )和( )表示在匹配元素的最后一个子元素后插入ele。-CSDN博客

本文链接：https://blog.csdn.net/Always_Love/article/details/104306604

最近学习到了jQuery，边学习边总结，东西比较多请耐心看，但大多还是js和css的东西，需要区别和加深记忆。

一、jQuery基本信息

1、jquery 是 js用于快速开发而封装的一个框架，相对来说代码量较少，但实现功能比较多，还可以处理不同浏览器之间的兼容性问题。通俗的来说，jQuery其实就是把JS的大量语法进行封装，类似于大量的学习方法和dom元素封装。

2、jQuery有很多库，并且不断地在更新。有压缩版的也有完全版的。但是并不是越新版本的库就越好，这是需要根据自己的需求来选的。开发常用的jQuery库有：1.9.1版本 3.4.1版本。

3、引入问题
jQuery框架是如何引入到网页中呢？
jQuery可以写在head里面，也可以写在body里面，但是jQuery必须先加载库，然后再走代码，所以一般是在head里面加载库文件，在body中写执行的代码。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    //引入jQuery库
    <script src="./jquery/jquery.js"></script>
</head>
<body>
<script>
    $(function(){
        //代码
    });
</script>
</body>
</html>

4、jQuery的基本写法
在jQuery的库里面有jQuery也有 $，所以写成 j Q u e r y (); 和$ $();是等价的。

二、jQuery里面的选择器

在这里先研究一下jQuery的对象和JS的对象有什么区别：
1）jQuery对象属于js的数组；
2）jQuery对象是通过jQuery包装的DOM对象后产生的;
3）jQuery对象不能使用DOM对象的方法和属性；
4）DOM对象不能使用jQuery对象的方法和属性；

jQuery对象和JS对象的相互转换：
1）JS对象转jQuery对象：

$("JS对象")；

2）jQuery对象转JS对象：

var test=$("JS对象")[0];
test.innerHTML="JS对象"；

1、基本选择器（id、class、元素‘element’、*、复合元素选取）
这些基本选择器主要是为了在jQuery里面获取dom元素而使用的。
注意：jQuery进行dom元素获取的时候要注意元素是否初始化完成。
这里引入了jQuery加载函数：

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

可简写成：

$(function () {
}

$("#btn");//用id选择获取dom元素
$(".btn");//用class类选择获取dom元素
$("buttom");//用标签名称选择获取dom元素
$("*");//获取所有元素
$("button,input");//选择获取符合元素

2、层次选择器

$("ul li");//获取ul下的所有li
$("ul>li");//获取ul下的直属子元素中的li
$(".lii+li");//获取类名称为.lii的li下一个li
$(".lii~li");//获取类名称为.lii的li之后的所有li

3、基本筛选器

$("ul>li:first");//获取ul下子元素中的第一个li
$("ul>li:last");//获取ul下子元素中的最后一个li
$("ul>li:not(.lii)");//获取ul下子元素中除类名称为.li的li之外的所有li
$("ul>li:even");//偶数获取
$("ul>li:odd");//奇数获取
$("ul>li:eq(index)");//按照索引来获取
$("ul>li:gt(index)");//获取大于索引
$("ul>li:lt(index)");//获取小于索引
$(":header");//获取所有的h标签
$("input:focus");//获取获得焦点的元素
$(":root");//直接获取html

4、内容选择器

$("div:contains('内容')");//包含某个内容的
$("div:empty"); //直接获取空元素
$("ul:has(.lii)");//匹配包含某个类名称为lii元素的父元素
$("div:parent");//匹配的元素必须是父元素
$("button:visible");//匹配可见元素
$("button:hidden");//匹配隐藏元素

5、根据属性来选择

$("button[id]");
$("button[id][class]");
$("button[id='btn']");
$("button[id='btn'][class='btn']");
$("button[id!='btn']");
$("button[id!='btn'][class!='btn']");
$("button[id^='b']");//获取的属性值以什么开头(b)
$("button[id$='n']");//获取的属性值以什么结尾(n)
$("button[id*='n']");//获取的属性值包含什么(n)

6、子元素过滤选择器

$("ul>li:first-child");//匹配第一个子元素
$("ul>li:last-child");//匹配最后一个子元素
$("ul>li:first-of-type");//匹配父元素里面元素的第一个
$("ul>li:last-of-type");//匹配父元素里面元素的最后一个
/*上面两个的区别是：
first-child 和last-child  如果指定元素标签，则找当前标签里面的第一个；
如果没写 ，则找所有元素里面的第一个。
first-of-type last-of-type  如果写指定标签 ，获取指定标签里面的第一个；
如果没写，获取所有类型标签里面的第一个。*/
$("ul>li:nth-child(2)");//括号里面写的是序号，注意序号是从1开始
$("ul>li:nth-last-child(2)");//括号里面写的是序号，也是从1开始，从后往前数
$("ul>:nth-last-of-type(1)");//后往前数，按类型获取标签里面的最后一个
$("ul>:nth-of-type(1)");//前往后数，按类型获取标签里面的第一个
$("ul:only-child");//匹配的元素必须是父元素的唯一子元素
$("ul>p:only-of-type");//获取父元素里同类型标签里只有唯一的一个标签，部获取到

7、表单元素选择器

$(":input");//匹配所有 input, textarea, select 和 button 元素
$(":text");//获取单行文本框
$(":password");//获取密码框
$(":radio");//获取单选按钮的
$(":submit");/获取表单提交的
$("checkbox");//获取复选框的
$(":file");//获取文件路径
$(":reset");//获取重置按钮

8、表单对象获取

$("input:disabled");//获取不可用的标签
$("input:enabled");//获取可用的标签
$("input:checked");//获取CheckBox  radio  被选择的元素
$("select option:selected");//匹配被选择的下拉的option

9、混淆选择器

"."+$.escapeSelector(".box");//获取\.box
$(".block").find("."+$.escapeSelector(".box"));

三、jQuery里面的代码、文本以及值的操作
类似与JavaScript里面的innerHTML，innerText，value。
html ：获取或设置元素的html值
text：获取或设置元素的文本值
val ：获取或设置元素的value值

获取值：

$("div").html();/获取当前元素的html值
$("div").text();//获取当前元素的text值
$("input").val();//获取当前input里面的value值

设置值：

$("div").html("需要设置的值");
$("div").text("需要设置的值");//不会自动解析标签
$("input").val("需要设置的值");//设置元素的value值

或者用回调函数的方式来写：

$("div").html(function (index,old){
console.log(index, old);
return '需要设置的值';
});

$("div").text(function (index,old){
console.log(index, old);
return '需要设置的值';
});

$("input").val(function (index,old){
console.log(index,old);
return old+"新的值"+index;
});

四、jQuery里的属性操作

$("button").css("CSS属性")；//获取CSS样式

$("button").css({
color:"blue",
backgroundColor:"red",
borderWidth:"10px"
});//一次设置多个属性值(样式名称要规范)

//**attr**
$("input[type=text]").attr("value");//attr获取或设置元素的属性(单个)
$("input:text").attr("value", "输入正常");
$("input:text").attr({
             value: "你好",
             type: "button"
            });//一次设置多个属性
$("input:text").attr("data-index",自定义);//设置自定义属性

//**porp**
$("input:text").prop("value");
$("input:text").prop("value","成功！");
            $("input:text").prop({
                value:"你好",
                type:"button"
            });
$("input:text").prop("myindex",自定义);//porp可以获取和设置自定义属性，但是不显示           

//**data**
$("input:text").data("data-index",自定义);//类似于porp，可以获取和设置自定义属性，但是看不见(不显示)

用回调函数写：

$("input:text").attr("value",function (index,oldvalue){
                console.log(index, oldvalue);
                return "函数返回的值"+index
            });
//index  为当前的索引   oldvalue  为当前元素属的旧值            
$("input:text").prop("value",function (index,oldvalue){
                return "新值"+index;
            });

移除属性：
removeAttr：可以移除自带的属性，也可以移除自定义属性。
removeProp()：移除的是属性值，但属性还在，编译器里面没有修改。

$("input:text").removeAttr("value");
$("input:text").removeAttr("data-index");
$("input:text").removeProp("data-index");
$("input:text").removeProp("title");

CSS属性操作：
jQuery里的css属性操作可以进行链式操作。
添加类：

$("input").addClass("txt").addClass("btn");//连续添加多个类
$("input").addClass("txt btn file");//连续添加多个类，中间用空格隔开

移除类：

$("input").removeClass();//removeClass()里不写参数，指的是移除全部
$("input").removeClass("txt file");//移除指定类

类别切换：
如果有这个类，就删除。如果没有这个类，就添加。

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

用回调函数写：

$("input").addClass(function (index,classname){
                console.log(index,classname);
                return "btn"+index;
            });
$("input").removeClass(function (index,classname){
                console.log(index,classname);
                return "btn"+index;
            });
$("input").toggleClass(function (index,classname){
                console.log(index,classname);
                return "btn"+index;
            });

五、jQuery里的尺寸操作

height([val|fn])
width([val|fn])

获取元素的宽和高：

$(".block").height();
$(".block").width();

设置元素的宽和高：

$(".block").height(100);//高设置100px
$(".block").width(300);//宽设置300px

用回调函数写：
index 代表当前元素的索引， old 代表当前元素的值

$(".block").height(function (index,old){
            console.log(index, old);
            return 100;
        });

innerHeight()
innerWidth()
获取元素的宽和高，不包括边框，包括补白、padding之内的属性也算。

$(".block").innerWidth();
$(".block").innerHeight();

outerHeight([options])
outerWidth([options])
获取元素的宽和高，包含边框。

$(".block").outerWidth();
$(".block").outerHeight();

如果参数options设置为true，计算的时候包含边距（根据盒子模型去计算元素整体宽和高）。

$(".block").outerHeight(true);
$(".block").outerWidth(true);

六、jQuery的文档处理
jQuery的文档处理包括：内部插入、外部插入、元素包裹、元素的替换、删除以及复制。

1、内部插入
append(content|fn)

$(".block").append($(".small"));//将.small追加到.block之后

$(".block").append(function (index, html) {
            console.log(index, html);
            return $(".small");
        });//fn回调函数问题。参数是index：索引，html：当前元素的html内容

appendTo(content)
（写法和append刚好相反）

$(".small").appendTo($(".block"));//将.small追加到.block之后

prepend(content|fn)

$(".block").prepend($(".small"));//将.small追加到.block之前

$(".block").prepend(function (index,html){
            console.log(index, html);
            return $(".small");
        });

prependTo(content)
（写法和prepend刚好相反）

$(".small").prependTo($(".block"));//将.small追加到.block之前

2、外部插入
after(content|fn)

$(".child").after($(".small"));//将.small插入到.child之后

$(".child").after(function (index){
    return "<div class='child2'></div>"
});

before(content|fn)

$(".child1").before($(".small"));//将.small插入到.child1之前

$(".child1").before(function(index){
    return $(".small"+index)
});

insertAfter(content)（写法和after刚好相反）

$(".small0").insertAfter($(".child1"));//将.small0插入到.child1之后

insertBefore(content)（写法和before刚好相反）

$(".small0").insertBefore($(".child1"));//将.small0插入到.child1之前

3、元素的包裹

wrap(html|ele|fn)

$(".child").wrap(ele);//ele将.child包裹

$(".child").wrap("<div class='par'></div>");

$(".child").wrap(function (index){
    console.log(index);
    return "<div class='par'></div>"
});

unwrap()

$(".c").unwrap();//移除指定元素的父元素

wrapAll(html|ele)

$("p").wrapAll("<div></div>");//将匹配的元素全部包起来

wrapInner(html|ele|fn)

$("body").wrapInner("<div></div>");//将元素的内容全部包起来

$("body").wrapInner(function (index){
    console.log(index);
    return "<div></div>";
});

4、元素的替换
replaceWith(content|fn)

var ipt = $("<input type='text' class='price'/>");

ipt.val($(".price").html());// 1

$(".price").replaceWith(ipt);// 2

$(".price").replaceWith(function (index, html) {
    ipt.val(html);
    return ipt;
});// 3

replaceAll(selector)

ipt.replaceAll($(".price"));//用前面替换后面

5、删除
empty()

$("ul").empty();//删除匹配元素的所有子节点

remove([expr])

$("ul>li").remove();//移除当前匹配的元素

$("ul>li").remove(".box");//等价于下面写法
$(".box").remove();

detach([expr])

$(".box").detach();//只是从jQuery对象中删除

$("ul>li").detach(".box");//这个方法在使用的时候不能直接用匹配元素删除，得按照父元素找子元素的方式删除，这样的话 jquery对象里面的删除元素还在。

6、复制
clone([Even[,deepEven]])
(clone的参数如果为true–(深度克隆：克隆dom元素以外，还有事件等等之类) 如果为false–(浅克隆：只是克隆了dom元素))

$(".small").appendTo($(".block"))；//将.small复制一个追加进去

$(".small").clone(true).appendTo($(".block"));//深度克隆

七、总结
这次总结的知识点和内容较多，不难，但是记忆量较大。所以得多练习，在练的时候加深记忆，效果会更好。