JQuery基础学习笔记

2020-11-16 15:03:25 阅读：123 来源： 互联网

概念：一个简洁的javascript框架，封装了一些javascript常用的代码

使用：

选择器

    var div = $("#div") //获取特定id的元素对象

事件：

$("#div").click(function(){
    //绑定一个点击事件

})

$(function(){
//与window.load=function(){}功能一致
})

$("#div").css=("样式名","设置的样式的值")


- 选择器：

```javascript
//基本选择器
//1.标签选择器
$("html标签名")//选择所有匹配标签名称的元素
//2.id选择器
$("#id的属性值")//选择指定id属性值的元素
//3.类选择器
$(".class的属性值")//获得与指定的class属性值匹配的元素

//层级选择器
//1.后代选择器
$("A B")//获得A的所有后代B
//2.子类选择器
$("A > B")//获得A元素内部的所有子类元素

//属性选择器
//1.属性名称选择器
$("A[属性名]") //获得指定属性的选择器
//2.属性选择器
$("A[属性名='属性值']")//获得 指定属性值的元素
//3.复合属性选择器
$("A[属性名='属性值'][]...")//包好多个属性条件的元素

//过滤选择器
$("A:first")
$("A:last")
$("A:not(selecter)")//获取不为所选择类型的元素
$("A:even")//单数
$("A:odd")//双数
$("A:gt(index)")//比索引大
$("A:eq(index)")
$("A:lt(index)")
$(":header")//标题元素h1-h6

//表单过滤选择器
//1.可用元素选择器
$("selceter:enabled")
//2.不可用元素选择器
$("selecter:disabled")
//3.选中选择器
$("selecter:checked")//复选框
//4.选中选择器
$("selecter:selected")//下拉列表

DOM操作
- 内容操作
  - 1.text() 获取/设置元素的纯文本
  - 2.html() 获取/设置标签体的内容
  - 3.val 获取/设置元素的value属性值
- 属性操作
  - 通用属性操作
    - 1.attr()
    - 2.removeAttr()
    - 3.prop()
    - 4.removeProp()
  - prop操作元素的固有属性
  - attr操作元素的自定义属性
  - 对class属性的操作
    - 1.addClass() 添加元素的class属性
    - 2.removeClass() 删除class属性值
    - 3.toggleClass() 切换class属性，判断元素对象上是否存在对应的class属性，有则删除，无则添加
- CRUD
  - append()：父元素将子元素添加到内部的末尾
  - prepend：父元素将子元素添加到内部的开头
  - 对象1.appendTo(对象2)：将对象1添加到对象2的内部末尾
  - 对象1.prependTo(对象2):将对象1添加到对象2的内部的开始
  - 对象1.after(对象2)：将对象2添加到对象1的后面，平级关系
  - 对象1.before(对象2)：将对象2添加到对象1的前方，平级关系
  - 对象1.insertAfter(对象2)：将对象1添加到对象2的后面，平级关系
  - 对象1.insertBefore(对象2)：将对象1添加到对象2的前方，平级关系
  - remove():将对象删除
  - empty()：清除对象的后代元素，但是保留当前对象
- JQuery动画
  - 隐藏显示：show，hide，toggle
  - 淡入淡出：fadeIn，fadeOut，fadeToggle
  - 滑入滑出：sildeUp，sildeDown，sidleToggle
- 遍历
  - js的遍历方式：for(初始化值，循环结束条件，步长)
  - JQ的遍历方式：
```
A.each(function(){
    this.Xxx;//this指代遍历的元素
})

A.each(index,element){
    index//指代索引
    element//指代便利的元素对象
}
//如果返回为false则结束循环，返回为true则结束本次循环，开启下次循环

$.each(object，[callback])
$.each(A,function(){
    $(this).Xxx;
})

//在JQuery3.0之后
for(B of A){
    $(B).Xxx;
}
```
- 事件绑定
  - jquery标准的绑定方法---->jq对象.事件方法(回调函数)；
  - on绑定事件/off解除绑定---->jq对象.on("事件名称"，回调函数)；jq对象.off("事件名称")
  - 事件切换toggle---->jq对象.toggle(fn1,fn2... ...)

标签：JQuery,对象,元素,笔记,class,学习,添加,选择器,属性
来源： https://www.cnblogs.com/kmchen/p/13985060.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JQuery基础学习笔记