46-jQuert库的基本介绍

一、jQuery的初级的使用，
下面直接是代码的演示部分。其中的jQuert代码中的jQuery 大家可以进行网上下载，注意浏览器的兼容问题，代码中会有你需要的疑惑，希望能够对你的学习有帮助作用，合适于初学者，大牛可以绕行。
这个适合于初学者，大牛求绕行，

注意：一下代码的①js库是使用的是：jquery-1.12.4.js
②img图片也是专门建立的一个文件夹
③html代码的格式也是也是专门写在一个css的的文件夹中，方便代码的分
层，和代码的可阅读性。是的代码的高内聚低耦合更加合理，方便自己后续
去给往上添加功能和内容。
关于jQuery中的一些介绍和历史，大家可以上网进行查询学习
代码段
1.初识jQuery

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="button" id="btn" value="点我弹出对话框" /><script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("#btn").click(function(){alert("点我你幸福吗？");});</script></body>
</html>

2.认识一下页面的加载函数

 <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//js页面加载函数事件，当页面加载成功后就开始执行//js页面加载事件 当页面加载成功后就开始执行//js页面加载事件只会执行一次。如果有多个谁在后面就执行谁//window加载的时候就触发了window.onload = function(){alert("'谁是英雄");}/*** jQuery页面加载函数，当document(DOM)文档结构准备好了就触发了* jQuery页面加载函数可以执行多次，* Jqueury页面加载函数要比js页面加载函数先进行触发* */$(function(){alert("好好学习，你最棒！");});</script>
</body>

``` 3.jQuery的语法结构

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">/*** jQuery工厂函数，将某些内容加工成jQ对象* jQuery(document).ready();* $(document).ready();* $(document)将JS对象转换成JQ对象*/$(document).ready(function(){});//可以将上面的简写成$(function(){});</script></body>
</html>

4.jQuert常用的样式函数

①
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.content{background-color: deeppink;}div{border: 1px solid red;width: 100px;height: 100px;}.borderContent{border: 1px solid black;}</style></head><body><div style="width: 100px;"></div><script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//用js来操作元素/*var divObj = document.getElementsByTagName("div")[0]; divObj.onmouseover = function(){//设置背景颜色divObj.style.backgroundColor = "red";//创建class名字divObj.className = "haoren";}*///用Jquery操作对象$("div").mouseover(function(){$(this).css({"background-color":"red","border":"10px solid blue"});//jQuert来获取css中只能获取标签中style的属性值});</script></body>
</html>
------------------------------------------------------------------------------------------------------------------------------
②
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id=""></div><input type="button" value="点我隐藏" id="hid" /><input type="button" value="点我显示" id="show" /><script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("div").css({"border":"2px solid red","width":"100px","height":"100px"});$("#hid").click(function(){$("div").hide();});$("#show").click(function(){$("div").show();});});</script></body>
</html>

5.jQuery常用的使用风格

①遍历
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">var  arr = ["小","大","中"];//方法一/*$(arr).each(function(index,ele){alert(index+" "+ele);});*///方法二$.each(arr,function(index,ele){alert(index+"   "+ele);});</script></body>
</html>
------------------------------------------------------------------------------------------------------------------------
②简单的链式编程<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>问答特效</title><style type="text/css">h2 {padding: 5px;}p {display: none;}</style></head><body><h2>什么是受益人?</h2><p><strong>解答：</strong> 受益人是指人身保险中由被保险人或者投保人指定的 享有保险金请求权的人，投保人、被保险人可以为受益人。</p><script src="js/jquery-1.12.4.js" type="text/javascript"></script><script type="text/javascript">/** 需求： 1.页面加载，当<h2>被点击的时候，将<h2>的背景颜色设置为#CCFFFF，并同时将其下一个兄弟元素*       CSS样式设置为显示。*/$(function(){$("h2").css("cursor","pointer");$("h2").click(function(){$(this).css("background-color","red").next().show();});});</script></body></html>
----------------------------------------------------------------------------------------------------------------------------------
③jQuery的隐式循环
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id=""></div><div id=""></div><script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//进行给div设置边框和颜色和边框的宽度//利用了jQuery的隐式迭代$("div").css({"border":"1px solid red","width":"100px","height":"100px"})</script></body>
</html>

6.jS对象和JQ对象的转换问题


<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>问答特效</title><style type="text/css">h2 {padding: 5px;}p {display: none;}</style></head><body><h2>什么是受益人?</h2><p><strong>解答：</strong> 受益人是指人身保险中由被保险人或者投保人指定的 享有保险金请求权的人，投保人、被保险人可以为受益人。</p><script src="js/jquery-1.12.4.js" type="text/javascript"></script><script type="text/javascript">/** 需求： 1.页面加载，当<h2>被点击的时候，将<h2>的背景颜色设置为#CCFFFF，并同时将其下一个兄弟元素*       CSS样式设置为显示。*/$(function(){$("h2").css("cursor","pointer");$("h2").click(function(){$(this).css("background-color","red").next().show();});});</script></body></html>

7-jQuery的选择器
①基本选择器

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>图书简介</title><link rel="stylesheet" href="css/bookStyle.css"></head><body><section id="book"><div class="imgLeft"><img src="data:images/store.jpg" alt="岛上书店"></div><div class="textRight"><h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1><p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p><p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p><div class="price"><div id="jdPrice">京东价： <span>￥24.10</span> [6.9折]<p>[定价：<span>￥35.00</span>]</p> (降价通知)</div><p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p><dl><dt>以下促销可在购物车任选其一</dt><dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd><dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd></dl><p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p></div></div></section><script src="js/jquery-1.12.4.js"></script><script type="text/javascript">/** 需求：   1.点击dt的时候，利用标签选择器将两个<dd>的内容显示*      2.利用标签选择器，将<h1>元素的字体颜色设置为蓝色*      3.利用类选择器将类名为price的元素背景设置为#efefef,内边距统一为5px*      4.利用id选择器将id名为author的字体颜色设置为#083499*      5.利用并集选择器 将类名为intro和标签<dt>和<dd>的字体颜色设置为#ff0000*      6.使用全局选择器将所有字体粗细设置为加粗*/$(function(){//1.点击dt的时候，利用标签选择器将两个<dd>的内容显示/*$("dt").click(function(){$("dd").show();});*///2.利用标签选择器，将<h1>元素的字体颜色设置为蓝色//$("h1").css("color","blue");//3.利用类选择器将类名为price的元素背景设置为#efefef,内边距统一为5px/* $(".price").css({"background-color":"yellow","padding":"5px"});*///4.利用id选择器将id名为author的字体颜色设置为#083499    //$("#author").css("color","red");//5.利用并集选择器 将类名为intro和标签<dt>和<dd>的字体颜色设置为#ff0000//$(".intro,dd,dt").css("color","yellow");//6.使用全局选择器将所有字体粗细设置为加粗$("*").css("font-weight","bolder");});</script></body></html>
--------------------------------------------------------------------------------------------------
②层次选择器
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>图书简介</title><link rel="stylesheet" href="css/bookStyle.css"></head><body><section id="book"><div class="imgLeft"><img src="data:images/store.jpg" alt="岛上书店"></div><div class="textRight"><p>我是h1的同辈元素p</p><h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1><p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p><p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p><div class="price"><div id="jdPrice">京东价： <span>￥24.10</span> [6.9折]<p>[定价：<span>￥35.00</span>]</p> (降价通知)</div><p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p><dl><dt>以下促销可在购物车任选其一</dt><dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd><dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd></dl><p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p></div></div></section><script src="js/jquery-1.12.4.js"></script><script type="text/javascript">/** 需求：   1.利用后代选择器 将类名为textRight下的所有<p>元素字体颜色设置为红色*      2.重新利用子选择器 将类名为textRight的子元素<p>字体颜色设置为红色*      3.利用相邻兄弟选择器 将<h1>后紧邻的兄弟<p>元素内容添加文本装饰下划线*      4.利用同辈元素选择器(通用兄弟选择器)将<h1>后的所有兄弟<p>元素内容添加文本装饰下划线*/ //1.// $(".textRight p").css("color","red");//2.//$(".textRight>p").css("color","red");//3.//$("h1+p").css("text-decoration","underline");//4.利用同辈元素选择器(通用兄弟选择器)将<h1>后的所有兄弟<p>元素内容添加文本装饰下划线$("h1~p").css("text-decoration","underline");    </script></body></html>
-------------------------------------------------------------------------------------------------------------------------------------
③属性选择器
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>京东快报</title><link rel="stylesheet" href="css/newStyle.css"></head><body><section id="news"><header>京东快报<a href="#" class="more">更多 > </a></header><ul><li><a  href="sale.jd.com/act/h7mf8.html" class="hot"><span>[618]</span>志玲姐姐：墨镜300减30</a></li><li id="sec"><a href="www.jd.com/news.aspx?id=29257"><span>[公告]</span>京东无锡馆正式启动</a></li><li><a href="sale.jd.com/act/k2ad45v.html"><span>[特惠]</span>99元抢平板！品牌配件199-100</a></li><li><a href="www.jd.com/news.aspx?id=29252"><span>[公告]</span>节能领跑京东先行</a></li><li><a href="sale.jd.com/act/ugk2937w.html" class="last"><span>[特惠]</span>高洁丝实力撩货，领券五折</a></li></ul></section><script type="text/javascript" src="js/jquery-1.12.4.js"></script><script type="text/javascript">/** 需求：   1.将id为news下的所有的带有class属性的<a>标签背景颜色设置为#c9cbcb*      2.将id为news下的所有的class属性值为hot的<a>标签背景颜色设置为#c9cbcb*      3.将id为news下的所有的class属性值不等于hot的<a>标签背景颜色设置为#c9cbcb*      4.将id为news下的所有的href属性值以www开头的<a>标签背景颜色设置为#c9cbcb*      5.将id为news下的所有的href属性值以html结尾的<a>标签背景颜色设置为#c9cbcb*      6.将id为news下的所有的href属性值包含k2的<a>标签背景颜色设置为#c9cbcb*/$(function(){//1.将id为news下的所有的带有class属性的<a>标签背景颜色设置为#c9cbcb//$("#news a[class]").css("background-color","red");//2.将id为news下的所有的class属性值为hot的<a>标签背景颜色设置为#c9cbcb//$("#news a[class=hot]").css("background-color","red");//3.将id为news下的所有的class属性值不等于hot的<a>标签背景颜色设置为#c9cbcb//$("#news a[class!=hot]").css("background-color","red");//4.将id为news下的所有的href属性值以www开头的<a>标签背景颜色设置为#c9cbcb//$("#news a[href^=www]").css("background-color","red");// 5.将id为news下的所有的href属性值以html结尾的<a>标签背景颜色设置为#c9cbcb//$("#news a[href$=html]").css("background-color","red");// 6.将id为news下的所有的href属性值包含k2的<a>标签背景颜色设置为#c9cbcb$("#news a[href*=k2]").css("background-color","red");});</script></body></html>
-----------------------------------------------------------------------
④基本过滤选择器
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>仿冬奥列表内容</title><link rel="stylesheet" href="css/games.css"></head><body><div class="contain"><h2>祝福冬奥</h2><ul><li> 贝克汉姆：衷心希望北京能够申办成功！</li><li> 姚明：北京申冬奥是个非常棒的机会！加油！</li><li class="hehe"> 张虹：北京办冬奥，大家的热情定超乎想象！ </li><li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li><li> 赵宏博：北京申办冬奥会是再合适不过了！</li><li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li></ul></div><script src="js/jquery-1.12.4.js"></script><script type="text/javascript">/** 需求：   1.使用过滤选择器给类名为contain下的<h2>设置背景颜色为#2a65ba和字体颜色为#ffffff*      2.使用过滤选择器给类名为contain下的最后一个<li>的边框设置为none；*      3.使用过滤选择器给类名为contain下的第一个<li>设置字体大小为16px 字体颜色为#e90202*      4.使用过滤选择器给类名为contain下的偶数行<li>背景颜色设置为#f0f0f0*      5.使用过滤选择器给类名为contain下的奇数行<li>背景颜色设置为#cccccc*      6.使用过滤选择器给类名为contain下的前两个<li>的字体颜色设置为#708b02*      7.使用过滤选择器给类名为contain下的后两个<li>的字体颜色设置为#b66302*      8.使用过滤选择器给类名为contain下的第三个<li>的背景颜色设置为#02acaa*/$(function(){//1//$(".contain h2").css("background-color","red");//2.//$(".contain li:last").css("border","none");//3.//$(".contain li:first").css({"font-size":"20px","color":"red"});//4.//$(".contain li:even").css("background-color","red");//5//$(".contain li:odd").css("background-color","red");//6//$(".contain li:lt(2)").css("color","red");//7                //$(".contain li:gt(3)").css("color","red");//8$(".contain li:eq(2)").css("color","red");});</script></body></html>
--------------------------------------------------------------------------------------------------------------------
⑤可见性过滤选择器
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>可见性过滤选择器</title><style type="text/css">.txt_show {display: none;color: #00C;}#txt_hide {display: block;color: #F30;}</style></head><body><p id="txt_hide">点击按钮，我会被隐藏哦~</p><p class="txt_show">隐藏的我，被显示了，嘿嘿^^</p><div class="txt_show">xxxx</div><input name="show" type="button" value="显示隐藏的P元素" id="show" /><input name="hide" type="button" value="隐藏显示的P元素" id="hide" /><script src="js/jquery-1.12.4.js"></script><script>/** 需求：   1.点击显示  使用可见性过滤选择器 将所有隐藏的<p>元素显示。*      2.点击隐藏  使用可见性过滤选择器 将所有显示的<p>元素隐藏*/$(function(){//1.点击显示  使用可见性过滤选择器 将所有隐藏的<p>元素显示$("#show").click(function(){$(":hidden").show();});//2.点击隐藏  使用可见性过滤选择器 将所有显示的<p>元素隐藏$("#hide").click(function(){$(":visible").hide();});});</script></body></html>

46-jQuert库的基本介绍相关推荐

CV之face_recognition：Py之face_recognition库安装、介绍、使用方法详细攻略
CV之face_recognition:Py之face_recognition库安装.介绍.使用方法详细攻略目录 face_recognition简介 face_recognition安装 face ...
OpenGL开发库的详细介绍
OpenGL开发库的组成开发基于OpenGL的应用程序,必须先了解OpenGL的库函数.它采用C语言风格,提供大量的函数来进行图形的处理和显示.OpenGL库函数的命名方式非常有规律.所有OpenG ...
python 标准库之 glob 介绍（获取文件夹下所有同类文件）
python标准库之glob介绍 glob 文件名模式匹配,不用遍历整个目录判断每个文件是不是符合. 1.通配符星号(*)匹配零个或多个字符 import glob for name in glob ...
Python Pillow(PIL)库的用法介绍(二)
Python Pillow(PIL)库的用法介绍(二) 在上一篇文章中介绍了Pillow库的一些基本用法,参考:https://blog.csdn.net/weixin_43790276/articl ...
Python binarytree库的用法介绍
Python binarytree库的用法介绍 binarytree 库是一个 Python 的第三方库.这个库实现了一些二叉树相关的常用方法,使用二叉树时,可以直接调用,不需要再自己实现. 同时,b ...
Python heapq库的用法介绍
Python heapq库的用法介绍一.heapq库简介 heapq 库是Python标准库之一,提供了构建小顶堆的方法和一些对小顶堆的基本操作方法(如入堆,出堆等),可以用于实现堆排序算法. 堆是 ...
Linux下curses函数库的详细介绍
Linux下curses函数库的详细介绍 curses库介绍安装 curses库函数介绍初始化和重置函数管理屏幕的函数输出到屏幕从屏幕读取清除屏幕移动光标字符属性管理键盘的函数键盘 ...
FANUC小黄机刀库小知识介绍
小黄机刀库小知识 FANUC小黄机刀库故障率特低,刀库结构设计的相当牛B:一般的数控加工中心刀库肯定离不了电机,减速机构,原点感应,计数感应,伺服或变频控制等等--相当的复杂.如果你没见过FANUC ...
【Python】turtle 库：基本介绍 || 绘制简单图形：圆形、正方形、正六边形、小风车、等边三角形、五角星、奥运五环、四叶花瓣、太阳花、五星红旗、正方形螺旋线
仅学习使用喔 ~ 文章目录一.什么是Python中的 turtle库 ?常见函数介绍 0.turtle 库介绍: 1.画笔控制函数: 2.运动控制函数: 3.方向控制函数: 二.常见图形绘制 1. ...
基于python计算生态的第三方库总结与介绍
摘要:Python语言有超过12万个第三方库,覆盖信息技术几乎所有领域.即使在每个方向,也会有大量的专业人员开发多个第三方库来给出具体设计.正是因为python有了这么多"隐形的翅膀&quo ...

46-jQuert库的基本介绍

46-jQuert库的基本介绍相关推荐

最新文章

热门文章