jq导入方法：本地源码与远程代码库

  1.     <!-- 本地源码 ：使用下载好的本地文件-->
  2.     <!-- <script src="jquery-3.5.1.js"></script> -->
  3.     <!-- 远程源码库cdn -->
  4.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

1.$()的四个参数

  1. $(选择器,上下文): 获取元素
  2. $(js对象): jQuiery包装器,js对象是原生的js对象,将原生的js对象转为jQuery对象
  3. $(html文本): 生成dom元素
  4. $(callback回调函数):传一个回调当参数,当页面加载完成后会自动调用它

代码演示

  1.     // $()拿到的是一个jquery对象，不是数组。它是一个集合，自带循环。
  2.     // 1. $(选择器,上下文): 获取元素
  3.     //  原生
  4.     document.querySelectorAll("li").forEach(li => (li.style.color = "red"));
  5.     //  jquery
  6.     //    $("li","#second").css("color","blue")
  7.     // 可以简写成下面这样，不用第二个 上下文。  第二个参数 ‘上下文’ 很少用。
  8.     $("#second li").css("color", "blue")
  11.     // 2. $(js对象): jQuiery包装器,js对象是原生的js对象,将原生的js对象转为jQuery对象
  12.     // 因为想使用jQuery对象上的非常丰富的方法或属性
  13.     //  原生
  14.     document.body.style.backgroundColor = "yellow";
  15.     //  jquery 想用jquery中的css方法来设置style属性(内联样式)
  16.     $(document.body).css("background", "lightgreen");
  17.     // 将jquery对象还原成原生的js对象集合
  18.     // ....spread扩展, ....rest归并
  19.     //   console.log([...$(document.querySelectorAll("li"))]);
  20.     //   [...$(document.querySelectorAll("li"))].forEach(li => (li.style.color = "violet"));
  21.     //    ↑ 同下 ↓
  22.     //   document.querySelectorAll("li").forEach(li => (li.style.color = "violet"));
  23.     //   console.log($(document.querySelectorAll("li")).get(2));
  24.     // get(n)或[n]: 将jQuery集合中的某一个对象还原成原生的js对象
  25.     $(document.querySelectorAll("li")).get(2).style.backgroundColor = "yellow"; //获取第2个
  26.     $(document.querySelectorAll("li"))[0].style.backgroundColor = "yellow";   //获取第0个
  28.     // 3. $(html文本): 生成dom元素
  29.     document.querySelector("#first").insertAdjacentHTML("beforeend", "<li>大家晚上好呀~~</li>");
  30.       //   console.log($("<li>大家晚上好呀~~</li>"));
  31.       //   $("<li>大象吃完了吗?</li>").appendTo(document.querySelector("#first"));
  33.     // 4. $(callback回调函数):传一个回调当参数,当页面加载完成后会自动调用它

2.getter/setter方法

1.attr():获取/设置元素属性

获取，attr(name):getter

  1. const form=$("form");
  2. console.log(form.attr("action"));//index.php

获取并修改，attr(name,value): setter

  1. form.attr("action","admin/index.php");
  2. console.log(form.attr("action"));//admin/index.php

第二个参数可以使用回调

  1.       form.attr("action", () => {
  2.         let method = form.attr("method").toUpperCase();
  3.         return method === "GET" ? "query.php?id=2" : "register.php";
  4.       });
  5.       console.log(form.attr("action"));

2.css()：获取/设置元素的行内样式

css代码

  1. <style>
  2. form{
  3.     width: 100px;
  4. }
  5. input{
  6.     width: 95%;
  7. }
  8. </style>

html代码

  1. <form action="index.php" method="POST">
  2.    帐号： <input type="text" name="username" />
  3.     密码：<input type="password" name="password" />
  4. </form>

css(name): getter 获取元素的行内样式

const form = $("form");
console.log(form.css("width"));

  1.       // 使用style只能获取到style属性上的行内/内联样式
  2.       console.log(document.querySelector("form").style.width);
  3.       // css样式表的样式是获取不到的,必须使用计算样式才可以
  4.       console.log(window.getComputedStyle(document.querySelector("form"), null).getPropertyValue("width"));
  5.       // 使用jquery直接就可以获取到元素的最终的计算样式了

css(name,value):setter 设置元素行内样式

  1.       form.css("border-top", "6px solid green");
  2.       // css(obj)
  3.       form.css({
  4.         "border-bottom": "6px solid blue",
  5.         "background-color": "lightcyan",
  6.       });

支持回调

  1.       // 第二个参数支持回调函数
  2.       form.css("background-color", () => {
  3.         const colors = ["pink", "lightblue", "lime", "yellow"];
  4.         // 四个元素,对应的下标,索引是 0-3
  5.         let i = Math.floor(Math.random() * colors.length);
  6.         return colors[i];
  7.       });

3. val():设置/获取表单控件的value属性

  1. <body>
  2.     <h2 class="red">用户登录</h2>
  3.     <form action="handle.php" method="post" id="login">
  4.       <label for="email">Email:</label>
  5.       <input type="email" name="email" id="email" autofocus value="leture@php.cn" />
  6.       <label for="password">Password:</label>
  7.       <input type="password" name="password" id="password" value="不少于6位" />
  8.       <label for="confirm">记住我:</label>
  9.       <div>
  10.         <input type="radio" name="save" id="confirm" value="1" /><label for="confirm">保存</label>
  11.         <input type="radio" name="save" id="cancel" value="0" checked /><label for="cancel">放弃</label>
  12.       </div>
  13.       <button>登录</button>
  14.     </form>
  15.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  16.     <script>
  17.       // val(): 元素元素的值, 表单控件的value属性
  18.       // 原生
  19.       console.log(document.forms.login.email.value);
  20.       // jquery
  21.       console.log($("#email")[0].value);
  22.       console.log($("#email").get(0).value);
  23.       console.log($("#email").val());
  24.       // 也可以设置新值
  25.       $("#email").val("admin@php.cn");
  26.       console.log($("#email").val());
  27.       // 这样也可以
  28.       console.log($("input:password").val());
  30.       // 查看状态
  31.       console.log($("input:radio:checked").val());
  33.       // val(callback)
  34.       $("#email").val(()=>"123@.email")
  35.     </script>
  36.   </body>

4.html()

  1.   <body>
  2.     <h2 class="red">用户<em style="color: green">登录</em></h2>
  3.     <form action="handle.php" method="post" id="login">
  4.       <label for="email">Email:</label>
  5.       <input type="email" name="email" id="email" autofocus value="leture@php.cn" />
  6.       <label for="password">Password:</label>
  7.       <input type="password" name="password" id="password" value="不少于6位" />
  8.       <label for="confirm">记住我:</label>
  9.       <div>
  10.         <input type="radio" name="save" id="confirm" value="1" /><label for="confirm">保存</label>
  11.         <input type="radio" name="save" id="cancel" value="0" checked /><label for="cancel">放弃</label>
  12.       </div>
  13.       <button>登录</button>
  14.     </form>
  15.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  17.     <script>
  18.       // html(): 相当于innerHTML
  19.       // text(): 相当于innerText / textContent
  20.       console.log(document.querySelector("h2").innerHTML);
  21.       // jquery
  22.       console.log($("h2").html());
  23.       // 只获取纯文本
  24.     </script>
  25.   </body>

更多相关文章

  1. js基础知识：Ajax的get,post异步请求 及 选项卡、换肤实例
  2. jQuery常用dom操作
  3. JavaScript:数学对象，随机生成数字验证码并且随机添加字体颜色
  4. JavaScript:时间对象，实例演示右下角广告图
  5. kivy texture图片格式和opencv numpy图片格式互转
  6. Spring 获取 request 的几种方法及其线程安全性分析
  7. 死磕Spring之AOP篇 - Spring AOP常见面试题
  8. Spring小记
  9. spring工程搭建

随机推荐

  1. 奈何两字拉成桥、不得不双击两次才能激活
  2. 使用node.js托管一个asp.net或jsp网站。
  3. 用原生js实现数字自相加
  4. 将对象值传递给指令而不是任何其他数据变
  5. 使用angularjs添加包含事件的新标记
  6. 使用倒计时进度条退出
  7. jQuery Slimbox没有正确请求文件
  8. 如何通过javascript显示隐藏的div？
  9. Javascript对象
  10. 在jQuery中使用css transform属性