web项目技术必备-------jQuery快速入门

文章目录

  • jQuery
    • 1.概念
    • 2.快速入门
    • 3.jQuery对象和JS对象的区别与转换
    • 4.选择器
    • 5.DOM操作
    • 6.案例

jQuery

1.概念

  • jquery是一个快速、简洁的JavaScript框架,是继prototype之后的又一个优秀的JavaScript框架。jQuery的设计宗旨是“write less,do more”,即倡导写更少的代码,做更多的事情。它封装了JavaScript常用的功能代码,提供一种简便的JavaScript的设计模式,优化html文档操作、事件处理、动画设计和Ajax交互
  • JavaScript框架:本质就是一些js文件,封装了js的原生代码而已

2.快速入门

  • 1.下载jQuery
    • jquery-xxx.js和jquery-xxx.min.js有什么区别?
      • jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释,体积更大一些
      • jquery-xxx.min.js:生产版本。程序中使用,没有缩进,体积小一些,程序加载更快
        2.导入js文件
        3.使用
        4.示例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery快速入门title>
    <script src="js/jquery-3.3.1.min.js">script>
head>
<body>
    <div id="div1">div1111div>
    <div id="div2">div2222div>

<script>
    //入口函数
    $(function () {
      
        //使用jQuery获取元素对象
        alert($("#div1").html());
        alert($("#div2").html());
    })
script>
body>
html>

3.jQuery对象和JS对象的区别与转换

  • jQuery对象在操作时更加的方便
  • jQuery对象和js对象方法不通用
  • 两者的相互转换
    • jquery ----> js
      • jquery对象[索引] 或者 jquery对象.get(索引)
    • js ------- > jquery
      • $(js对象)

4.选择器

  • 1.基本语法学习
    • 1.1.事件绑定
    • 1.2.入口函数
<body>
    <div id="div1">div1111div>
    <div id="div2">div2222div>
    <input id="b1" type="button" value="点我"/>
<script>
    //jquery入口函数与之前原生js中的window.onload的作用一致(dom文档加载完成之后执行该函数的代码)
    $(function () {
      
        //给b1绑定一个单击事件
        $("#b1").click(function () {
      
            alert("ok...")
        });
    })

script>
body>
  • window.onload和$(function(){})的区别
    • window.onload只能定义一次,如果定义多次,后边的会将前面的覆盖掉
    • $(function(){})可以定义多次,不会被覆盖
    • 1.3样式控制
$(function () {
        $("#div1").css("background-color", "red");
        //下面这种写法可以检查样式是否写错了
        $("#div2").css("backgroundColor", "pink");
    });
  • 2.分类
    • 1.基本选择器
      • 1.标签选择器(元素选择器)
        • 语法:$(“html标签名”) 获取所有匹配标签名称的元素
      • 2.id选择器
        • 语法:$("#id") 获取与指定id属性值相匹配的元素
      • 3.类选择器
        • 语法:$(".class属性值") 获取与指定class属性值相匹配的元素
      • 4.并集选择器
        • 语法:$(“选择器1,选择器2…”) 获取多个选择器中选中的元素
    • 2.层级选择器
      • 1.后代选择器
        • 语法:$(“A B”):选择A元素内部所有的B元素
      • 2.子代选择器
        • 语法:$(“A > B”):选择A元素内部所有的子元素B
    • 3.属性选择器
      • 1.属性名称选择器
        • 语法:$(“A[属性名]”) 包含指定属性的选择器
      • 2.属性选择器
        • 语法:$(“A[属性名 = ’ 属性值’]”) 包含指定属性等于指定值的选择器
      • 3.复合属性选择器
        • 语法:$(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
    • 4.过滤选择器
      • 1.首元素选择器
        • 语法::first获得选择的元素中的第一个元素
      • 2.尾元素选择器
        • 语法::last获得选择的元素中的最后一个元素
      • 3.非元素选择器
        • 语法::not(selector)不包括指定内容的元素
      • 4.偶数选择器
        • 语法::even 偶数,从0开始计数
      • 5.奇数选择器
        • 语法::odd 奇数,从0开始计数
      • 6.等于索引选择器
        • 语法::eq(index) 指定索引元素
      • 7.大于索引选择器
        • 语法::gt(index) 大于指定索引元素
      • 8.小于索引选择器
        • 语法::lt(index) 小于指定索引元素
      • 9.标题选择器
        • 标题选择器::header获得标题元素,固定写法
    • 5.表单过滤选择器
      • 1.可用元素选择器
        • 语法: :enabled 获取可用元素
      • 2.不可用元素选择器
        • 语法: :disabled 获取不可用元素
      • 3.选中选择器
        • 语法::checked 获取单选/复选框选中的元素
      • 4.选中选择器
        • 语法: :selected 获取下拉框中选中的元素

5.DOM操作

  • 1.内容操作
    • 1.html():获取/设置元素标签体内容
    • 2.text():获取/设置元素标签体内容
    • 3.val():获取/设置元素的value属性
  • 2.属性操作
    • 1.通用属性操作
      • 1.attr():获取/设置元素
      • 2.removeAttr():
      • 3.prop():
      • 4.removeProp():
        • attr() 和 prop()的区别
          • 1.如果操作的是元素的固有属性,则建议使用prop
          • 2.如果操作的是元素的自定义属性,则建议使用attr
  • 2.对class属性进行操作
    • 1.addClass():添加class属性值
    • 2.removeClass():删除
    • 3.toggleClass():切换
      • toggleClass(“one”):判断如果元素对象上存在class=“one”,那么就删除掉,如果不存在,就添加该属性
    • 4.css():增加样式
  • 3.CRUD操作
    • append():对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾
    • appendTo():与上面相反,追加到开头
    • prepend():对象1.append(对象2):将对象2添加到对象1元素内部,并且在开头
    • prependTo();追加到
    • after():对象1.after(对象2),将对象2添加到对象1后边,并且是兄弟关系
    • before():添加到前边
    • insertAfter(): 将对象2添加到对象1后边,并且是兄弟关系
    • insertBefore():前边
    • remove():删除对象
    • empty():将对象的后代元素清空,但保留当前对象及其属性

6.案例

  • 代码过多就不在这里展示了,只要掌握上面的就足够了。

你可能感兴趣的