search

博客列表 >jquery入门和dom操作及事件学习

jquery入门和dom操作及事件学习

G
G原创
2020年11月12日 13:37:10573浏览

jQuery 入门细说

$ 是否等于 jQuery

答案：等于
jQuery 对象是一个返回值
jQuery 是一个静态的方法，是直接定义在 jQuery 上的方法

$ 符号的应用场景

  1. $(选择器,上下文): 获取元素

    上下文：上下文是指当前元素所处的环境，可以理解为容器。
    假如现在container容器下有一个标题h2,那这个h2标题的上下文就是 container

  1. <ul id="first">
  2.   <li>item1</li>
  3.   <li>item2</li>
  4.   <li>item3</li>
  5. </ul>
  6. <script>
  7.   // 1.选择器
  8.   $("#first").css("color", "blue");
  9.   //   2. 选择器和上下文的共用
  10.   $("li", "#first").css("color", "green");
  11. </script>
  1. $(JS 对象)

    \$(js 对象): 包装器,将原生的 js 对象转为 jQ 对象,这样就可以使用 jQuery 中的功能

  1.       //   原生JS
  2.       document.body.style.backgroundColor = "yellow";
  3.       //   转换为JQ
  4.       $(document.body).css("backgroundColor", "lightgreen");

每一个 jquery 的方法都自带迭代功能(自带循环)

  1.       document.querySelectorAll("li").forEach((item) =>item.style.color = "red")
  2.       $(document.querySelectorAll("li")).css("color", "red");

  • jQuery对象中某一个元素还原成原生的js对象, get()
  1. // 原生JS代码实现
  2. $(document.querySelectorAll("li")).get(1).style.color = "blue";

  1. $(html 文本):生成元素
  1.       //   原生JS插入
  2.       const h2 = document.createElement("h2");
  3.       h2.innerHTML = "Hello H2 Title!";
  4.       document.body.appendChild(h2);
  5.       //   JQ插入
  6.       $("<h2>JQ插入的H2标题</h2>").appendTo(document.body);

  1. $(callback):回调函数

    作用：传一个回调函数,这个函数可以在页面 dom 创建完成的时候自动调用

  1. <head>
  2.   <meta charset="UTF-8" />
  3.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  4.   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  5.   <script>
  6.     $(function () {
  7.       $("h2").css("color", "red");
  8.     });
  9.   </script>
  10.   <title>$()函数</title>
  11. </head>

上述回调函数是在所有页面加载完成之后才会去执行。

getter / setter 方法

  1. attr()

    attr(name):只有一个属性的时候表示获取该属性名
    attr(name,value)获取/设置元素的属性
    name是获取元素的属性名，value是设置元素属性的值

  1.         const form = $("form")
  2.         console.log(form.attr("action"))
  3.         // 使用attr方法来重新设置属性action的value值
  4.         form.attr("action","admin/text1.php")
  5.         console.log(form.attr("action"))

第二个参数支持回调函数：attr(name,function)
什么是回调函数呢？回调函数就是自己写好但是不调用，留给其他开发人员刁调用的函数

  1.         const form = $("form")
  2.         form.attr("action",()=>{
  3.           // 将method全部转为小写
  4.             let method = form.attr("method").toLowerCase()
  5.             // 判断是否是get方式，是就跳转到admin/retuan.php，反之跳转login.php
  6.             return method === "get"? "admin/retuan.php":"login.php"
  7.         })
  8.         console.log(form.attr("action"));
  1. css()

    css(name): 获取
    css(name,value): 设置
    css(name, callback): 第二个参数支持回调

  1.         const form = $("form")
  2.         console.log(form.css("width"));
  3.         form.css("border","2px solid red")

添加边框效果：

小案例，实现注册表单随机背景：

Math.floor和Math.random > Math.random：返回 0-1 之间的小数。
Math.floor向下取整，返回整数。
Math.random返回 0-1 之间的小数：

console.log(Math.random())

Math.floor(x)向下取整，x为一个最大值，返回的是小于或等于x的整数
console.log(5) //最后返回的值是5
console.log(5.5) //最后返回的值是5
console.log(-5.5) //最后返回的值是-5

案例代码：

  1.         form.css("background-color",()=>{
  2.             let bgcolors = ["tan","lightgreen","lightred","lightblue"]
  3.             // 四个元素，索引0-3
  4.             let i =Math.floor(Math.random()*bgcolors.length)
  5.             return bgcolors[i]
  6.         })

  1. val(): 表单元素的 value 属性的值
    查看元素value属性的值：
  • 查看值：
  1.         console.log($("#email").val());
  2.         let data = {
  3.             email : $("#email").val(),
  4.             password : $("#password").val(),
  5.             status: $('input:radio[name="save"]:checked').val(),
  6.         }
  7.         console.log(data)


  • 更新值：
  1.         $("#email").val("123456789@qq.com");
  2.         console.log($("#email").val());

  1. text()和html()

    html() ==> innerHTML
    text() ==> innerText

  1. <h2 class="red"><em>用户登录</em></h2>
  2. <script>
  3.   // innerHTML: 返回完整的内容,包括html标签
  4.   console.log(document.querySelector("h2").innerHTML);
  5.   // innerText: 只返回文本
  6.   console.log(document.querySelector("h2").innerText);
  7.   console.log($("h2").html());
  8.   console.log($("h2").text());
  9. </script>

dom 操作

  1. 添加元素

    append:必须是在父元素上调用，必须要有一个父级。parent.append(新元素) >appendTo:是在当前元素上调用，往父元素上添加。current.appendTo(parent)

  1.       const ol = $("<ol>");
  2.       $("<li>").text("iphone12").appendTo(ol);
  3.       $("<li>").text("小米10Pro至尊版").appendTo(ol);
  4.       $("<li>").text("华为Mate40").appendTo(ol);
  5.       $("body").append(ol);

  1. 过滤器

  • 将 jQuery 对象转为 JS 原生对象

    [index]和get(index)都可以实现
    console.log($("ul")[1].style.color = "red") > console.log($("ul").get(1).style.color = "blue")

  • 过滤

    children和find的区别：
    children只能选择子元素集合,不能选择所有后代(任何层级)，但是find可以选择所有层级。

  1.       let children = $("ul").filter("#first").children();
  2.       //   选择第一个子元素
  3.       children.first().css("background", "blue");
  4.       //   选择任意一个元素：eq(index)
  5.       children.eq(2).css("background", "lightgreen");
  6.       children.last().css("background", "red");
  7.       console.log(
  8.         $("#first").filter("#first").find(".red").css("background", "yellow")
  9.       );


  • jQuery 事件

    事件是分等级的 。事件属性或 onclick 定义的是 DOM0 级事件，它不可叠加 。而 addEventListener 事件监听器添加的事件则 DOM2 级事件，可叠加 。也许你会问有没有 DOM1 级事件，DOM 级别 1 于 1998 年 10 月 1 日成为 W3C 推荐标准。1 级 DOM 标准中并没有定义事件相关的内容，所以没有所谓的 1 级 DOM 事件模型。在 2 级 DOM 中除了定义了一些 DOM 相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的 2 级 DOM 事件模型 。

$(‘selector’).事件()定义的DOM0级事件

语法:$(‘selector’).事件(function(event){})或$(‘selector’).事件((event)=>{}) 前者是 function 定义的回调函数，后者是箭头函数定义的回调函数，要注意若是使用\$(this)则必须用第一个。它对应原生 JS 的事件属性定义事件
$(#email).blur(function(ev){console.log($this).val()};)

$(‘selector’).on(事件类型,[数据,]回调函数)定义的DOM2级事件

它对应原生 JS 的事件监听器 addEventListener。

  1. $('input').on('click', event => { console.log('on => ', event); });
  2. //   若是要传递数据则使用json格式的对象，传递给event.data
  3. $('input').on('click', { name: 'ggg', pwd: '123456' }, event => { console.log('on => ', event.data); });
上一条：宝塔面板安装又拍云存储插件定期进行网站数据安全备份下一条：jquery入门探讨和dom操作及事件学习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多