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 ...
随机推荐
- MySQL遇到的坑：sql_mode=only_full_group_by不兼容
描述: 解决方案: show variables like "%sql_mode%"; SET sql_mode=(SELECT REPLACE(@@sql_mode," ...
- ES系列二之常见问题解决
上篇ES系列一之java端API操作结束后本以为就相安无事了,但生产的问题是层出不穷的:下面我就再记录下近几周遇到的问题以及解决方案: 一 更新ES信息报错 报错信息如下: Use Elasticse ...
- 更改grub2背景图片
在/etc/grub/default这里面修改东西然后update-grub来间接修改/boot/grub/grub.cfg中的内容 1.将png图片放进/boot/grub/目录下 2.update ...
- Kotlin + SpringBoot + JPA 服务端开发
Kotlin + SpringBoot + JPA 服务端开发 本篇主要介绍一下 kotlin + springboot的服务端开发环境搭建 1.概述 Kotlin 是一个基于JVM的编程语言, 是I ...
- C#多线程（四）并行编程篇之结构化
前言 在前三章中我们的案例大量使用到了Thread这个类,通过其原始API,对其进行创建.启动.中断.中断.终止.取消以及异常处理,这样的写法不仅不够优雅(对接下来这篇,我称其为.NET现代化并行编程 ...
- 解决RockyLinux和Centos Stream 9中firefox无法播放HTML视频问题
如题在测试两种centos后续系统时,发现firefox无法播放HTML视频问题.经过一番折腾找到了解决的办法,具体解决如下: 首先下载VLC $sudo yum install vlc 而后重启浏览 ...
- 用 Python 脚本实现电脑唤醒后自动拍照 截屏并发邮件通知
背景 背景是这样的, 我的家里台式机常年 休眠, 并配置了 Wake On Lan (WOL) 方便远程唤醒并使用. 但是我发现, 偶尔台式机会被其他情况唤醒, 这时候我并不知道, 结果白白运行了好几 ...
- 发布个工具，一键恢复Win8/8.1中的微软拼音长句模式（新体验模式）
(cnBeta:http://www.cnbeta.com/articles/277936.htm) 首先贴个图,大家来一起念台词~ 念完了木有?很激情澎湃义愤填膺有木有? 这事情最早追溯到前年 8 ...
- 使用IDEA搭建SSM项目
使用IDEA搭建SSM项目 摘要:前几天学习了SSM项目的搭建,但是因为配置过程中出现了问题因此没有搭起来,我最讨厌不确定的事情,因此自己花费了点时间钻研搭建SSM项目的方法,终于习得了SSM项目 ...
- os 模块 sys模块 json模块
今日内容详细 os模块(重要) os模块主要与代码运行所在的操作系统打交道 import os 1.创建目录 1.创建目录(文件夹) os.mkdir(r'L4') # 只可以创建单级目录 相对路径 ...