day 54 jQuery, part-1
上节内容回顾:
1. 前情回顾
1. DOM对象和BOM对象
1. BOM 对象 --> window
location
location.href
location.href="https://www.sogo.com"
location.reload
history
navigator
2. DOM
1. document结构
1. 节点
1. 文档节点
2. 元素节点
3. 属性节点
4. 文本节点
2. 查找标签
1. 基本查找
1. ID查找 --> docuemnt.getElementById
2. 标签名查找 --> document.getElementsByTagName
3. class名查找 --> document.getElementsByClassName
// 4. 属性查找 --> document.getElementsByName
2. 层级查找
1. 上一级父标签 --> eleObj.parentElement
2. 儿子标签 --> eleObj.children
3. 第一个儿子 --> eleObj.firstElementChild
4. 最后一个儿子 --> eleObj.lastElementChild
5. 上一个兄弟标签 --> eleObj.previousElementSibling
5. 下一个兄弟标签 --> eleObj.nextElementSibling
3. 创建标签
1. doucument.creatElement("div") --> 要创建什么标签括号里面就写什么
2. 设置标签内容
1. eleObj.innerHTML = "<p>P标签</p>"
2. eleObj.innerText = "标签中间的文本"
3. 标签属性
1. input标签相关
1. inputEle.value --> 获取input框的输入值
2. inputEle.value = "请输入xxx" --> 设置input框的值
2. checkbox标签相关
1. checkboxEle.checked --> 返回true或false
2. checkboxEle.checked = true --> 选中该checkbox
3. select标签相关
1. selectObj.options --> 获取所有的option选项 （数组）
2. selecObj.selectedIndex --> 获取选中的option的索引值
3. selecObj.options.length=0 --> 快速清空option
2. JS 事件
常用事件
onclick
ondbclick
onload
blur
fouces
onchange (select联动示例)
绑定事件方法
1. 在标签上通过特定的事件属性绑定事件
比如： <div onclick="f()">点我点我点我</div>
2. 通过JS绑定事件
eleObj.onclick = function(){ ... }
3. 事件委托（利用事件冒泡）
找到父标签，给子标签绑定事件
<ul>li*100</ul>
ulEle.onclick=function(){
event.target --> 点击的那个标签对象
alert(event.target.innerText)
}
补充知识点
1. 定时器示例
2. addEventListener
补充的定时器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器示例</title>
</head>
<body> <input type="text" id="i1"> <input type="button" value="开始" onclick="start();">
<input type="button" value="结束" onclick="end();"> <script>
var t; // undefined
function f() {
var dateObj = new Date();
// 获取i1标签
var i1Ele = document.getElementById("i1");
i1Ele.value=dateObj.toLocaleString();
}
// 每隔一秒就执行一次f()
function start() {
f();
// 只创建一个定时器，有定时器的话我就不创建了
if (t === undefined) {
t = setInterval(f, 1000);
}
} // 停止计时
function end() {
clearInterval(t);
// t现在是什么？
console.log("---> ", t)
t = undefined;
} </script>
</body>
</html>
<!--<!DOCTYPE html>-->
<!--<html lang="zh-CN">-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<meta http-equiv="x-ua-compatible" content="IE=edge">-->
<!--<title>定时器练习</title>-->
<!--</head>-->
<!--<body>--> <!--<input type="text" id="i1">--> <!--<input type="button" value="start" onclick="beginning();">-->
<!--<input type="button" value="end" onclick="stop();">--> <!--<script>-->
<!--var t; //提前声明一个变量,为后续做铺垫-->
<!--function f(){-->
<!--var dateObj=new Date();-->
<!--//获取i1标签-->
<!--var i1Ele=document.getElementById("i1");-->
<!--i1Ele.value=dateObj.toLocaleString(); //把dateObj这个当前-->
<!--// 时间的赋值变量转换成字符串,toLacaleString它本身就是-->
<!--// 把当前时间转换成字符串的意思-->
<!--}-->
<!--//每间隔一秒就执行一次f()-->
<!--function beginning(){-->
<!--f();-->
<!--//只创建一个定时器,有就不创建,没有则创建t就是计时器-->
<!--if (t===undefined){-->
<!--t=setInterval(f,500);-->
<!--按照指定周期来调用函数,这里在括号里面写函数名,以及自定义时间,-->
<!--}-->
<!--}-->
<!--//停止计时-->
<!--function stop(){-->
<!--clearInterval是函数被调用,这里是终止定时器-->
<!--clearInterval(t);-->
<!--//t现在是什么?-->
<!--console.log("-–>",t)-->
<!--t=undefined;-->
<!--}--> <!--</script>-->
<!--</body>-->
<!--</html>-->
绑定多个事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定多个事件</title>
</head>
<body> <input type="button" value="点我" id="i1"> <script>
function f1() {
console.log(1);
} function f2() {
console.log(2);
} var i1Ele = document.getElementById("i1");
// i1Ele.onclick=function () {
// // 点击之后要执行的函数
// f1();
// };
//
// i1Ele.onclick=function () {
// f2();
// }; // addEventListener， 绑定多个事件，不覆盖
i1Ele.addEventListener("click", f1);
i1Ele.addEventListener("click", f2); </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>绑定多个事件</title>
</head>
<body>
<!--这里是设定一个按钮-->
<input type="button" value="kick me" id="i1"> <script>
<!--定义两个函数-->
function f1(){
console.log(1);
} function f2(){
console.log(2);
}
//找到上面设定的那个按钮赋值给一个变量
var i1Ele=document.getElementById("i1");
// i1Ele.onclick=function(){
// f1(); //这样写后加载的会覆盖前面先加载的,
// };
//
// i1Ele.onclick=function(){
// f2();
// }; //addEventListener, 绑定多个事件,不覆盖
// 这里是把上面找到的变量,跟两个事件绑定到一起,这里就实现了同时绑定两个事件
// 关键字是addEventListener它就是绑定多个事件用的
i1Ele.addEventListener("click",f1);
i1Ele.addEventListener("click",f2); </script>
</body>
</html>
今日内容开始:
jQuery是什么?
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
特点:write less,do more
它本身是一个别人写好的类库---前端专用名词,类似于我们之前学的模块,都是别人封装好的底层 的东西,我们直接拿过来用就可以了.这个概念也类似于我们的函数,也是封装好的功能,直接拿到页面上引用即可,方便快捷
jQuery怎么用,
引用jQuery文件,有两种方式: ===========>我们的jQuery文件必须要引用否则会报错,无法使用,不论是在html文件中还是在console里面都是一样的效果.
一种是放到当前文件夹里面,以本地文件的方式引用,
<script src="jquery-3.2.1.min.js"></script>
<script>按照jQuery的规则写代码</script>
另一种是cnd凡是引用,即在线引用,就是我们不需要下载到本地即可引用,
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>按照jQuery的规则写代码</script>
既然这里涉及到了在线引用的话就会牵扯出来版本问题,关于版本:
我们一般使用 3.x
jQuery.js 这个是完整版,
jQuery.min.js 这个是压缩的完整版
jQuery对象:
通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么它就可以使用jQuery里面的方法,例如:$("#i1").html(). ===>这里的意思是获取id值为i1的元素的html代码,其中html()是jQuery的里面的方法.
下面是基础语法:
下面开始具体的使用方法:
选择器:
1,查找标签:固定的原则是 $("写入条件") 注:$后面是没有空格的
1,基本查找:
id 查找========> $("#id值")
class名查找==================> $(".class名")
标签名查找=================> $("标签名")
查找所有元素==========>$("*") ---一般不常用
组合查找================>$("#id,className,tagName") 这里在查询条件里面添加了三个条件.这三个条件是彼此独立的,互不干涉,互不影响,只要在查询的时候满足其中的一个条件就可以拿到返回结果,他们之间是分开的,彼此互不干扰的.
层级选择器:
这里的x和y可以是任何的选择器
所有后代查找(子子孙孙):$("x y")
所有儿子查找:$("x > y")
所有紧挨在x后面的y标签:$("x ~ y")
基本筛选器:
$("#d p")====>所有的id值为d的标签的所有的子孙标签为p标签的标签
:first $("#d p:first")===>在所有的排标签的基础上找到第一个满足条件的p标签
:last $("#d p:last")===>在所有满足条件的p标签中找到最后一个
:ep(index) 前面两个是找第一个和最后一个,这里是找指定位置的那一个,自定义索引值,注意是索引值,我们的索引都是从0开始的,$("#d p:eq(3)") ===>找到满足条件的p标签里面的索引值为3也就是第4个标签
:gt(index) 索引值大于自定义索引值的标签 =====>$("#d p:gt(3)")所有满足条件的p标签里面索引值大于3的p标签
:lt(index) 索引值小于自定义索引值的标签=========>$("#d p:lt(3)")所有满足条件的p标签里面索引值小于3的p标签
:not(选择器) 所选择的标签里面不含有自定义选择器的标签===>$("#d p:not(.c1)") 所有满足条件的p标签里面不含有c1类属性的p标签 ======>$("#my-checkbox input:not(:checked)")还有一类写法,这样写的区别是not括号里面的内容,checked前有一个冒号,如果没有这个冒号就得不到想要的结果,这句话的意思是我们要找到id值为my-checkbox的下面的input标签,然后再找到的input标签里面找没有被选中的input标签,选中是checked,这就需要把冒号加在checked前面
:even 所有偶数的标签 ==>$("#d p:event")所有满足条件的p标签里面索引为偶数的p标签
:odd 所有基数的标签====>$("#d p:odd")所有满足条件的p标签里面索引为基数的p标签
2,修改标签样式:
原生js:
获取样式类:document.getElementById("d1")
添加样式类:classList.add(.cls) ======>
移除样式类:classList.remove(.cls)=======>
jQuery修改标签样式:
获取样式类:$("#d1")[0] =====>获取id值为d1标签的样式类
添加样式类:addClass();========>$("#d1").addClass("c2") ====>给id值作为d1的标签添加类属性值c2
移除样式类:removeClass();=======>$("#d1").removeClass("c3")==>给id值作为d1的标签删除类属性值为c3的属性.
切换css类名,有就移除,没有就添加:toggleClass();========>$("#d1").toggleClass("c4")==>给id值为d1的标签做判断,如果有c4这个类属性那么就从重删除它,否则就把它添加上.
jquery中的三种等号分别的意思：
“=”：赋值运算，如下
var a = 3;
var b = "3"
var a1=null
var a2=undefined
var a3=0
var a4=false
“==”：等于，如下（类型不同，也可能相等）
a==b
true（这里之所以返回true是因为a是数字，b是字符串，在判断是否相等时，内部自动做了字符串和数字之间的转换，把字符串转换成了数字之后再去比较的，所以就是相等的，就返回了true）
a1==a2
true（这里的null和undefined类型不同，但是用“==”就是相等的，他们在内部自动进行了类型转换，返回的就是true）
a3==a4（这里的0和false类型不同，但是用“==”就是相等的，在内部把a3的赋值结果0转换成了false跟a4去做对比，或者是把a4的赋值结果false转换成了0跟a3去做对比，就返回了true）
true
“===”强等于，如下（类型必须相同，同时值也必须相同才相等）
a===b
false（很明显，数字跟字符串类型不同，返回false）
a1===a2
false（null和undefined类型也不同，返回false）
a3===a4
false（数字和bool值类型不同也无法相等，返回false）
后期更新
3,修改标签
4,创建标签/添加标签/删除标签
5,事件
6,动画
7,插件
8,Ajax
day 54 jQuery, part-1的更多相关文章
- day 54 jQuery 的初步基础
jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...
- jQuery Ready 与 Window onload 的区别(转)
“我们都知道,很多时候,在页面加载完后都需要做一些相应的初始化动作.例如,运行某些js特效,设置表单等等.怎么知道页面加载完了呢?一 般情况下都是设置body标签的onload监听window的loa ...
- jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法
.queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...
- jQuery 第五章 实例方法 事件
.on() .one() .off() .trigger() .click / keydown / mouseenter ... .hover() ----------------------- ...
- JavaScript基础知识（学习笔记）
1. 在JavaScript中所有事物都是对象:字符串.数字.数组.日期等等2. 在JavaScript中,对象是拥有属性和方法的数据3. 属性是与对象相关的值,方法是能够在对象上执 ...
- js的点滴
一些好的博客 http://www.cnblogs.com/coding4/p/7809063.html canvas http://www.cnblogs.com/coding4/p/5593954 ...
- jqPaginator-master | kkpager-master 这两个分页插件的使用方法
首先:百度"分页插件" 就会 找到这条链接: url=X8P3UpOM-6ceSfjdngX0oh9cNmVwSDy94CxKqWIazhyZ7If4S8wgpPqyEGUhk2t ...
- 2016/08/18 select
1.//得到select项的个数 2.jQuery.fn.size = function(){ 3. return jQuery(this).get(0).options.length; 4.} 5. ...
- python自动华 （十七）
Python自动化 [第十七篇]:jQuery介绍 jQuery jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对jav ...
随机推荐
- MySQL分组查询,前3条数据
SELECT tpn.news_id, tpn.title, tpn.news_group_id, tpn.send_date FROM t_pm_news tpn WHERE 3 > ( SE ...
- 牛客网 python 求解立方根
•计算一个数字的立方根,不使用库函数 详细描述: •接口说明 原型: public static double getCubeRoot(double input) 输入:double 待求解参数 返回 ...
- Modbus库开发笔记之九：利用协议栈开发Modbus TCP Server应用
前面我们已经完成了Modbus协议栈的开发,但这不是我们的目的.我们开发它的目的当然是要使用它来解决我们的实际问题.接下来我们就使用刚开发的Modbus协议栈开发一个Modbus TCP Server ...
- Confluence 6 在你用户宏中使用参数
你可以为你的用户宏指定参数.这样的话,用户可以使用参数来决定 Confluence 页面的显示情况. 如何在 Confluence 页面中使用你的宏参数 当添加一个宏到 Confluence 页面中的 ...
- 图片文字css小知识点
行内元素,图片和文字中间有缝隙,需要给父元素设置font-size:0: 图片和文字不对齐,给图片设置vertical-align:top 文字行高有缝隙 设置vertical-align:top
- Java之动手动脑（三）
日期:2018.10.12 星期五 博客期:017 这次留了两个动手动脑作业!我需要一个一个来说!先说第一个吧! Part 1 :随机生成1000个随机数 代码: //以下为 RandomMaker. ...
- 【python】python为何多线程无法切换
写了一个kafka传输消息,celery发布任务的脚本. 有四个线程,分别读取不同的kafka队列信息 问题是,只有第一个线程会启动,剩下的三个线程连start都运行不了. 而且这个问题不是一开始就发 ...
- 【mongo】可以用localhost启动，无法用ip启动问题的解决
问题: mongo安装在a.b.c.d机器上,启动mongo服务后, mongo localhost:27017可以进入数据库, mongo 127.0.0.1:27017也可以进入数据库 mongo ...
- 【python】gearman阻塞非阻塞，同步/异步，状态
参考: http://pythonhosted.org/gearman/client.html?highlight=submit_multiple_jobs#gearman.client.Gearma ...
- A^B Mod C
A^B Mod C 时间限制: 1 Sec 内存限制: 32 MB Problem Description 给出3个正整数A B C,求A^B Mod C. 例如,3 5 8,3^5 Mod 8 = ...