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 ...
随机推荐
- 前后端结合解决Excel海量公式计算的性能问题
背景 在数据密集的业务领域,尤其是金融,保险,税务等行业中,经常需要利用Excel模型,来对业务进行分析和处理.例如: 1.金融投资: 根据模型进行估值计算,并对投资风险进行评估,通过测算出投资的内部 ...
- hexo-gitalk-评论自动初始化
第一步 申请Personal Access Token 从 Github 的 Personal access tokens 页面,点击 Generate new token 第二步 安装项目依赖 np ...
- Bootstrap响应式相关
bootstrap响应式布局实现原理:百分比布局+媒体查询 | 栅格系统 bootstrap和vue响应式布局的区别: 1. bootstrap 栅格系统,简,缺少组件 2. vue 速度快,组件多 ...
- 02-线性结构4 Pop Sequence (25分)
02-线性结构4 Pop Sequence (25分) Given a stack which can keep M numbers at most. Push N numbers in the or ...
- JavaScript：变量：如何声明变量？
声明变量可以用下面几种方式: 但是这几种声明方式肯定是有区别的,主要是上面三种方式的区别,这需要结合window对象和作用域来说明,这里不赘述. 声明变量的时候,推荐使用let,这是ES6新推出的更好 ...
- 2022年8月20，第一组，周鹏，从1到m中随机取n个数，n<=m，显示出所有取法
static Random a1 =new Random(); static int m = a1.nextInt(20)+1;//随机取一个1到20的值 static int n = a1.next ...
- csp-j 游记
### 初赛 day -7 ~ day -1 赛前集训,都很简单,什么二叉树,图论呀,轻松搞定.做了 $2008$ 至 $2015$ 年的普及组真题,都在 $50$ 分以上,感觉初赛稳了(坐标 $HN ...
- SSM框架——Spring
Spring 轻量级.非侵入式的框架 支持控制反转(IOC).面向切面编程(AOP) 支持事务的处理和声明.框架整合 1.HelloSpring(入门) 1.1导入依赖 <!-- https:/ ...
- ABP Framework 手动升级指南：从6.0.1升级到7.0.0
ABP 7.0.0 正式版已经发布,ABP-Framework-All-In-One 项目同步升级. LeptonX Lite Theme 目前还没有包含在源码解决方案中,还是以 Nuget 包提供, ...
- NAPT网络结构下TCP/UDP/ICMP访问外网原理思考
背景 作为程序员,应该都听说过NAT(Network Address Transfer,网络地址转换)这一技术名词,并或多或少大概知道其原理与作用--NAT是用于解决IPv4地址不够用,保证我们能够在 ...