jQuery基础知识。_preappend-CSDN博客

本文链接：https://blog.csdn.net/Renkx0404/article/details/77429264

jQuery的概念：
jquery是一个JavaScript库极大的简化了javascript的编程。其拥有强大的选择器支持，不仅支持css中选择器。同时也拥有其独特的选择器，同时也解决了各种浏览器的兼容问题。
jquery语法：

$(selector).action()

选择符selector是查询和查找HTML元素。
jQuery中action（）执行元素的操作。

- 美元符号定义jquery

        1：$就是jquery对象；
        2：$就是jquery选取元素的符号；
        3：$就是jquery中功能元素的前缀；

- jquery 选择器：

        a:基础选择器， 
        b:层级选择器， 
        c:属性选择器， 
        d：伪类选择器；

基本的基础选择器有：

        id选择器 ————–$(‘#id_name’)
        元素选择器————$(‘tag_name’)
        类选择器—————$(‘.class_name’)
        群组选择器————$(‘class_name1,class_name1’)
        层级选择器有:

        后代选择器————$(‘M N’)
        子代选择器————$(‘M>N’)
        兄弟选择器————$(‘M~N’)
        相邻选择器————$(‘M+N’)

暂时记录这些选择器，以后再做补充。
window.onload和document.ready的区别
两个都是dom文件加载完成之后才执行，但是他们之间有一定的区别，
$（document）.ready(function(){})是等所有的dom结构加载完成后才执行；而window.οnlοad=function(){}是等到页面上包括图片的所有元素加载完毕后才执行。
window.οnlοad=function(){}不能同时编辑多个，如果有多个只会执行一个window.onload方法；而document.ready则可以执行多个。

页面内容操作

text（）方法：获取和设置摸个元素的文本内容；
html（）方法：获取和设置某个元素的html内容，包含内容和html标签；
val（）方法：获取和设置表单元素的值；

属性操作

attr（）方法设置和返回匹配元素属性值。

  返回被选元素的属性值：
  语法：$(selector).attr(attribute)

  设置被选元素的属性值：
  语法：$(selector).attr(attribute，value)

   使用函数来设置属性值：
   语法：$(selector).attr(attribute，function(index,oldvalue){})

removeAttr（）方法移除属性和属性值
语法：$(selector).removeAttr(attribute，value)；
注意：只能删除自身属性或者是用内部样式设置的属性，也可以删除多个属性和属性值

css属性操作

 1. 获取css属性值：
         语法：：$(selector).css(‘属性’)
 2. 设置单个css属性：
        语法：$(selector).css(‘属性’，‘属性值’)
 3. 设置多个css属性：
         语法：$(selector).css({
                                     ‘属性’，‘属性值’，
                                     ‘属性’，‘属性值’，
                                     ‘属性’，‘属性值’
                                     })

css类操作

jQuery中类名的操作包括：添加，删除和切换

 1. addclass（）方法：向被选元素添加一个或是多个类名；

 2. removeclass（）方法 :向被选元素删除一个或是多个被选元素；

 3.  toggleclass（）方法 :向被选元素进行添加和删除类名的切换；

        语法：$(selector).toggleclass(classname，function( index , currentclass ) {}，switch )

        注释：
       classname：必须的。规定添加或删除的一个或是多个类名，如果需要规定多个类名，使用空格分开类名。

       function( index , currentclass )：可选，规定返回需要添加或是删除的一个或是多个类名的函数。
       1：index 返回集合中元素的index的位置；
       2：currentclass 返回被选元素当前的类名；
       3：switch 布尔值，规定是否仅仅是删除（false）或是添加（true）；

元素的宽度和高度：

 1.width（）方法设置和返回元素的宽度（不包括内边距和边框）；
 2.innerwidth（）方法设置和返回元素的宽度（包括内边距）；
 3.outwidth（）方法设置和返回元素的宽度（包括内边距和边框），outwidth（true）（包括内外边距和边框）；

height（），innerheight（），outheight（）与width类似；

元素的位置
1. offset（）方法返回和设置被选元素的相对于文档中的偏移位置。
该方法返回的对象包括两个整型属性： top和left，以像素计，此方法只对可见元素有效。

 设置偏移坐标： $(selector).offset(‘属性’)

 使用函数来设置所有匹配的元素的偏移坐标：
 $(selector).offset(function(index,oldoffset) })

 index：可选，接收选择器的index位置；
 oldoffset：可选接收选择器当前的坐标；

            $(selector).offset({ 
                top： num1，
                left： num2
            })
            $(selector1).offset(selector2)

2: positon()方法返回匹配元素相对于父元素的位置；
Dom操作
重点：节点的插入，删除，替换，复制,

1. 创建节点：

    $(html)  如： $("<li></li>")
    $(html)  如： $("<li class="classname"></li>")

2.append（）和appendTo（）
append（）方法在被选的元素的结尾插入指定内容

 语法： $(selector).append（content）
 语法： $(selector).append（function(index,html){}）
  appendTo（）和append（）的作用类似都是将所选的元素内容的末尾插入内容。
 语法： $(content).appendTo（selector）；

3.preappend（）和preappendTo（）

 preappend（）方法在被选的元素的前面插入指定内容

上述的四中方法，无论是将内容将在前面还是后面，无论是content在前还是在后，这里都是在将content添加到指定元素的内部，成为器子元素。
其他
after(content|fn)：在每个匹配的元素之后插入内容。
注释：content：插入到每个目标后的内容
function：函数必须返回一个html字符串。
insertAfter(content)，insertBefore(content)和before(content|fn)这四个方法和上面的四个方法用法类似，但是这里添加的元素和被选中的元素之间的关系是兄弟关系。

删除和复制节点

删除节点：
删除节点有三种方法：remove([expr])，detach([expr])和empty()

  reove([expr]):删除匹配元素中所有的子节点，（绑定的事件附  加的数据都会被移除）
detach([expr])：从DOM中删除所有匹配的元素。
empty()：删除匹配的元素集合中所有的子节点。

2复制节点

clone([Even[,deepEven]])：克隆匹配的DOM元素并且选中这些克隆的副本。在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
Events：一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false