JQuery基础--学习笔记

最新推荐文章于 2024-11-10 15:10:09 发布

海蛋2333

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量832

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/m0_60679171/article/details/124382860

版权

本文介绍了JQuery的基础知识，包括下载与导入JQuery库，使用JQuery对象进行DOM操作，详细阐述了选择器、事件绑定、样式操作以及DOM操作的方法。同时，讲解了JQuery的动画效果、遍历方法和事件绑定的多种方式。此外，还探讨了JQuery对象与JavaScript对象的区别与转换，并展示了如何通过扩展JQuery实现自定义功能。

摘要由CSDN通过智能技术生成

JQuery基础：

概念：一个JavaScript框架。简化JS开发
- JavaScript框架：本质上就是一些js文件，封装了js的原生代码
快速入门
1. 步骤：
  1. 下载JQuery
    
    *jquery-xxx,js和jquery-xxx.min.js区别
    1. jquery-xxx.js：开发版本。给程序员看的，可读性强
    2. jquery-xxx.min.js：生产版本你。程序中使用，没有缩进。体积小一些
  2. 导入JQuery的js文件
```
<script src="js/jQuery-3.6.0.min.js"></script>
```
  3. 使用
    - var div1 = $(“#div1”);
      
      alert(div1.html());
JQuery对象和JS对象区别与转换
1. JQuery对象在操作时，更加方便
2. JQuery对象和js对象方法是不通用的
3. 两者相互转换
  - jq --> js：jq对象[索引] 或者 jq对象.get(索引)
  - js --> jq：$(js对象)
选择器：筛选具有相似特征的元素(标签)
1. 基本语法学习：
  1. 事件绑定
  2. 入口函数
```
$(function(){
    
	$("#b1").click(function(){
		$("#one").css("backgroundColor","pink");
	});
    
});
```
  3. 样式
2. 分类：
  1. 基本选择器
    ID选择器： $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id名") 类选择器：$ (“.类名”)
    标签选择器：$(“标签名”)
    
    并集选择器：$(“选择器1,选择器2…”)
  2. 层次选择器
    选择直接子元素： $(" 父元素 > 元素 ") 选择所有后代子元素：$ (“父元素子元素”)
    选择直接兄弟元素： $(" 元素 A + 元素 B ") 即选择 A 下面的符合条件的第一个兄弟元素选择所有兄弟元素：$ (“元素A ~ 元素B”) 选择A下面符合条件的所有兄弟元素
  3. 属性选择器
    1. 属性名称选择器：$(“A[属性名]”) 包含指定属性的选择器
    2. 属性选择器：$(“A[属性名]=‘值’”) 包含指定属性定于指定值的选择器
    3. 复合属性选择器：$(“A[属性名=‘值’] [B]…”) 包含多个属性条件的选择器
    4. $("元素[id!=...]") 选取该元素中id不为…的元素
    5. $("元素[id^=...]") 选取该元素中id以…开头的元素，类似正则
    6. $("元素[id$=...]") 选取元素中id以…结尾的元素
  4. 过滤选择器
    $("元素:first") 选取该元素的第一个元素
    $("元素:last") 选取该元素的最后一个元素
    $("元素:not(.类名)") 选取该元素中不是这个类名的元素
    $("元素:even/odd") 选取该元素中索引为偶数/奇数的元素
    $("元素.eq(index值)") 选取该元素中索引为index的元素
    $("元素.gt(n)") 选取该元素中索引大于n的元素
    $("元素:lt(n)") 选取该元素中索引小于n的元素
    $(":header") 选取网页中所有的h1~h6
    $("元素:animated") 选取该元素中正在执行动画的元素
  5. 表单过滤选择器
    1. 可用元素选择器：enabled 获得可用元素例如：$("A[属性名]:enabled") 以下同理）
    2. 不可用元素选择器：disabled 获取不可用元素
    3. 选中选择器：checked 获取单选/复选框选中的元素
    4. 选中选择器：selected 获得下拉框中的元素
  6. 可见过滤器
    1. $("元素:visible") 选取该元素中可见的
    2. $("元素:hidden") 选取该元素中隐藏的
  7. 表单选择器
    1. $(":input")
    2. $(":text")
    3. $(":password")
    4. $(":checkbox")
    5. …
DOM操作
1. 内容操作
  1. html()：获取/设置元素的标签体内容
  2. text()：获取/设置元素的标签体纯文本内容
  3. val()：获取/设置元素的value属性值
2. 属性操作
  1. 通用属性操作
    1. attr()：获取/设置元素的属性 内容 --> 内容
    2. removeAttr()：删除属性 内容 --> 内容
    3. prop()：获取/设置元素的属性
    4. removeProp()：删除属性
      
      例：
```
//设置北京结点的name属性值为beijing（新增name属性写法一样）
$("#bj").attr("name","beijing");
```
    - attr和prop区别：
      - 如果操作的是元素的固有属性，则建议用prop
      - 如果操作的是元素自定义属性，则建议使用attr
  2. 对class属性操作
    1. addClass()：添加class属性值
    2. removeClass()：删除class属性值
    3. toggleClass()：切换class属性
      - toggleClass(“one”)：判断如果元素对象上存在class=“one”，则将属性值one删除。如果不存在则添加
    4. css()
3. CRUD操作、：
  1. append()：父元素将子元素追加到末尾
    - 对象1.append(对象2)：将对象2添加到对象1元素内部的末尾
  2. prepend()：父元素将子元素追加到开头
    - 对象1.prepend(对象2)：将对象2添加到对象1元素内部的开头
  3. appendTo()：
    - 对象1.appendTo(对象2)：将对象1添加到对象2元素内部的末尾
  4. prependTo()：
    - 对象1.prependTo(对象2)：将对象1添加到对象2元素内部的开头
  5. after()：添加元素到对应元素后
    - 对象1.after(对象2)：将对象2添加到对象1后边，对象1和对象2是兄弟关系
  6. before()：添加元素到对应元素前
    - 对象1.before(对象2)：将对象2添加到对象1前边，对象1和对象2是兄弟关系
  7. insertAfter()
    - 对象1.insertAfter(对象2)：将对象1添加到对象2后边，对象1和对象2是兄弟关系
  8. insertBefore()
    - 对象1.insertBefore(对象2)：将对象1添加到对象2前边，对象1和对象2是兄弟关系
  9. remove()：移除元素
    - 对象.remove()：将对象删除掉
  10. empty()：清空元素的所有后代元素
    - 对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点

JQuery高级

动画
1. 三种方式显示和隐藏元素
  1. 默认显示和隐藏方式
    1. show([speed,[easing],[fn]])
    2. hide([speed,[easing],[fn]])
    3. toggle([speed],[easing],[fn])
    参数：
    1. speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
    2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
      - swing：动画执行时效果是先慢，中间快，最后又慢
      - linear：动画执行时速度是匀速的
    3. fn：在动画完成时执行的函数，每个元素执行一次。
  2. 滑动显示和隐藏方式
    1. slideDown([speed],[easing],[fn])
      2. slideUp([speed,[easing],[fn]])
      3. slideToggle([speed],[easing],[fn])
  3. 淡入淡出显示和隐藏方式
    1. fadeIn([speed],[easing],[fn])
      2. fadeOut([speed],[easing],[fn])
      3. fadeToggle([speed,[easing],[fn]])
遍历
1. js的遍历方式
  - for(初始化值;循环结束条件;步长)
2. jq的遍历方式
  1. jq对象.each(callback)
    1. 语法：
      jquery对象.each(function(index,element){});
    - index:就是元素在集合中的索引
    - element：就是集合中的每一个元素对象
    - this：集合中的每一个元素对象
    1. 回调函数返回值：
    - true:如果当前function返回为false，则结束循环(break)。
    - false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
```
例：

```javascript
  $(function(){
     	var citys = $("#city li");
      city,each(function(index,element){
          
          if("上海" == $(element).html()){
              return false;//结束循环
          }
          
          alert(index+“：”+$(element).html());
      });
  });
```
```
  1. $.each(object, [callback])
  2. for…of: jquery (3.0 版本之后提供的方式)
    for(元素对象 of 容器对象)
事件绑定
1. jquery标准的绑定方式
  - jq对象.事件方法(回调函数)；
  - 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
    - 表单对象.submit();//让表单提交
```
$("#name").click(function (){
 	alert("我被点击了");
});
```
2. on绑定事件/off解除绑定
  - jq对象.on(“事件名称”,回调函数)
  - jq对象.off(“事件名称”)
    - 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
```
$("#btn").on("click",function (){
	alert("我被点击了");
});
```
3. 事件切换：toggle
  - jq对象.toggle(fn1,fn2…)
    - 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…
  - 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

插件：增强JQuery的功能

实现方式：
1. $.fn.extend(object)
  - 增强通过Jquery获取的对象的功能 $(“#id”)
2. $.extend(object)
- 增强JQuery对象自身的功能 $.JQuery

<script type="text/javascript">
    $.fn.extend({
        //定义了一个check方法，所有的jq对象可以调用该方法
        check:function (){
            //让复选框选中

            //this:调用方法的jq对象
            this.prop("checked",true);
        },
        uncheck:function (){
            //让复选框不选中
            this.prop("checked",false);
        }
    });
    $(function (){
        //获取按钮
        // $("#btn-check").check()
        $("#btn-check").click(function (){
            //获取复选框对象
            $("input[type='checkbox']").check();
        });
        $("#btn-uncheck").click(function (){
            //获取复选框对象
            $("input[type='checkbox']").uncheck();
        });
    });
</script>