JQuery

最新推荐文章于 2023-07-07 14:28:52 发布

追不上的马达兔

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量85

点赞数

分类专栏：笔记 jquery 文章标签： jquery

本文链接：https://blog.csdn.net/CJY_971028/article/details/113527468

版权

笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

文章目录

jQuery
一、概念
- 1.使用
二、jQuery语法结构
- 1.基础语法： $(selector).action()
- 2.文档就绪事件
三、jQuery选择器

jQuery

一、概念

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

提示：除此之外，jQuery还提供了大量的插件。
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

1.使用

jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML页面中通过script 标签引用它，跟引用自己的
外部JavaScript脚本文件一样的语法。

<head>
	<script src="jquery-1.11.1.js"></script> 
</head>

二、jQuery语法结构

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作（actions）。

1.基础语法： $(selector).action()

说明：美元符号定义 jQuery 
	选择符（selector）"查询"和"查找" HTML 元素 
	jQuery的 action() 执行对元素的操作

2.文档就绪事件

文档就绪事件，实际就是文件加载事件。

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM进行操作。

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

所以我们尽可能将所有的操作都在文档加载完毕之后实现。

写法1：

$(document).ready(function{
	开始写 jQuery 代码...
});

写法2：

$(function(){
	开始写 jQuery 代码...
});

jQuery的ready方法与JavaScript中的onload相似，但是也有区别：

三、jQuery选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

1.元素/标签选择器

jQuery 元素选择器基于元素/标签名选取元素。
语法：$(“标签名称”)

$(function(){ 
	//1、标签选择器： 	
	//获取所有的div元素（集合） 	
	var divList=$("div"); 	
	console.log(divList);//jQuery的对象 	
	console.log(divList.length); 	
	for(var i=0;i<divList.length;i++){ 	
		console.log(divList[i]);//js的对象 		
		//将js对象转换为jQuery的对象 		
		console.log($(divList[i])); 	
	} 
});

2.#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：

$("#p1")

3. .class 选择器

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

$(".mydiv")

4.全局选择器

匹配所有元素

$("*")

5.并集选择器

将每一个选择器匹配到的元素合并后一起返回。

$("div,ul,li,.mydiv")

6.后代选择器

在给定的祖先元素下匹配所有的后代元素

$("form input")

7.子选择器

在给定的父元素下匹配所有的子元素

$("form > input")

8.相邻选择器

匹配所有紧接在 prev 元素后的 next 元素

$("label + input")

9.同辈选择器

匹配 prev 元素之后的所有 siblings 元素

$("form ~ input")

10.属性选择器

匹配包含给定属性的元素

$("div[id]");//获取所有有id属性的div的元素集合 

$("div[class]");//获取所有有class属性的div的元素集合 

$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合 

$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合 

$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合 

$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合 

$("input[id][name^='user']");

11.可见性选择器

匹配所有的可见或不可见的元素

$("div:visible");
$("input:hidden");

12.所有选择器案例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>选择器</title>
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <script>
    //1、标签选择器：
    function htmlSelector() {
//获取所有的div元素（集合）
      var divList = $("div");
      console.log(divList);//jQuery的对象
      console.log(divList.length);
      for (var i = 0; i < divList.length; i++) {
        console.log(divList[i]);//js的对象
//将js对象转换为jQuery的对象
        console.log($(divList[i]));
      }
    }
    //2、id选择器
    function idSelector() {
//根据id获取到的元素是惟一的，即使页面上有重名的id，获取的是第一个
      var p = $("#p1");
      console.log(p.html());
    }
    //3、.class选择器
    function classSelector() {
      var list = $(".mydiv");
      console.log(list.length);
    }
    //4、 全局选择器
    function allSelector() {
      var list = $("*");//包括了html、head、title.....所有标签
      console.log(list.length);
      for (var i = 0; i < list.length; i++) {
        console.log(list[i]);//js的对象
      }
    }
    //5、并集选择器
    function andSelector() {
      var list = $(".mydiv,p,li");
      printList(list);
    }
    //6、后代选择器:包括所有的后代，儿子和孙子辈都有
    function subSelector() {
      var list = $("form input");
      printList(list);
    }
    //7、子选择器：只有子元素
    function sunSelector() {
      var list = $("form>input");
      printList(list);
    }
    //8、相邻选择器
    function nextSelector() {
      var list = $("label + input");
      printList(list);
    }
    //9、同辈选择器
    function sublingsSelector() {
      var list = $("form ~ div");
      printList(list);
    }
    //10、属性选择器
    function attrSelector() {
      var list = $("div[id]");//获取所有有id属性的div的元素集合
      list = $("div[class]");//获取所有有class属性的div的元素集合
      list = $("input[name='userName']");//获取所有input标签中name属性是userName元素的集合
      list = $("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合
      list = $("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合
      list = $("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合
      list = $("input[id][name^='user']");//获取所有input标签中既有id属性又有name属性以user开头的元素的集合
      printList(list);
    }
    //11、可见性选择器
    function seeSelector() {
//匹配所有的可见div元素
      var list = $("div:visible");
//匹配所有的不可见div元素
      var list = $("div:hidden");
//匹配所有的不可见input元素,样式有display：none的元素和type=hidden的元素
      list = $("input:hidden");
      printList(list);
    }
    //文档就绪事件：页面加载完毕之后执行：
    $(function () {
      seeSelector();
    });
    //打印集合
    function printList(list) {
      for (var i = 0; i < list.length; i++) {
        console.log(list[i]);
        console.log(list[i].innerHTML);//非表单项元素使用该种方式输出
        console.log(list[i].value);//只有表单项元素才有value
      }
    }
  </script>
</head>
<body>
<form>
  <label>用户名：</label>
  <input type="hidden" name="userId" value="1001"/>
  <input style="display: none;" value="隐藏的input"/>
  <input id="userName" name="userName" value="jiaobaoyu"/><br/>
  <label>密码：</label>
  <input name="userPass" type="password" value="1234567"/><br/>
  <fieldset>
    电话：<input id="phone" name="phoneuser" value="13712345789"/><br/>
    邮箱：<input name="emailuser" type="email" value="lina@sina.com"/>
  </fieldset>
</form>
地址：<input name="addressuser1" value="北京"/><br/>
<ul>
  <li>li111111</li>
  <li>li111111</li>
  <li>li111111</li>
</ul>
<p id="p1">p111111111111</p>
<div id="div1" class="mydiv" style="display: none;">div1</div>
<div class="mydiv">div2</div>
<div id="div3">div3</div>
</body>
</html>