Jquery复习2

news/2024/7/11 0:20:00 标签: jquery

个人博客
Jquery复习1
jquery总结

一、元素的相关操作

1、元素的创建

法一

//点击一个按钮,创建一个按钮
  $("#btn").click(function () {
   $("<input type='button' value='按钮'>").appendTo($("#dv"));
  });

法二

  //元素创建的另一个方式
      $("#btn").click(function () {
        //通过innerHTML的方式创建元素---以字符串的方式   
        $("#dv").html("<input type='button' value='按钮'>");
      });

2、元素的添加

$("#btn").click(function () {
        //把创建的span标签这个子元素直接插入到div中第一个子元素的前面
        $("#dv").prepend($("<span>this is span</span>"));
        //主动的方式
        $("<span>this is span</span>").prependTo($("#dv"));
        //把元素添加到div的后面的位置,是div的下一个兄弟元素了
        $("#dv").after($("<span>this is span</span>"));
        //把元素添加到div的前面的位置,是div的上一个兄弟元素了
        $("#dv").before($("<span>this is span</span>"));
      });

3、元素的删除

$("#btn").click(function () {
        //从父级元素中移除子级元素---移除所有的子元素
        $("#dv").html("");
        //清空父元素中的子元素
        $("#dv").empty();//清空
        //想要干掉谁,直接找到这个元素,调用这个方法就可以了
        $("#dv").remove();//自杀---，不是清空
      });

4、案例：点击按钮创建，删除表格，增加行

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 600px;
      height: 450px;
      border: 1px solid red;
    }
  </style>
  <script src="./jquery.min.js"></script>
  <script>
    //案例:点击按钮在div中创建一个表格
    //表格数据的数组
    var arr = [
      { "name": "传智播客", "href": "http://www.itcast.cn" },
      { "name": "快播", "href": "http://www.kuaibo.cn" },
      { "name": "优酷", "href": "http://www.youku.cn" },
      { "name": "爱奇艺", "href": "http://www.iqiyi.cn" },
      { "name": "B站", "href": "http://www.bili.cn" },
      { "name": "土豆", "href": "http://www.tudou.cn" }
    ];

    //页面加载
    $(function () {
      //点击按钮创建表格
      $("#btn").click(function () {
        //创建表格
        var table = $("<table style='cursor: pointer' border='1' cellspacing='0' cellpadding='0'></table>");
        //把表格加入到div中
        $("#dv").append(table);
        //循环遍历数组,创建行
        for (var i = 0; i < arr.length; i++) {
          var dt = arr[i];//每个数组元素,都是对象
          //创建行,并加入到table中
          var tr = $("<tr></tr>");
          table.append(tr);
          //在列中显示内容,列在行中
          //创建td,并加入到tr中
          var td1 = $("<td>" + dt.name + "</td>");
          //第一个列加入到tr中
          tr.append(td1);
          var td2 = $("<td><a href='" + dt.href + "'>" + dt.name + "</a></td>");
          //第二个列加入到tr中
          tr.append(td2);

          //鼠标进入到每一行的时候,该行有高亮显示的效果
          tr.mouseenter(function () {//鼠标进入
            $(this).css("backgroundColor", "green");
          }).mouseleave(function () {//鼠标离开
            $(this).css("backgroundColor", "");
          });
        }
      });

      //点击按钮移除表格
      $("#btn2").click(function () {
        //当前这个按钮的下一个兄弟元素,清空里面的子元素
        $(this).next().empty();
        console.log($(this).next());
        //$("#dv").empty();

        //所有的div中的第一个div
        //$("#dv").children("table").remove();
      });

      //点击按钮,在table中添加一行
      $("#btn3").click(function () {
        //创建一行
        var tr = $("<tr><td>腾讯</td><td><a href='http://.qq.com'>腾讯</a></td></tr>");
        //把这一行加入到table中
        $("#dv").children("table").append(tr);
      });
    });

  </script>
</head>

<body>
  <input type="button" value="创建一个表格" id="btn" />
  <input type="button" value="移除表格" id="btn2" />
  <input type="button" value="添加一行" id="btn3" />
  <div id="dv"></div>

</body>

</html>

二、元素的选中问题

1、attr

* .attr(参数1,参数2);-----设置某个属性的值
    * .attr(参数1);-----获取某个属性的值
    *
    * 参数1:属性的名字
    * 参数2:属性的值
    *
    * .attr方法主要是操作元素的自定义属性的,但是也可以操作元素的自带的属性(html中本身就有的属性),但是,但可是:操作元素的选中的ckeched的时候,不是很合适!
    * 操作元素的选中的checked的时候,推荐使用prop方法

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //点击按钮选中性别
      $("#btn").click(function () {
        //DOM中操作
        //document.getElementById("r3").checked=true;
        //jQuery操作
        //$("#r3").get(0).checked=true;//DOM的写法
        //需要使用自定义属性的方式
        //$("#r3").attr("checked",true);//设置
        //获取是否被选中了
        //console.log($("#r3").attr("checked"));//undefined
 
        //如果标签默认选中了---attr("checked")--->结果:checked
        //如果标签没有选中----attr("checked")---->结果:undefined
 
 
        //点击按钮,选中就设置不选中,如果没有选中,就设置选中的结果
 
        //attr方法针对单选框或者是复选框的是否选中问题,操作起来很麻烦,几乎不用,后面说
        if($("#r3").attr("checked")==undefined){
          //undefined
          $("#r3").attr("checked",true);
          console.log("哈哈");
        }else{
          //checked--->选中了
          $("#r3").attr("checked",false);
          console.log("嘎嘎");
        }
      });
    });
  </script>
</head>
<body>
<input type="button" value="选中" id="btn"/><br/>
请选择小苏的性别:
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex"/>女
<input type="radio" value="3" name="sex" id="r3"/>人妖
 
</body>
</html>

2、prop()：复选框选中

*设置或者是获取元素的选中的问题
       * 推荐使用prop()方法
       * .prop("属性",值); 值一般是布尔类型----->目前这么写代码是设置选中
       * .prop("属性");-----获取这个元素是否选中

三、元素的操作

1、操作元素

* 可以设置,也可以获取
    * .width()是元素的宽
    * .height()是元素的高
    *
    * .offset()--->获取的是对象,可以设置,也可以获取
    * .offset({"left":值,"top":值});设置
    *

2、元素的卷曲距离

获取元素向上卷曲出去的距离,  scrollTop()--->方法,数字类型
获取元素向左卷曲出去的距离,  scrollLeft()--->方法,数字类型
div滚动上下滚动条的时候,一直获取他的向上卷曲出去的值

四、事件

1、为元素绑定事件

为元素绑定事件三种方式
    * 对象.事件名字(事件处理函数);---$("#btn").click(function(){});
    * 对象.bind("事件名字",事件处理函数);---$("#btn").bind("click",function(){});
* 父级对象.delegate("子级元素","事件名字",事件处理函数);---->$("#dv").delegate("p","click",function(){});

2、为元素解绑事件

bind---unbind
* bind括号中写什么事件的名字就会把这个事件解绑,会把这个元素的这个点击的多个事件都会解绑
* 对象.click()这种方式添加的事件也可以使用unbind解绑
$("#dv").unbind("click");
括号中没有任何参数,此时该元素的所有的事件全部解绑
$("#dv").unbind();
同时解绑多个事件---每个事件的名字中间用空格即可
$("#dv").unbind("mouseenter mouseleave")
delegate---undelegate
* p的点击事件没有了,移除了p的所有的事件
$("#dv").undelegate();
* 移除的是p的点击事件
$("#dv").undelegate("p","click");
* 可以移除多个事件,但是每个事件之间用空格隔开
$("#dv").undelegate("p","click mouseenter");
on---off
* 父级元素和子级元素的所有的事件全部解绑
$("#dv").off();
* 把父级元素和子级元素的点击事件解绑
$("#dv").off("click");
* 父级元素和子级的元素的多个事件,中间用空格
$("#dv").off("click mouseenter");
* 解绑p标签的点击事件
$("#dv").off("click","p");
* p的两个事件都没了
$("#dv").off("click mouseenter","p");
        p的所有的事件全部解绑
        $("#dv").off("","p");
        干掉div中所有的子元素的点击事件
        $("#dv").off("click","**");

3、阻止事件冒泡 : reture false

$(function () {
      $("#dv1").click(function () {
        //为什么是undefined
        //对象.id----->DOM中的
        console.log($(this).attr("id"));
      });
      $("#dv2").click(function () {
        console.log($(this).attr("id"));
      });
      $("#dv3").click(function () {
        console.log($(this).attr("id"));
        return false;
      });
    });

4、事件的触发

调用文本框的获取焦点的事件---第一种方式让别的元素的事件触发
        1、对象.事件名字();
         $("#txt").focus();
        2、第二种触发事件的方式
         $("#txt").trigger("focus");//触发的意思
        3、 这种方式可以触发该事件,但是,不能触发浏览器的默认的行为
         $("#txt").triggerHandler("focus");

5、事件对象参数

在事件对象中传入参数，返回值为对象
在这里插入图片描述

五、each方法

隐式迭代—内部帮助我们循环遍历做操作
每个元素做不同的操作的时候
each方法,帮助我们遍历jQuery的对象

$(function () {
      //获取所有的li,针对每个li的透明进行设置
      $("#uu>li").each(function (index,ele) {
        //参数1:索引,参数2:对象
        //console.log(arguments[0]+"===="+arguments[1]);
        //每个li的透明度不一样
        var opacity=(index+1)/10;
        $(ele).css("opacity",opacity);
      });
    });
```qq
each方法就是用来遍历jQuery对象的,但是,里面的每个对象最开始都是DOM对象,如果想要使用jQuery的方法,需要把DOM对象转jQuery对象
### 六、几个属性

innerWidth()/innerHeight() 方法返回元素的宽度/高度（包括内边距）。
outerWidth()/outerHeight() 方法返回元素的宽度/高度（包括内边距和边框）。
outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度（包括内边距、边框和外边距）。

http://www.niftyadmin.cn/n/554856.html

相关文章

[效率提升]webstorm配置Prettier

[效率提升]webstorm配置Prettier

webstorm配置Prettier 配置好prettier发现vue文件并没有格式化代码&#xff0c;原因就是webstorm默认没有支持&#xff0c;现配置之。 1、在插件市场下载prettier 2、点击setting找到Languages&Frameworks点击打开找到Prettier&#xff0c;在Prettier package里选择prett…
阅读更多...
27 个 CSS 面试的高频考点助力金三银四

27 个 CSS 面试的高频考点助力金三银四

CSS是层叠样式表&#xff08; Cascading Style Sheets &#xff09;的缩写&#xff0c;是一种样式表语言&#xff0c;用于描述以 HTML 之类的标记语言编写的文档的布局。它是用于设计Web页面的三剑客之一&#xff0c;另外两位浩客是HTML和Javascript。CSS 的设计目的是使样式和…
阅读更多...
坐骑特效设计

坐骑特效设计

特效设计的时候&#xff0c;根据模型的风格来确定&#xff0c;目前只有待机和奔跑&#xff0c;所以就没有做攻击特效。 这些都是普通特效的组合&#xff0c;有趣的是其中的地表特效/开花特效与符文特效&#xff0c;其参数分别如下&#xff1a;地表特效&#xff1a; 花草特效&am…
阅读更多...
jquery知识点总结

jquery知识点总结

jquery复习1 jquery复习2 个人博客 总结 * 选择器:* id选择器 $("#id属性的值")* 标签选择器 $("标签名字")* 类选择器 $(".类样式的名字")* 交集选择器 $("标签.类样式的名字")---->标签类选择器* 并集选择器 $("选择器…
阅读更多...
[vue3]vue3中使用echarts的tooltip不显示问题

[vue3]vue3中使用echarts的tooltip不显示问题

vue3中使用echarts的tooltip不显示问题 看了网上一些解答&#xff0c;降低echart版本的也有&#xff0c;换Node版本的也有… 后来我才发现&#xff0c;是因为vue3中的数据对象是用的proxy监听的&#xff0c;要取值需要用value等方法取出来。那解决方法就有了&#xff0c;直接…
阅读更多...
kafka配置单向ssl加密，以及加密后python客户端访问方式(kafka v1.1.0)

kafka配置单向ssl加密，以及加密后python客户端访问方式(kafka v1.1.0)

一、kafka broker配置以及sh客户端的使用 最近在使用kafka集群的过程中&#xff0c;为了保证安全性&#xff0c;配置了ssl加密&#xff0c;首先按照官网的配置进行如下的设置 #!/bin/bash #Step 1 keytool -keystore server.keystore.jks -alias localhost -validity 365 -keya…
阅读更多...
适合前端开发 和UI 设计的20多个最佳 ICON 库

适合前端开发 和UI 设计的20多个最佳 ICON 库

在应用界面中图标的存在&#xff0c;会给用户一个良好第一印象&#xff0c;这个挺重要的。但是从零开始开发图标需要大量的时间和金钱。在你的网站上使用图标可以让你有效地与你的访问者交流:它们增加了可读性&#xff0c;突出了重要的内容&#xff0c;加强了功能或特性&#x…
阅读更多...
Vue 中 watch 属性，computed 计算属性以及 method 属性的区别

Vue 中 watch 属性，computed 计算属性以及 method 属性的区别

如果我们要实现这一一个功能&#xff1a;想要实现 名 和 姓 两个文本框的内容改变&#xff0c;则全名的文本框中的值也跟着改变&#xff1b; 1、使用method方法是实现&#xff1a; 通过数据双向绑定绑定数据&#xff0c;通过keyup&#xff08;键盘抬起&#xff09;绑定函数&a…
阅读更多...
最新文章

Copyright @ 2022~2023