Jquery基础

Posted 2021-11-30 liyado

1. 概念

　　　　　　jQuery是一个快速、简洁的javascript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。 jQuery设计的　　　　　　宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript　　　　　　设计模式， 优化html文档操作、事件处理、动画设计和Ajax交互。

• Jquery对象和JS对象区别与转换

　　　　JQuery对象在操作时更加方便，但是他们不通用，

　　　　他们之间的转换

    　　jq-->js :jq对象[索引]或者jq对象.get(索引)
　　
 　　   js-->jq : jq：$(js对象)

 

1. 选择器

a)         基本语法学习

1. 事件绑定

 

1. 入口函数

　　　　　　$(function () {

 

     　　 　　  });

　　　　indow.onload和$(function)区别

　　　　window.onload只能定义一次。如果定义多次后面的会将前面的覆盖

　　　　$（function）可以定义多次

1. 样式

　　//吧div背景颜色设置成红色

      　　  $(function () {

           　　 //方法1

            　　$("#div1").css("background-color","red")

          　　  //方法2

          　　  $("#div2").css("backgroundColor","pink")

     　　   })                                  

 

b) 筛选具有相似特征的元素（标签）

基本选择器

1. 标签选择器　　$(“html标签名”)获取所有匹配标签名称的元素
2. Id选择器　　   $(“#id标签名”)获取与指定id属性值的元素
3. 类选择器　　  $(“.class的属性值”)获得与指定的class属性值匹配的元素
4. 并集选择器：  $(“选择器1，选择器2...”)获取多个选择器选中的所有元素

层级选择器

1. 后代选择器　$(“ A  B”)选择A元素内部的所有B元素
2. 子选择器$(“A>B”) 选择A内部的所有B子元素

属性选择器

 

2. 属性选择器　　$(“A[属性名=’值’]”)包含指定属性等于指定值的选择器
3. 符合属性选择器　　$(“A[属性名=’值’][]...”)包含多个属性条件的选择器

过滤选择器

1. 首元选择器　　first 获取现在元素的第一个元素
2. 尾元选择器       last获取现在元素的最后一个元素
3. 非元选择器        not(selsctor)不包括指定内容的元素
4. 偶数选择器        neve偶数，从0开始
5. 奇数选择器　　odd奇数
6. 等于选择器　　eq（index）指定索引元素
7. 大于选择器       gt（index）大于指定索引元素
8. 小于选择器       lt （index）

表单过滤选择器

1. 可用元素选择器　　enabled
2. 不可用元素选择器     disabled
3.  选中选择器  Checked    slected

 

　　DOM操作

　　　　内容操作

　　　　　　a)         html();  获取元素的标签体内容 <a><font>内容</font></a>    à<font>内容</font>

　　　　　　b)         text();  获取元素标签体纯文本内容  <a><font>内容</font></a>    à内容

　　　　　　c)         val();   获取元素的value属性值

　　属性操作

　　　通用属性操作

1. 　　attr();               　　      获取元素的属性值
2. removeAttr();               删除属性
3. prop()                          获取元素的属性值
4. removeProp();             删除属性

attr和prop区别

1. 如果操作的是固有属性，则建议使用prop
2. 如果操作的是元素自定义的属性，则建议使用attr

b)       对class属性操作

1. addClass();                  添加class属性值
2. removeClass();        删除class属性值
3. toggleClass();             切换class属性

*toggleClass(“one”):

判断如果是元素对象存在class=”one”, 则将属性值one删除掉。如果元素对象上不存在class=”one” 则添加

     CRUD操作

a)       append(): 父元素将子元素追加到末尾

　　　  对象A.append(对象B)：将对象B添加到对象A元素内部，并且在末尾

b)       prepend():父元素将子元素增加到开头

　　　   对象A. prepend (对象B)：将对象B添加到对象A元素内部，并且在开头

c)       appendTo()

　　　　对象A.appendTo(对象B)：将对象A添加到对象B内部，并且在末尾

d)       prependTo();

　　　　对象A. prependTo (对象B)：将对象A添加到对象B内部，并且在开头

e)       after():添加元素到元素后面

　　　　对象A.after(对象B):将对象B添加到对象A后边。对象A和对象B是兄弟关系

f)        before();添加元素到元素前面

　　　　对象A. before (对象B):将对象B添加到对象A前边。对象A和对象B是兄弟关系

g)       insertAfter()

　　　　对象A. insertAfter (对象B):将对象B添加到对象A后边。对象A和对象B是兄弟关系

h)       insertBefore()

　　　　对象A. insertBefore (对象B):将对象B添加到对象A前边。对象A和对象B是兄弟关系

i)         remove()：移除元素

　　　　对象.remove():将对象删除掉

j)         empty():清空元素的所有后代元素

　　　　对象.empty();将对象后代元素全部清空，但保留当前对象以及属性节点