JQuery

博客园
首页
新随笔
联系
管理
订阅
订阅

随笔- 33 文章- 181 评论- 320
jquery
楔子

需求一：有html标签关系如下，请找到所有的含有a标签的li标签
复制代码

<div>
    <ul>
        <li class="city">北京</li>
        <li class="city"><a href="">上海</a></li>
        <li class="city">天津</li>
    </ul>
</div>

复制代码
原生js实现
jqeury实现

需求二：将上面的li标签实现隔行换色效果

原生js实现
jquery实现

需求三：点击按钮，显示页面中的三个div，并给div添加文本内容
复制代码

<!--样式-->
<style type="text/css">
    div{
         100px;
        height: 100px;
        background-color: green;
        margin-top: 20px;
        display: none;
    }
</style>

<!--body标签-->    
<button>操作</button>
<div></div>
<div></div>
<div></div>

复制代码
原生js实现
jquery实现

尽管，你现在啥也不知道，你就知道用上了jquery咱们写代码节省了很多操作，便利了很多就OK了～～～
jqeury介绍
为什么要使用jQuery

jQuery 的两大特点

链式编程：比如.show()和.html()可以连写成.show().html()。

隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

什么是 jQuery

jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。

js库是把我们常用的复杂功能封装到简单的方法中，我们用的时候，将库直接引入然后调用方法即可。

初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能API。

这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。
版本说明

jQuery 有三个大版本：

    1.x版本：最新版为 v1.11.3。

    2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）。

    3.x版本。

jQuery的使用
使用 jQuery 的基本步骤

下载 ：jQuery有两个文件，一个是jquery-3.4.1.js(未压缩版)，一个是jquery-3.4.1.min.js(压缩版,推荐项目上线时使用)

关于jQuery的相关资料：

    官网：http://jquery.com/

    官网API文档：http://api.jquery.com/

    汉化API文档：http://www.css88.com/jqapi-1.9/
    jquery 在线手册 ：http://hemin.cn/jq/

注意：导包的代码一定要放在js代码的最上面。
jQuery 的入口函数和 $ 符号
入口函数（重要）

原生 js 的入口函数指的是：window.onload = function() {}; 如下：
原声js入口函数

jQuery的入口函数，有以下几种写法：

写法一：文档加载完毕，图片不加载的时候，就可以执行这个函数。

$(document).ready(function () {
alert(1);
})

写法二：文档加载完毕，图片不加载的时候，就可以执行这个函数。（写法一的简洁版）

$(function () {
alert(1);
});

写法三：文档加载完毕，图片也加载完毕的时候，在执行这个函数。

$(window).ready(function () {
alert(1);
})

jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：

Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。

jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。
jQuery的$符号

jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候：

从打印结果可以看出，$ 代表的就是 jQuery。
js中的DOM对象 和 jQuery对象比较（重点，难点）
二者的区别

通过 jQuery 获取的元素是一个jq对象数组，其中包含着原生JS中的DOM对象。举例：

针对下面这样一个div结构：

通过原生 js 获取这些元素节点的方式是：

var myBox = document.getElementById("app");           //通过 id 获取单个元素
var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

//获取的是数组，里面包含着原生 JS 中的DOM对象。
　　console.log($('#app'));
　　console.log($('.box'));
　　console.log($('div'));

总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。
二者的相互转换

1、 DOM 对象 转为 jQuery对象：

$(js对象);

2、jQuery对象 转为 DOM 对象：

jquery对象[index]; //方式1（推荐）
jquery对象.get(index); //方式2

jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';

jQuery查找标签
选择器

基本选择器、层级选择器、属性选择器

今天来学习一下jQuery 选择器。jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。
基本选择器
复制代码

$("#id") //id选择器
$("tagName") //标签选择器
$(".className") //class选择器
$("*") //通用选择器

$("div.c1") // 交集选择器 找到有含有c1类的div标签
$("#id, .className, tagName") //并集选择器

复制代码
jquery选择器示例代码

效果如下：

层级选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

示例代码

效果如下：

属性选择器
复制代码

$('[href]') //找所有含href属性的标签
$('a[href]') //找所有含href属性的a标签
$('a[title="luffy"]') //找所有title属性是luffy的a标签
$('a[title="baidu"]') //找所有title属性不是百度的a标签
$('a[href^="https"]') //找所有href属性以https开头的a标签
$('a[href$="html"]') //找所有href属性以html结尾的a标签
$('a[href*="i"]') //找所有href属性中含有i的a标签
$('a[href][title="luffy"]') //找所有含有href属性且title属性=luffy的a标签

复制代码
示例代码

效果如下：

筛选器
基本筛选器
复制代码

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 根据含有某个后代筛选

复制代码
示例代码

效果如下：

表单筛选器
复制代码

type筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

复制代码

其他属性筛选器
:enabled
:disabled
:checked
:selected

筛选器方法
复制代码

//找兄弟
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选

//找弟弟
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它

//找哥哥
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

复制代码

//找祖辈
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

//找儿子
$("#id").children();// 儿子们

复制代码

//过滤
$("div").first() // 获取匹配的第一个元素
$("div").last() // 获取匹配的最后一个元素
$("div").eq(n) // 索引值等于指定值的元素，n是索引
$("div").not() // 从匹配元素的集合中删除与指定表达式匹配的元素
$("div").find("p") //后代选择器，在所有div标签中找后代的p标签
$("div").filter(".c1") // 交集选择器，从结果集中过滤出有c1样式类的
$("div").has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

复制代码
示例代码

效果如下：

jQuery绑定事件(更多)

为button按钮绑定单击事件，单机按钮弹出警告框
$('button').click(
function () {
alert('wahaha')
}
)

jQuery操作标签
标签内文本操作
html 标签元素中所有的内容

//获取值：获取选中标签元素中所有的内容
$('#box').html();

//设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$('#box').html('百度一下');

text 标签元素的文本内容

//获取值：获取选中标签元素中的文本内容
$('#box').text();

//设置值：设置该所有的文本内容
$('#box').text('百度一下');

注意：text()方法接收的值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
文档标签操作

之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作，大家也能发现，大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。

看一个之前我们js操作DOM的例子：

var oUl = document.getElementsByTagName('ul')[0];
var oLi = document.createElement('li');
oLi.innerHTML = '赵云';
oUl.appendChild(oLi);

插入标签
append和appendTo

//追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素
父元素.append(子元素)

//追加到某元素，子元素添加到父元素
子元素.appendTo(父元素)

复制代码

//append
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('