jQuery HTML与插件

最新推荐文章于 2024-05-02 17:59:36 发布

就叫铭铭之中吧

最新推荐文章于 2024-05-02 17:59:36 发布

阅读量57

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/mahuatengbukui/article/details/118361999

版权

4.html(),text(),vla()的回调函数

5.attr(),prop()

三.对HTML的页面尺寸操作

1.width() 和 height() 方法

2.innerWidth() 和 innerHeight() 方法

3.outerWidth() 和 outerHeight() 方法

4.scrollTop() 和 scrollLeft() 方法

七.jQuery.lazyload.js的使用

八.jQuery.ui.js的使用

九.ECharts的使用

一.事件机制

1.注册事件

bind() 、on() 方法向被选元素绑定一个或多个事件。bind用处大，能同时绑定多个，on比较鸡肋只能绑定一个，但不用on直接写也是绑定一个。

 $("#btn1").bind({
    click() {
      console.log(111);
    },
    dblclick() {
      console.log(222);
    },
  });

2.事件对象event

event对象有以下属性

type：事件类型，比如click。

which：触发该事件的鼠标按钮或键盘的键。

target：事件发生的初始对象。

data：传入事件对象的数据。

pageX：事件发生时，鼠标位置的水平坐标（相对于页面左上角）。

pageY：事件发生时，鼠标位置的垂直坐标（相对于页面左上角

3.each()方法

each() 方法为每个匹配元素规定要运行的函数。但是这个也是有些鸡肋，因为不用each()方法，也会给每个都会绑定事件的。

4.$.each()遍历数组或对象

遍历数组
 let a = [1, 2, 3, 4, 5];
  $.each(a, function (value, index) {
    console.log(value, index);
  });

效果：

遍历对象
let b = { name: "亚索", age: 18 };
  $.each(b, (value, index) => {
    console.log(value, index);
  });

效果：

二.对HTML的设置与捕获

这些函数都有个共同的特点，括号里不传值就是获取，传值就是设置值

1.html()

html() - 设置或返回所选元素的内容（包括 HTML 标记）

<div id="div1"><h3>div1</h3></div>
 

$("#div1").css("background-color", "red");
  $("#div1").height(300);
  $("#div1").width(300);
  console.log($("#div1").html());

效果：

2.text()

text() - 设置或返回所选元素的文本内容

<div id="div1"><h3>div1</h3></div>
 

$("#div1").css("background-color", "red");
  $("#div1").height(300);
  $("#div1").width(300);
 console.log($("#div1").text());

效果：

3.val()

val() - 设置或返回表单字段的值

获取表单value

<input type="text" value="11111" />

console.log($("input").val());

效果：

设置表单元素value

 <input type="text" value="11111" />

 $("input").val(3333);
  console.log($("input").val());

效果：

4.html(),text(),vla()的回调函数

这三个函数都有回调函数，回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

 $("#btn2").click(function () {
    $("#div1").text(function () {
      return `22222222`;
    });
  });

5.attr(),prop()

attr() 、prop()方法用于获取属性值。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()；.attr不仅可以返回（设置）元素的原生属性，还可以返回（设置）自定义属性。

注：这两个方法只能获取标签的属性值，不能获取标签的css的属性值

三.对HTML的页面尺寸操作

注：下面的前三种方法都是通过改变内容的宽高来实现的，内边距，外边距，边框都不会变。

并且同样的，向括号里传值就是设置，不传值就是获取原本的尺寸，并且这些方法传值不加px，只传纯数值

1.width() 和 height() 方法

获取或设置元素内容的宽高，不包括padding,border,margin

2.innerWidth() 和 innerHeight() 方法

获取或设置元素的宽高，不包括border,margin

3.outerWidth() 和 outerHeight() 方法

获取或设置元素的宽高，不包括margin

4.scrollTop() 和 scrollLeft() 方法

scrollTop() 方法设置或者返回滚动条被卷去的元素的高度

scrollLeft() 方法设置或者返回滚动条被卷去的元素的宽度

四.添加元素和删除元素

1.在指定位置后添加元素

在标签里append()

<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>

$("li").eq(3).append("hahahahah");
$("li").eq(5).append("<div>我是新盒子</div>");

效果：

在标签外after()

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
 </ul>
  $(function () {
    $("li").eq(3).after("1111");
    $("li").eq(3).after("<li>我也是4</li>");
  });

效果：

2.在指定位置前添加元素

在标签里prepend()

      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    $("li").eq(3).prepend("hahahahah");
    $("li").eq(5).prepend("<div>我是新盒子</div>");

效果：

在标签外before()

      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    $("li").eq(3).before("hahahahah");
    $("li").eq(5).before("<li>我是新盒子</li>");

效果：

3.删除指定元素内的元素

empty()

 <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
</ul>
$("li").eq(3).empty();

效果：

 <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
</ul>
 $("ul").empty();

效果： ul里面的元素被清空了

4.删除指定元素及元素内的一切

remove()

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
 $("li").eq(5).remove();

效果：

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
$("ul").remove();

效果：

五.对插件的认识

jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。

jquery有着丰富的插件，使用这些插件能给jquery提供一些额外的功能。

六.jQuery.color.js的使用

能让animate()有改变颜色的能力

七.jQuery.lazyload.js的使用

能让图片一开始不加载，达成某种条件后再加载

八.jQuery.ui.js的使用

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。

九.ECharts的使用

能制作各种各样的图表

就叫铭铭之中吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery HTML与插件

一.事件机制1.注册事件bind() 、on() 方法向被选元素绑定一个或多个事件。bind用处大，能同时绑定多个，on比较鸡肋只能绑定一个，但不用on直接写也是绑定一个。 $("#btn1").bind({ click() { console.log(111); }, dblclick() { console.log(222); }, });2.事件对象eventevent对象有以下属性type：事件类型，比如clic.
复制链接

扫一扫