jQuery I
jQuery
两大特点：
- 链式编程：比如
.show()和.html()可以连写成.show().html()。 - 隐式迭代：隐式对应的是显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。
jQuery的简介
jQuery 是 js 的一个库，封装了开发过程中常用的一些功能，方便开发人员调用，提高开发效率。
jQuery 的导入
从官网复制相应的版本到本地js文件中，使用script标签将本地的jQuery包导入即可，导包的代码一定要放在js代码的最上面。如下：
<script src="jQuery的路径"></script>
jQuery 的入口函数和 # 符号
入口函数
原生js的入口函数
# 原生js的入口函数
windows.onload = function(){}
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 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。
<script src="jQuery_Library_v3.4.1.js"></script>
<script>
console.log($);
console.log(jQuery);
console.log($===jQuery);
</script>
从打印结果来看，$就是jQuery。
jQuery的选择器
jQuery的选择器包括：基本选择器、层级选择器、属性选择器
基本选择器
| 选择器 | 描述 | 选择器 | 描述 |
|---|---|---|---|
| $("#id") | id选择器 | $(".className") | class选择器 |
| $("tagName") | 标签选择器 | $("div.c1") | 交集选择器 |
| $("*") | 通用选择器 | $("#id,.className,tagName") | 并集选择器 |
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>div{float: left;}</style>
</head>
<body>
<div></div>
<div id="box"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
</body>
<script type="text/javascript" src="jQuery_Library_v3.4.1.js"></script>
<script type="text/javascript" >
$(function () {
// 三种获取jQuery对象的方式
var jqBox1 = $("#box");
var jqBox2 = $(".box");
var jqBox3 = $("div");
// 操作标签选职器
jqBox3.css('width','100');
jqBox3.css('height',100);
jqBox3.css('background-color','gray');
jqBox3.css('margin-top',10);
//操作类选择器（隐式迭代，不需要一个一个设置）
jqBox2.css('background-color','tomato');
jqBox2.text('ha~la~');
// 操作id选择器
jqBox1.css('background-color','pink')
})
</script>
层级选择器
| 选择器 | 描述 |
|---|---|
| $("x y") | x所有的后代y（子代） |
| $("x>y") | x所有的孩子 |
| $("x+y") | 紧挨在x后面的y |
| $("x~y") | x之后的所有兄弟y |
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<ol>
<li>Aa</li>
<li>Bb</li>
<li>Cc</li>
</ol>
</ul>
</body>
<script src="jQuery_Library_v3.4.1.js"></script>
<script>
$(function () {
// 后代设置
var jqLi = $('ul li');
jqLi.css('margin',5);
jqLi.css('background','pink');
// 孩子
var jqOtherLi = $('ul>li');
jqOtherLi.css('background','tomato');
})
</script>
属性选择器
属性选择器的样式比较多样，主要围绕标签的属性展开
| 选择器 | 描述 |
|---|---|
| $('[属性名]') | 必须是含有某属性的标签 |
| $('a[属性名]') | 含有某属性的a标签 |
| $('选择器[属性名]') | 含有某属性的符合前面选择器的标签 |
| $('选择器[属性名="aaaa"]') | 属性名=aaa的符合选择器要求标签 |
| $('选择器[属性名$="xxx"]') | 属性值以xxx结尾的 |
| $('选择器[属性名^="xxx"]') | 属性值以xxx开头的 |
| $('选择器[属性名*="xxx"]') | 属性值包含xxx |
| $('选择器[属性名1][属性名2="xxx]') | 拥有属性1,且属性二的值='xxx',符合前面选择器要求的 |
<body>
<div id="box">
<h2 class="title">属性选择器</h2>
<!--<p class="p1">我是一个段落</p>-->
<ul>
<li id="li1">1122</li>
<li class="what" id="li2">2233</li>
<li class="what">3344/li>
<li class="heihei">4455</li>
</ul>
<form action="" method="post">
<input name="username" type='text' value="1" checked="checked" />
<input name="username1111" type='text' value="1" />
<input name="username2222" type='text' value="1" />
<input name="username3333" type='text' value="1" />
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮2</button>
<button class="btn-success">按钮3</button>
<button class="btn-danger">按钮4</button>
</form>
</div>
</body>
<script src="jQuery_Library_v3.4.1.js"></script>
<script type="text/javascript">
$(function(){
//标签名[属性名] 查找所有含有id属性的该标签名的元素
$('li[id]').css('color','red');
//匹配给定的属性是what值得元素
$('li[class=what]').css('font-size','30px');
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('font-size','50px');
//匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','gray');
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','greenyellow');
//匹配给定的属性是以包含某些值的元素
$('button[class*=btn]').css('background','red')
})
</script>
jQuery的筛选器
基本筛选器
$('选择器:筛选器')
$('选择器:first')
作用于选择器选择出来的结果：
first 找第一个
last 最后一个
eq(index) 通过索引找
even 找偶数索引
odd 找奇数索引
gt(index) 大于某索引的
lt(index) 小于某索引的
not(选择器) 不含 符合选择器 要求的
has(选择器) 后代中含有该选择器要求的(找的不是后代,找的是本身)
表单筛选器
// type筛选器
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':reset')
$(':button')
注意 : date type的input是找不到的
// 状态筛选器
:enabled
:disabled
:checked
:selected
筛选器方法
找兄弟 :
$('ul p').siblings()
找哥哥
$('ul p').prev() 找上一个哥哥
$('ul p').prevAll() 找所有哥哥
$('ul p').prevUntil('选择器') 找哥哥到某一个地方就停了，不包含条件中的哥哥
找弟弟 : next() nextAll() nextUntil('选择器')
找祖辈 : parent() parents() parentsUntil('选择器')
找儿子 : children()
包含条件的查找到的对象不包含条件本身对象
筛选方法
first()
last()
eq(index)
not('选择器') 去掉满足选择器条件的
filter('选择器')交集选择器,在所有的结果中继续找满足选择器要求的
find('选择器') 后代选择器 找所有结果中符合选择器要求的后代
has('选择器') 通过后代关系找当代 后代中有符合选择器要求的就把当代的留下
jQuery I的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- 浅谈 jQuery 核心架构设计
jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...
随机推荐
- OI视角浅谈布隆过滤器
简要谈及布隆过滤器 Preface 不负责的出题人扔了一道5e5,2M卡内存的题,标算布隆过滤器,然而std自己用std::set 70M碾过去了. 没学OI时候草草看过这个,不过忘得差不多了. 今天 ...
- 王某的NLP之路前言
感谢基友jayjay和海英学姐的指路,其实我的方向一直比较迷茫. 因为自己是会计学出身的,前三年也没接触编程,第一次接触还是在2016年,尝试用聚宽的量化接口,当时顺便学了python 的一点知识. ...
- AJAX增删查
数据库 CREATE DATABASE crmweb; CREATE TABLE `customerstatus` ( `id` bigint(20) NOT NULL AUTO_INCREMENT ...
- 关于RedisTemplate和StringRedisTemplate（转）
最近在开始在学习Redis以及如何在Java当中去使用Redis,Redis是什么我这里就不说了. 我主要想说的是Redis和Java当中Spring结合起来的时候,使用到的RedisTemplate ...
- Unity3D面试问题
注意,是问题,不是笔试题哦.这些是我最近面试北京各公司总结的一些被问到的还算典型的问题.跟大家分享一下.答案是我自己的,不保证标准和完整. 哎,公司年底开人,又校招一群便宜的小鬼……桑死心了……好在找 ...
- MapBox
MapBox的地图API大家用过吗 用作网站或者APP的底图,就不用自己架设地图服务器了 发布自己的地图了 这跟Google Map是一样的道理,类似的还有天地图,高德,百度地图API等等. 属于前端 ...
- 快速乘（O(1)）
inline long long multi(long long x,long long y,long long mod) { long long tmp=(x*y-(long long)((long ...
- Linux添加磁盘和挂载
1.新建一个虚拟磁盘,例:20GB 2.重启后使用 fdisk -l 查看磁盘详细信息,刚添加的磁盘信息如下: 3.对刚添加的磁盘进行分区 fdisk /dev/sdc 4.格式化分区 mkfs.ex ...
- 8.4 JavaScript（一）
参考链接:http://how2j.cn/k/javascript/javascript-javascript-tutorial/519.html 一.JavaScript是什么 JavaScript ...
- flask中models设计
1. 自关联 class Comment(db.Model): __tablename__ = 'albumy_comment' id = db.Column(db.Integer, primary_ ...