一. 3W1H
1.What?
jQuery是什么?
jQuery是JavaScript库的一种,其中封装了很多JS代码。
常见的JavaScript库有:jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto。
jQuery的官方网站:jQuery
2.Why?
为什么要学习jQuery?
(1) 为了简化JavaScript开发:选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件(2)jQuery的优势:
轻量级。核心文件才几十kb,不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持,大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等
免费、开源
3.Where?
哪些情况下使用?
(1).中大型网站开发。
(2).是一些前端框架的基础,比如EasyUI等。
4.How?
怎样使用?
使用jQuery步骤
1.下载jQuery库
开发版本:jquery-3.3.1.js
生产版本:jquery-3.3.1.min.js
2.引入:将js文件复制到项目中
3.使用
二. jQuery入口函数
两种写法
s(function () {
...//此处是页面DOM加载完成的入口
});
s(document).ready(function(){
...//此处是页面DOM加载完成的入口
})
三.jQuery选择器
(1).jQuery中的选择器就是一个标记,为了快速获取指定的标签。
(2).jQuery中常见选择器: ID选择器、class选择器、element选择器、子代选择器、后代选择器、相邻兄弟选择器、分组选择器等。
(3).jQuery中部分选择器使用:
//加载函数
$(function(){
//id选择器的使用
//jQuery的样式设置 通过css方法进行设置即可
//一个属性设置
$("#ul1").css("color","red")
//多个属性的设置 通过json格式进行
//{"属性":"属性值","属性":"属性值"}
$("#ul1").css({
"background":"red",
"color":"yellow"
});
//类选择器 一组元素
$(".sb").css("background","red");
//元素 一组元素
$("li").css("background","red");
//通配符选择器 *
$("*").css("background","red");
//群组选择器 可以同时设置多个标签的样式
$("#ul1,.oBox").css("background","red");
//设置ul下的子li的字体颜色
$("#ul1>li").css("color","red");
//所有后代
$("#ul1 li").css("color","red");
//过滤选择器的使用
//:first 获取第一个节点、
$("#ul1>li:first").css("background","red");
// //:last 获取最后一个节点
$("#ul1>li:last").css("background","red");
//获取指定的节点 下标
$("#ul1>li:eq(2)").css("background","yellow");S
//even 奇数 过滤下标为偶数 位置为奇数的标签
$("#ul1>li:even").css("background","yellow");
//odd 偶数 过滤下标为奇数 位置为偶数的标签
$("#ul1>li:odd").css("background","yellow");
//gt() 大于 不包括自己
$("#ul1>li:gt(2)").css("background","yellow");
//lt()小于 不包括自己
$("#ul1>li:lt(2)").css("background","yellow");
//区间设置背景颜色
//注意事项 如果gt 和 lt 混合使用 并且gt在前 那么获取元素的下标i重新编号
$("#ul1>li:gt(0):lt(3)").css("background","yellow");
//案例 隔行换颜色
$("table tr:gt(0):even").css("background","red");
$("table tr:gt(0):odd").css("background","yellow");
//根据给的内容查找
$("#ul1>li:contains('zz')").css("background","yellow");
//表单选择器
$(":input").css("background","red");
$("form>input:input").css("background","red")
//获取普通文本
$("form>input:input:text").css("background",red"");
//单选
console.log($("#demo1>input:radio"));
//获取选中
console.log($("#demo1>input:radio:checked"));
//获取value
console.log($("#demo1>input:radio:checked").val());
//复选框
console.log($("#demo2>input:CheckBox"));
//获取选中复选框
console.log($("#demo2>input:CheckBox:checked"));
//复选框
console.log($("#demo2>input:CheckBox"));
四、排他思想
//想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);