0
点赞
收藏
分享

微信扫一扫

2022年7月15日——jQuery入门案例

jQuery的官网:

​​https://jquery.com/​​

打开以上的链接,显示如下图所示的界面:

2022年7月15日——jQuery入门案例_html


点击上图中的download jQuery按钮,显示如下图所示的界面:

2022年7月15日——jQuery入门案例_入门案例_02


然后我们选择一个进行加载,比如我们选择下图所示的选项:

2022年7月15日——jQuery入门案例_jquery_03


点击之后,显示如下图所示的界面:

2022年7月15日——jQuery入门案例_选择器_04


然后,按下键盘上的:Ctrl+S(作用:保存),然后显示如下图所示的界面:

2022年7月15日——jQuery入门案例_html_05


点击保存,保存到一个位置即可。

jQuery的使用:

接着,我们开始使用jQuery,在这里我们可以参照着jQuery的API文档进行学习,

jQuery在线文档

地址1:​​https://www.jquery123.com/​​

地址1,打开后显示的界面如下图所示:

2022年7月15日——jQuery入门案例_html_06


地址2:​​https://jquery.cuishifeng.cn/​​

地址2打开后的界面如下图所示:

2022年7月15日——jQuery入门案例_html_07


。。。

然后,可以根据自己的爱好,进行选择

接着我们开始使用jQuery,的示例:

jQuery的实例:

首先创建一个HTML文件,如下图所示:

2022年7月15日——jQuery入门案例_选择器_08


然后,打开界面,显示如下图所示的信息:

原效果图:

2022年7月15日——jQuery入门案例_选择器_09


接着,我们,开始使用jQuery,首先我们确定我们下载的jQuery文件的位置,比如,我是放置在如下图所示的位置:

2022年7月15日——jQuery入门案例_jquery_10


接着,在html界面中引入js文件,如下图所示:

2022年7月15日——jQuery入门案例_jquery_11


接着,我们使用jQuery,测试jQuery是否能使用,首先我们查看jQueryAPI文档中的信息:

2022年7月15日——jQuery入门案例_html_12


我们,在这里使用选择器中的ID选择器的使用,点开:#id之后,我们可看到如下图所示的信息:

2022年7月15日——jQuery入门案例_jquery_13


接着,我们可看到文档中的信息为,先在HTML界面中定义ID属性,然后在script区域中使用,接着,我们在看CSS样式,我们将选择器和CSS样式接着使用,就可以看到效果了。

2022年7月15日——jQuery入门案例_选择器_14


然后点击,第一项(CSS(name|pro[,val|fn])),显示如下图所示的信息:

2022年7月15日——jQuery入门案例_选择器_15


然后我们开始使用如何定义,我们之前是在我们定义的HTML界面中引入了jQuery的文件,接着我们在HTML界面中定义了H3标签,接着,我们在界面中为H3标签,添加ID属性,并且起名,如下图所示:

2022年7月15日——jQuery入门案例_选择器_16


接着,我们使用,API文档中的ID选择器和CSS属性,定义之后,如下图所示

2022年7月15日——jQuery入门案例_入门案例_17


然后,我们,打开HTML界面即可发现,之前定义的字体颜色发生了改变,如下图所示:

使用jQuery之后的效果:

2022年7月15日——jQuery入门案例_入门案例_18


注意:我们需要注意的地方是,在css中定义的属性之类的,记得加上双引号,不然可能会发生效果不生效。





举报

相关推荐

0 条评论