jQuery基础入门
2024-05-10 17:00:26
一：jQuery简介
1JQuery是什么？
1.1JavaScript库：封装了很多JS代码
1.2JavaScript库：jQuery(90%)、Ext JS
1.3官方地址：http://jquery.com
2.为什么要学习jQuery?
为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
3.JQuery如何使用？
3.1.工具：HBuilder
3.2.使用jQuery步骤
1.下载jQuery库
下载版本：
开发版本：jquery-3.3.1.js
生产版本：jquery-3.3.1.min.js
2.引入：将js文件复制到项目中
3.使用
二：jQuery选择器
案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><h3>2</h3><script type="text/javascript">//加载函数// $(function(){// //ID选择器// //一个属性设置// $("#ul1").css("clolr","bule");// //多个属性设置 json// $("#ul1").css({// "background":"bule",// "clolr":"bule"// })// }); //类选择器 一组元素// $(".sb").css("background","bule")//元素选择器 一组元素// $("li").css("background","bule")//通配符选择器// $("*").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");// 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");// 区间设置背景颜色// 设置item2 item3 item4 背景 1 2 3// 注意事项：如果gt和lt混合使用，并且gt在前，那么获取后元素的下标胡i重新编号。// $("#ul1>li:gt(0):lt(3)").css("background","yellow");// lt在前// $("#ul1>li:lt(4):gt(0)").css("background","yellow");// 案例：隔行换颜色// $("table>tbody>tr:gt(0):even").css("background","red")$("table tr:gt(0):even").css("background", "red");$("table tr:gt(0):odd").css("background", "yellow");// 找到包含YANGWENGUANG内容的li标签设置背景// $("#ul1>li:contains('YANGWENGUANG')").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"));// each方法 // $("#demo2>input:checkbox:checked").each(function() {console.log($(this).val());});// var checkboxs = $("#demo2>input:checkbox:checked");// i 下标// k 元素$.each(checkboxs, function(i, k) {// console.log(i,k);console.log($(k).val())});});</script><ul id="ul1"><li>item1</li><p>hehe</p><li class="sb">item2</li><li>item3</li><span>heihei</span><li>item4 YANGWENGUANG</li><li class="sb">item5</li><p>lvelve</p><ol><li>abc1</li><li>abc2</li><li>abc3</li><li>abc4</li><li>abc5</li></ol></ul><hr><div class="oBox">我是div</div><hr><h4>表格隔行换颜色</h4><table border="1" width="100%" height="400"><tr style="background-color: gray;"><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr></table><hr><h4>表单选择器</h4><form action=""><input type="text"><input type="password"><input type="radio"><input type="checkbox"><input type="file"><input type="text"><input type="submit"><input type="reset"><input type="password"><input type="image"><select name="" id=""><option value=""></option></select><textarea rows="12" cols="4"></textarea></form><input type="text"><hr><div id="demo1" style="width: 200px;height: 200px;border: 1px solid red;"><input checked="checked" type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女<input type="text"></div><hr><div id="demo2" style="width: 200px;height: 200px;border: 1px solid red;"><input type="checkbox" value="杨文广">杨文广<input checked="checked" type="checkbox" value="李小鹏">李小鹏<input type="checkbox" value="沪青棒">沪青棒<input checked="checked" type="checkbox" value="写开进">写开进<input checked="checked" type="checkbox" value="等延康">等延康<input type="text"></div></body>
</html>jQuery基础入门相关推荐
- Ajax、jQuery基础入门视频教程
关注公众号,免费获取资料 本视频是Ajax和jQuery基础入门视频,该视频针对接触过javaScript基础的学员录制,授课讲究通俗易懂.通过该视频的学习,相信您能够轻轻松松地掌握Ajax和jQue ...
- jQuery基础入门篇
一.使用JQ完成首页的定时广告弹出 1.需求分析 在首页中(logo的上方)显示一个广告图片(页面加载后,间隔3秒弹出广告图片,再间隔3秒后隐藏广告图片).[使用jQuery实现] 2.技术分析 2. ...
- 零基础入门jQuery视频教程
零基础入门jQuery最新版开发.NET富客户端应用(选择器.DOM操作.事件和动画.Ajax应用.插件.Mobile) 课程分类:.NET+Jquery 适合人群:初级 课时数量:35课时 用到技术 ...
- java与jquery的选择器区别_java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
- jQuery零基础入门——（三）层级选择器
2019独角兽企业重金招聘Python工程师标准>>> <jQuery零基础入门>系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,用我的理解表述出来, ...
- java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章 JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScr ...
- Jquery基础学习之-入门
最近段时间在阅读Jquery基础教程, 本文主要总结Jquery学习开发环境的建立. 使用的开发工具:Dreamweaver .Nodpad++; 使用Jquery版本:jquery-1.10.2 ...
- JQuery基础快速入门（超级详细）
JQuery基础学习 JQuery概念 快速入门 JQuery对象和JS对象区别与转换 选择器 1.基本操作的学习 2.分类 2.1基本选择器 2.2 层级选择器 2.3属性选择器 2.4过滤选择器 ...
- JQuery 基础 || 目前 jQuery 有三个大版本||JQuery快速入门
1. 概念: 一个JavaScript框架.简化JS开发 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScrip ...
最新文章
- 创业公司技术总监，去上市公司面试，结果凉了！
- 技术人员关注的几个优质公众号
- 公钥私钥 多久过期_上传到公钥服务器的gpg公钥过期了会被删除吗？
- 使用AppleScript播放指定时间的电影片段
- Ubuntu16.04 配置vnc4server
- UVA 10142 Australian Voting（模拟）
- ExtJS学习--------Ext.Element中的经常使用事件和其它重要的方法学习（实例）
- Xshell操控kali-linux虚拟机
- vue global filters
- 令人比较失落的IT圈子-关于华为裁员
- 大数据 | Hadoop性能测试
- Windows10开机音乐替换
- 基带集成或独立?市售主流4G手机芯片浅析
- 哪款mac写python_新款Mac Pro有几个圈圈？写几行Python数一下
- 微信辅助注册平台源码
- 计算机工业控制高职教材,计算机工业控制技术
- 重温与解析《最后生还者》的互动叙事精髓（下）
- Bonobo Git Server搭建本地（Windows）私有的Git服务器
- Array.reduce()的用法与进阶
- Machine Learning学习笔记（四）EML极限学习机