当前位置: 移动技术网 > IT编程>网页制作>CSS > HTML的jQuery自学笔记分享

HTML的jQuery自学笔记分享

2018年03月15日  | 移动技术网IT编程  | 我要评论

jQuery 安装

在jQuery官网上可以下载

有两种版本可供下载,根据个人喜好下载。

Production version - 用于实际的网站中,已被精简和压缩。

Development version - 用于测试和开发(未压缩,是可读的代码)

如果不喜欢下载并存放jQuery,那么可以从谷歌或者微软的服务器引用它,

[html] view plain copy

<head>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">  

</script>   //谷歌  

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">  

</script>   //微软  

</head>  

jQuery 库 

jQuery 是一个JavaScript函数库,它包含了以下特性:

HTML元素选取

HTML元素操作

CSS操作

HTML事件函数

JavaScript特效和动画

HTML DOM遍历和修改

AJAX

Utilities

从本质上来说,jQuery就是一个JavaScript库,它本身就是一个.js文件,其中包含了所有的jQuery函数

可以通过scr属性吧jQuery添加到网页中:

[html] view plain copy

<head>  

<script type="text/javascript" src="jquery.js"></script>  

</head>  

需要注意的是,src是你下载的jquery.js的路径,一般你下载下来以后后面会带版本号,你可以把版本号删掉,只保留jquery,输入也比较简单。而且,这个script标签一定要写在head中。其次,脚本并不是写在这一个标签里面,而是在下面重新写一对script标签,再在里面写,大概就是这个样子:

[html] view plain copy

<script type="text/javascript" src="jquery-3.3.1.js"></script>  

        <script type="text/javascript">  

            $(document).ready(function() {  

                $("button").click(function() {  

                    $("p").hide();  

                });  

            });  

        </script>  

jQuery 语法

$(selector).action()

jQuery选择器是CSS的选择器语法的组合

示例:

$(this).hide()        隐藏当前的HTML元素

$("#test").hide()   隐藏id="test"的元素

$("p").hide()         隐藏所有<p>元素

$(".test").hist()      隐藏所有class="test"的元素

文档就绪函数

所有的jQuery函数都位于一个document ready的函数中:

[html] view plain copy

$(document).ready(funtion(){  

    这里写jQuery函数  

});  

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

jQuery元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS选择器可用于改变HTML元素的CSS属性

如下面例子,吧p元素的背景改为红色:

[html] view plain copy

$("p").css("background-color","red");  

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网