jquery（一：认识jquery、选择器）
2024-10-09 22:02:42
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();
});
});
最新文章
- POJ 2253 Frogger（Dijkstra)
- 你以为的ASP.NET文件上传大小限制是你以为的吗
- MATLAB函数freqz()
- MySQL Python教程（4）
- Ranorex 5 发布，支持SAP、Oracle Forms、MS Dynamics等
- sql 主外键
- jq实现多级手风琴效果
- OC面向对象继承关系和组合关系笔记
- C# 5.0 TAP 模式下的HTTP Get和Post
- bash的多行注释
- Linux入门基础 #10：命令行文本处理工具
- Spring bean实例化的方式
- 第四节：详细讲解Java中的类和面向对象思想
- Android requestcode resultcode的作用
- 雅克比迭代算法(Jacobi Iterative Methods) -- [ mpi , c++]
- iOS 基础入门--Bull' Eye 小游戏
- 使用sys用户创建其他用户下的dblink
- SQL---->mySQl数据库1------数据库的增删改查备份恢复
- （2.1）windows下Nutch1.7的安装
- Makefile 实例