【Jquery学习笔记】01 选择器 DOM 方法连接捕获

最新推荐文章于 2024-02-28 16:51:01 发布

子逊的辛酸史

最新推荐文章于 2024-02-28 16:51:01 发布

阅读量154

点赞数

分类专栏：前端 jquery 文章标签： Jquery

本文链接：https://blog.csdn.net/u013182992/article/details/80494838

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

2018.5.11

Jquery语法

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

   // 开始写 jQuery 代码...

 });

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。

下面是两个具体的例子：

1.试图隐藏一个不存在的元素 2.获得未完全加载的图像的大小

提示：简洁写法（与以上写法效果相同）:

$(function(){

   // 开始写 jQuery 代码...

 });

以上两种方式你可以选择你喜欢的方式实现文档就绪后执行jQuery方法。

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

$("p")

"#id" ".class" 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：
$(".test")
$("#test")

eg:

$(function(){
  $("button").click(function(){
    $("#test").hide();
  });
   });
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>

css选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

实例

下面的例子把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color","red");

JqueryDom

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

$("p").click(function(){
  $(this).hide();
});

dblclick()

当双击元素时，会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

$("p").dblclick(function(){
  $(this).hide();
});

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});

hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(function(){
  alert("You entered p1!");
  },
  function(){
  alert("Bye! You now leave p1!");
});

focus()与blur()

当元素获得焦点时，发生 focus 事件。当元素失去焦点时，发生 blur 事件

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});


Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

jQuery 方法链接

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示：这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

实例
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery 捕获

jQuery - 获取内容和属性

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM 操作

DOM = Document Object Model（文档对象模型）

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值