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 ...
随机推荐
- go get 报错:dial tcp 142.251.43.17:443: i/o timeout
自动下载 go env -w GO111MODULE=on 设置环境为国内代理 go env -w GOPROXY=https://goproxy.cn,direct 注:go 版本需要支持 mod
- nc传输文件结束后不退出
原因 版本不同 udp传输不会自动关闭 解决方案 nc -l 1234 > file.img nc ip 1234 -q 0 < file.img 采用tcp传输文件 -q 文件传输结束后 ...
- Docker定时删除none镜像
在使用docker的时候会产生none镜像文件,偶尔没什么,但是比如使用了自动化部署工具那就不一样了,一天没准就上百个none镜像了,非常消耗资源,所以需要定时清理 删除 none 镜像命令 dock ...
- 谁说.NET没有GC调优?只改一行代码就让程序不再占用内存
经常看到有群友调侃"为什么搞Java的总在学习JVM调优?那是因为Java烂!我们.NET就不需要搞这些!"真的是这样吗?今天我就用一个案例来分析一下. 昨天,一位学生问了我一个问 ...
- 《MySQL必知必会》知识汇总二
六.用通配符进行过滤 本章介绍什么是通配符.如何使用通配符以及怎样使用LIKE操作符进行通配搜索 LIKE操作符 百分号(%)通配符 select prod_id,prod_name from pro ...
- Doris安装部署
下载安装 Doris运行在Linux环境中,推荐 CentOS 7.x 或者 Ubuntu 16.04 以上版本,同时你需要安装 Java 运行环境(JDK最低版本要求是8) 1.下载安装包 下载地址 ...
- live-player live-pusher惨案
昨天遇到的问题,旧项目: 一个页面同时使用live-player和live-pusher时候遇到的问题,live-pusher正常,live-player无效,没有任何报错 打log 所有livepl ...
- hashlib模块、subprocess模块、loggin日志模块及实战
hashlib加密模块 目录 hashlib加密模块 加密补充说明 subprocess模块 logging日志模块 日志的组成 日志配置字典 配置参数 1.何为加密 将明文数据处理成密文数据 让人无 ...
- vue中mixins(混入)的用法
vue中mixin的使用详解 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被&quo ...
- TypeScript 前端工程最佳实践
作者:王春雨 前言 随着前端工程化的快速发展, TypeScript 变得越来越受欢迎,它已经成为前端开发人员必备技能. TypeScript 最初是由微软开发并开源的一种编程语言,自2012年10月 ...