search

博客列表 >$()的四种类型参数的应用场景实例演示;以及jq转js的方法

$()的四种类型参数的应用场景实例演示;以及jq转js的方法

冰雪琉璃
冰雪琉璃原创
2021年04月27日 15:19:25755浏览

$()的四种类型参数

1.当函数用，创建jquery对象
2.函数也是对象，所以可以当成对象来用可以获取属性值
3.$(“选择器,”上下文”)：获取dom元素,$()将原始的js转化为jquery，简称jquery包装器
4.$(“回调”).dom树一旦创建完成，就会执行这个回调

分别的实例演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery</title>
  6.     //引入jq
  7.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  8. </script>
  9. </head>
  10. <body>
  11. <script>
  12. //$(html文本):创建dom元素不用想js那样创建dom元素。
  13. $("<h1>我是h1</h1>").css("color","green").appendTo("body");
  14. </script>
  15. </body>
  16. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery</title>
  6.     //引入jq
  7.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  8. </script>
  9. </head>
  10. <body>
  11. <script>
  12.  let fn=(email,name)=>{console.log(this.email);console.log(this.name)};
  13.  fn.email="amdind@qq.com";
  14.  fn.name="小米";
  15. </script>
  16. </body>
  17. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery</title>
  6.     //引入jq
  7.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  8. </script>
  9. </head>
  10. <body>
  11. <ul class="list">
  12. <li class="item">item1</li>
  13. <li class="item">item2</li>
  14. <li class="item">item3</li>
  15. <li class="item">item4</li>
  16. <li class="item">item5</li>
  17. <li class="item">item6</li>
  18. <li class="item">item7</li>
  19. </ul>
  20. <script>
  21.  $(".list item").css("background-color","green");
  22. </script>
  23. </body>
  24. </html>
  25. ``````html
  26. <!DOCTYPE html>
  27. <html lang="en">
  28. <head>
  29.     <meta charset="UTF-8">
  30.     <title>jquery</title>
  31.     //引入jq
  32.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  33. </script>
  34. </head>
  35. <body>
  36. <p>握手</p> 
  37. <script>
  38. $(function(){
  39. $("body p").css("background-color","red");
  40.   });
  41. // 箭头函数简化
  42. $(()=>(
  43.      $("body").css("background-color","red")
  44.  ));
  45. </script>
  46. </body>
  47. </html>

jquery的增删改查的方法

1.增加元素

  • append(),prepend(),after(),before(),insertBefore（）,insertAfter(),appendTo()，prependTo()
  1. 删除元素
  • remove()
    3.修改替换元素
  • replaceWith(),replaceAll()
    4.查找元素
    -$()

    不同之处

    1. append(),prepend()在父元素上调用，表示在尾部.头部添加子元素
    2. appendTo()，prependTo()在子元素上调用，表示在尾.头部添加子元素
    3. after(),before()在任意指定的位置添加元素
    4. insertAfter(),insertBefore()不是添加子元素，而是添加兄弟节点.
      5.replaceAll:新节点操作,replaceWith()原来的元素上的操作
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title></title>
      6. <!-- 内联样式 -->
      7. <style type="text/css">
      8. .user{
      9.     font-size: 1em;
      10.     color:pink;
      11. }
      12. </style>
      13. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
      14. </script>
      15. </head>
      16. <body>
      17. <!-- 行内样式 -->
      18. <h1 class="user">用户界面</h1>
      19. <p>p</p>
      20. <div class="form">
      21. <form action="php.cn" id="login" name="login" method="post" style="width:100px;">
      22. <lable for="email">Email</lable>
      23. <input type="email" name="email" id="email" value="email" autofocus placeholder="email" />
      24. <lable for="password">密码</lable>
      25. <input type="password" name="password"  value="12333" id="password" autofocus />
      26. <div>
      27. <lable for="male">性别</lable>
      28. 男:<input type="radio" name="male" id="male" value="1" />
      29. <lable for="female"></lable>
      30. 女:<input type="radio" name="female" id="female" value="2" checked />
      31. </div>
      32. <button return false>登陆</button>
      33. </form>
      34. </div>
      35. <script type="text/javascript">
      36. //find()是找到指定的元素。
      37. $(".form").append("<p>我是添加到表单后面的p元素          </p>").find(":last").addClass("user").css("background","red");
      38. $(".form").prepend("<p>我是添加到表单前面的p元素</p>").find(":first").addClass("user").css("background","red");
      39. $("<p>我是添加到表单后面的p元素</p>").css("color","red").appendTo($(".form"));
      40. $("<p>我是添加到表单前面的p元素</p>").css("color","red").prependTo($(".form"));
      41.  $("<h1>商品列表</h1>").insertAfter(".form");
      42.  $("<h3>我是h3</h3>").insertBefore(".form");
      43.  $(".user").replaceWith("<h2>用户登陆界面</h2>")
      44.  $("<h2>用户登陆界面w</h2>").replaceAll($(".user"));
      45.  $(".list .item").remove(".item:nth-of-type(2)");
      46. </script>
      47. </body>
      48. </html>
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>jquery</title>
      6. //引入jq
      7. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
      8. </script>
      9. </head>
      10. <body>
      11. <p>握手</p> 
      12. <ul class="list">
      13. <li class="item">item1</li>
      14. <li class="item">item2</li>
      15. <li class="item">item3</li>
      16. <li class="item">item4</li>
      17. <li class="item">item5</li>
      18. <li class="item">item6</li>
      19. <li class="item">item7</li>
      20. </ul>
      21. <script type="text/javascript">
      22. //如果只想复制一个原有的元素而不希望是移动则用clone()
      23. $(".list .item").last().clone().appendTo(".list");
      24. $(".list .item").first().clone().prependTo(".list");
      25. //remove():在被删除的元素上操作
      26. $(".list .item").last().remove();
      27. $(".list .item").remove(".item:nth-of-type(2)");
      28. //eq(从0开始计数)，next():下一个兄弟节点,prev()前一个兄弟节点。
      29. $(".list .item").eq(3).after('<li class="item">new-li</li>').next().css("color","red");
      30. $(".list .item").eq(3).before('<li class="item">new-li</li>').prev().css("color","red");
      31. </script>

      jquer转为js的原因

  • 因为jquery的局限性，很多时候需要将其转化为js。$()返回的是一个jquery集合，但是集合中的每一个是一个js对象，不能使用jquery的方法来为集合中的子元素设置属性。

    实例演示：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>jquery</title>
    6.   //引入jq
    7.   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    8. </script>
    9. </head>
    10. <body>
    11. <ul class="list">
    12. <li class="item">item1</li>
    13. <li class="item">item2</li>
    14. <li class="item">item3</li>
    15. <li class="item">item4</li>
    16. <li class="item">item5</li>
    17. <li class="item">item6</li>
    18. <li class="item">item7</li>
    19. </ul>
    20. <script type="text/javascript">
    21. $(".list .item")[0].style.background="pink";//可以修改第一个li的背景色
    22. $(".list .item")[0].css("background-color","red");//无法修改第一个li的背景色
    23. // get(参数)方法是jquery的封装方法，参数从0开始计算。
    24. $(".list .item").get(0).style.background="red";
    25. //为整一个ul设置边框。
    26. $(".list")[0].style.border="1px solid";//正确
    27. $(".list").style.border="1px solid";//错误用法
    28. </script>

    jquery attr()用法

  • attr():获取元素的属性值
  • attr(name):一个值代表获取
  • attr(name,value):两个值代表获取并且重新设置
  • removeAttr(name):删除属性
上一条：如何用nodeJs向别的服务器上传文件发送formData数据？下一条：【php基础入门】细说php的变量以及常量的知识点详解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多