jquery（一：认识jquery、选择器）
jQuery
优点：
1.提供了强大的功能函数
2.解决了浏览器的兼容问题
3.实现了丰富的UI和插件
4.纠正错误的脚本知识
例子
1.传统：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="设置边框" id="btOne" />
<input type="button" value="设置文本" id="btTwo" />
<div></div>
<div></div>
<div></div>
</body>
</html>
<script>
//入口函数
window.onload=function(){
//先设置获取对用的元素
var btOne=document.getElementById("btOne");
var btTwo =document.getElementById("btTwo");
var divs = document.getElementsByTagName("div");
//给btOne按钮设置事件
btOne.onclick=function(){
for(var i=0;i<divs.length;i++){
divs[i].style.border='1px solid red';
}
}
//给btnTwo设置点击事件
btTwo.onclick=function(){
for(var i=0;i<divs.length;i++){
divs[i].textContent="我是设置的文本";
}
}
}
</script>
传统的js的缺点：
1.不能添加多个入口函数（window.onload)，如果添加多个入口函数，后面的会把前面的覆盖
2.原生的js的api的名字都太长，不好记
3.原生的js有的时候代码太冗余
4.原生js中的有写属性和方法有浏览器的兼容问题
5.原生js容错率太低
2.jQuery：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="设置边框" id="btOne" />
<input type="button" value="设置文本" id="btTwo" />
<div></div>
<div></div>
<div></div>
</body>
</html>
<!--<script>
//入口函数
window.onload=function(){
//先设置获取对用的元素
var btOne=document.getElementById("btOne");
var btTwo =document.getElementById("btTwo");
var divs = document.getElementsByTagName("div");
//给btOne按钮设置事件
btOne.onclick=function(){
for(var i=0;i<divs.length;i++){
divs[i].style.border='1px solid red';
}
}
//给btnTwo设置点击事件
btTwo.onclick=function(){
for(var i=0;i<divs.length;i++){
divs[i].textContent="我是设置的文本";
}
}
}
</script>-->
<script src="js/jquery-3.6.0.js"></script>
<script>
//入口函数
$(document).ready(function(){
//设置边框
$('#btOne').click(function(){
$('div').css('border','1px solid red');
});
//设置问泵
$('#btTwo').click(function(){
$('div').text('我是文本');
});
})
</script>
优点：
1.是可以写多个入口函数的
2.名称比较好记
3.jQuery的代码简洁（隐式迭代）
4.jQuery帮我们解决了浏览器的兼容问题
5.代码的容错率高，前面错了后面没关系
主要内容
介绍jQuery
jQuery是一个快速、小且功能丰富的JavaScript库。它使用一个易于使用的API，可以跨多种浏览器工作，从而使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单。jQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。
使用jQuery的步骤：
- 引入jQuery
安装：
<script src="js/jquery-3.6.0.js" type="text/javascript">
- 引入入口函数
<script src="js/jquery-3.6.0.js"></script>
<script>
//入口函数
$(document).ready(function(){
//设置边框
$('#btOne').click(function(){
$('div').css('border','1px solid red');
});
//设置问泵
$('#btTwo').click(function(){
$('div').text('我是文本');
});
})
</script>
找到要操作的元素
选择器
入口函数的写法
$('document').ready(function(){})
$(function(){})
jQuery的入口函数和window.onload的区别：
1.jQuery的入口函数可以写多个，而window.onload不能写多个
2.执行时机不同jQuery的入口函数先执行
jQuery入口函数要等待页面上的dom树加载完成后执行
window.onload要等待页面给上的所有的资源都加载完后才执行（静态资源）
$是什么？
//jQuery是一个自执行函数
window.jQuery=window.$=jQuery
1.引入一个js文件是会执行js中的代码；
2.jQuery文件的代码，其实就是执行这个自执行文件的这个自执行函数
这个自执行文件就是给window对象添加一个jQuery的属性和$属性
$和jQuery是相同的。
console.log(window.jQuery===window.$)-----true
console.log(Object.prototype.toString.call($))------'[object Function]'
$是一个函数，参数不同返回值不同
- 如果参数是一个匿名函数----入口函数
- 如果函数是一个字符串------选择器/创建一个标签
- 如果参数是一个dom对象，那他就会把dom对象转化成jQuery对象
Dom对象和Jquery对象
Dom对象都是通过js获得的对象（document）
jQuery对象都是通过jQuery方法来获取的（jQuery包装集）
Dom对象
有限的属性和方法
var divDom =document.getElementById("mydiv");
var divsDom=document.getElementsByTagName("div");
只能调用dom方法和属性不能调用jQuery方法和属性
jQuery对象
var divjquery =$("#mydiv");
用原生的Dom去获得不存在的对象是null
只能调用jQuery的方法和属性不能调用原生的jsdom对象的属性
Dom对象转换成query对象
var domDiv =doucument.getElementById("mydiv);
mydiv=$(domDiv);
console($div1._proto_===Array.prototype);false jQuery对象是一个伪数组
jQuery对象就是dom对象的包装集
也会返回集合，只是为空的包装集
jquery对象转换成Dom对象
//第一种 jQuery的方法
var jqueryDiv =jQuery("#mydiv");
var dom = jqueryDiv.get(1);
//第二种 获取制定下标
jqueryDiv = $('#mydiv');
var dom =jqueryDiv[0];
通过遍历jQuery集合的方式得到的对象是DOM对象
$("#mydiv").each(function(){
//遍历
var jquery = $（this）;
})
Jquery选择器
表示特殊语意的字符串
基础选择器
| 选择器 | 名称 | 举例 | 范围 |
|---|---|---|---|
| id选择器 | #id | $('#testDiv')选择器id为testDiv的元素 | 第一个 |
| 元素名称选择器 | element(标签名/元素名) | $("div")选择所有的div元素 | 制定 |
| 类选择器 | .class | $(".blue")选择所有class=blue的元素 | 所有 |
| 选择所有元素 | * | $("*")选择页面所有的元素 | 页面所有 |
| 组合选择器 | selector1,selector2,selectorN | $("#testDiv,span,blue")同时选中多个选择器匹配的元素 | 符合条件 |
| 并集选择器 | $('div,p,li') | 只要符合条件之一即可 | |
| 交集选择器 | $('div.redClass') | 获取class为redClass的div元素 |
层次选择器
| 选择器 | 名称 | 举例 | 范围 |
|---|---|---|---|
| 后代选择器 | ancestor descendant | $（“#parent div”）选择id为parent的元素的所有div元素 | 所有代 |
| 子代选择器 | parent>child | $("#parent>div")选择id为parent的直接div子元素 | 第一代 |
| 相邻选择器 | prev+next | $(".blue+img")选择css类为blue的下一个元素（不是指定的找不到） | 挨着的同级（一个） |
| 同辈选择器 | prev-sibling | $(".blue-img")选择css类为blue的之后的img元素 | 同级所有（只会往下找） |
获得子代元素
$('#father>div')
获得子代元素和页面所有的p
$('#father>div,p')
获得子代元素和子代的p
$('#father>div,#father>p')
获取后代
$('#father div')
过滤选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ：eq(index) | $('li:eq(2)').css('color','red'); | 获取到的li元素中，选择索引号为2的元素，索引号为index从0开始 |
| ：odd | $('li:odd').css('color','red'); | 获得到的li元素中，选择索引号为奇数的元素 |
| ：even | $('li:even').css('color','red'); | 获得到的li元素中，选择索引号为偶数的元素 |
ul>li{我是第$个li}*10
按住tab生成
隔行变色
$('li:odd').css('backgroundeColor','red');
$('li:even').css('backgroundeColor','pink');
$('li:eq(0)').css('backgroundeColor','red');
$('li:eq(9)').css('backgroundeColor','red');
筛选选择器
| 名称 | 方法 | 描述 |
|---|---|---|
| children(selector) | $('ul').children('li') | 相当于$('ul-li'),子类选择器 |
| find（selector) | $('ul').find('li') | 相当于$('ul li'),后代选择器 |
| siblings（selector） | $('#first').siblings('li') | 查找兄弟节点，不包括自己本身 |
| parent（） | $('#first').parent() | 查找父亲 |
| eq（index） | $('li').eq(2) | 相当于$('li:eq(2)'),index从0开始 |
| next() | $('li').next() | 找下一个兄弟 |
| prev（） | $('li').prev() | 找上一次兄弟 |
show（）本质上是将display：block
hide（）本质上是将display：none
不能给一级标签的a标签mouseover事件，会选不上二级菜单，要在二级的ul设置事件
表单选择器
| Forms | 名称 | 举例 |
|---|---|---|
| 表单选择器 | ：input | 查找所有的input元素：$(":input"); 注意：会匹配所有的input、textarea、select和button元素。 |
| 文本框选择器 | ：text | 查看所有的文本框：$(":text") |
| 密码框选择器 | ：password | 查找所有的密码框$(":password") |
| 单选按钮选择器 | ：radio | 查找所有的单选按钮：$(":radio") |
| 复选框选择器 | :checkbox | 查找所有的复选框$（":checkbox") |
| 提交按钮选择器 | :submit | 查找所有图像域:$(":submit") |
| 重置按钮选择器 | ：reset | 查找所有重置按钮:$(":reset") |
| 按钮选择器 | :button | 查找所有的按钮:$(":button") |
| 文件域选择器 | :file | 查找所有的文件域:(":file") |
获取表单的值
val()
1.不给参数就是获取值
2.给参数就是设置值
$('#button').click(function(){
$('#text').val();
});
事件分析
mouseover事件在鼠标移动到选取元素和对应的子元素上都会触法
mouseenter只会在鼠标移动到选取元素上才会触发
以后鼠标移入使用mouseenter，鼠标移除用mouseleave
案例：
实现二级导航栏：
show（）本质上是将display：block
hide（）本质上是将display：none
实现图片的聚焦明暗：
$(function(){
//找到后代的li
$('.warp').find('li').mouseenter(function(){
$(this).css('opacity',1)---这个方法的返回值是设置这个方法的的元素本身
$(this).css('opacity',1).siblings('li').css('opacity',0.4);
});
$('.warp').find('li').mouseleave(function(){
$(this).find('li').css('opacity',1)
})
})
实现手风琴
$(function(){
$('.parentMap>.menuMap').click(function(){
$(this).children('div').show().parent().siblings('li').children('div').hide();
})
})
jQuery的特性：隐式迭代
jQuery的特性：链式编程，在于一个方法的返回是一个jQuery的对象既然jQuery对象可以继续点出jQuery的方法
淘宝服饰精品案例
$(function(){
$('#left>li').mouseenter(function(){
var idx =$(this).index();//当前的鼠标移入的标签的索引
$('#center>li:eq('+idx+')')//字符串的拼接
$('#center>li).eq(idx).show().siblings('li').hide();
});
$('#right>li').mouseenter(function(){
var idx =$(this).index();//当前的鼠标移入的标签的索引
ide+=9;//9是左边li标签的个数
$('#center>li:eq('+idx+')')//字符串的拼接
$('#center>li).eq(idx).show().siblings('li').hide();
});
})
为什么不给li里面的a标签设置事件呢？
给a设置事件的索引都是0
实现表单的动态增删改查
$(function(){
$('#buttion-add').click(function(){
//数据录入表单
$('#adddiv').show();
//遮照层
$('#jmake').show();
}) ;
$('#buttion-close').click(function(){
//数据录入表单
$('#adddiv').hide();
//遮照层
$('#jmake').hide();
})
//获得用户输入的信息
$('#buttion-input').click(function(){
var s = $('#text1').val();
var ss= $('#text2').val();
//创建出一个tr
var str =$('<tr><td>'+s+'</td><td>'+ss+'</td></tr>')
$('#ul').append(str);
//自动关闭
$('#buttion-close').click();
});
});
jquery（一：认识jquery、选择器）的更多相关文章
- jQuery入门（1）jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
- jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器
1. 什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- 【学习笔记】锋利的jQuery（一）选择器
一.要点阐述 1,jQuery创建于2006年1月的一个开源项目,强调理念是“write less,do more”,压缩后大小30KB左右.. 2,jQuery里的方法都被设计程自动操作对象集合,而 ...
- 汇总jQuery的61种选择器及示例
汇总jQuery的61种选择器及示例 恋痿喃 ㄍń稀广 因罘乐睽 ú燔蒇 骤幄觳 ч豹 齑骝氮铷 宅廓Ω孓 锏遒 荛猩ㄜ彬 芡钷ж ┊贩错鹌 掩饰着可还是几步就窜到了门口看着这个让她 ...
- jQuery（2）——选择器
选择器 利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为.jQuery的行为规则都必须在获取到元素后才能生效. [jQuery选择器的优势] (1)简洁的写法 ...
- JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- （jQuery知识点整理-含有选择器）
第一单元 jQuery介绍: javaScript ...
随机推荐
- 【云原生 · Kubernetes】Kubernetes运维
(1)Node的隔离与恢复 在硬件升级.硬件维护等情况下,需要将某些Node隔离.使用kubectl cordon <node_name>命令可禁止Pod调度到该节点上,在其上运行的Pod ...
- 禁用显卡自动更新(解决官办驱动和OEM驱动相冲)
起因 有一天打开MC(我的世界)时候突然显示显卡不支持,想了想可能是自己捣鼓电脑的时候弄坏了,提示说版本不支持,一看自己的驱动还是上古版本,但是之前都是可以正常玩的,想着更新下驱动就行了呗,更新完&q ...
- i春秋broken
点开一个附带超链接的网页,直接点击file跳转到broken网页 网页里面是一个jsfuck代码 Jsfuck代码的执行方法 ①复制 ②打开firefox浏览器 ③按下F12 ④选择上方的控制台 ⑤在 ...
- SpringMVC02:返回值、json数据、文件上传、拦截器
一.响应返回值 1.搭建环境(两个webapp,不要选错) 2.响应之返回值是String类型 package cn.itcast.controller; import cn.itcast.doma ...
- Redis分布式锁应用
Redis锁的使用 起因:分布式环境下需对并发进行逻辑一致性控制 架构:springboot2.Redis IDEA实操 先新建RedisLock组件 注:释放锁使用lua脚本保持原子性 @Compo ...
- 0停机迁移Nacos？Java字节码技术来帮忙
摘要:本文介绍如何将Spring Cloud应用从开源Consul无缝迁移至华为云Nacos. 本文分享自华为云社区<0停机迁移Nacos?Java字节码技术来帮忙>,作者:华为云PaaS ...
- 定制.NET 6.0的Middleware中间件
大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 在本文中,我们将学习中间件,以及如何使用它进一步定制应用程序.我们将快速学习中间件 ...
- 01.Java面试都问啥？
大家好,我是王有志.好久不见,不过这次没有休假,而是搞了个"大"工程,花了点时间自学Python,然后写了"玩具爬虫",爬某准网的面经数据,为来年的" ...
- yolov5数据集制作 数据集分割+voc格式转txt格式代码
先上数据集分割代码 网上没找到合适的 自己写了一个 分割比例为0.6 :0.2 :0.2 import os import random oriImgDir = "./change14img ...
- mysql基础命令语法
删除空格 update 表名 set 字段名 = replace(字段名 ,' ','') ; 临时表创建与删除 -- 创建临时表 create temporary table if not exis ...