JQuery入门简介

最新推荐文章于 2024-11-13 17:45:44 发布

xiaoxie_advent

最新推荐文章于 2024-11-13 17:45:44 发布

阅读量605

点赞数

分类专栏： JQuery 文章标签： jQuery JavaScript 学习

本文链接：https://blog.csdn.net/advent_java/article/details/9676859

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery开发入门

JQuery认识：

JQuery是美国人John Resig于2006年创建的一个开源项目，到如今是JavaScript,CSS,DOM,Ajax于一体的强大框架体系。

JQuery基本功能：

1，访问和操作DOM元素：

使用JQuery可以方便地获取和修改页面中的某个元素。

2，控制页面的样式：

通过JQuery程序开发人员可以便捷的控制页面CSS文件，而且JQuery可以很好的兼容各种浏览器。

3，对页面事件的处理：

引用JQuery后页面的表现层与功能开发分离，开发者可以更多地专注于程序的逻辑和功效，页面的设计者则侧重于页面的优化与用户体验，然后，通过事件绑定机制可以很轻松地实现二者的结合。

4，大量插件在页面中的运用：

引入JQuery后可以在页面中使用大量的插件来完善页面的功能和效果（表单插件、UI插件）

5，与Ajax的完美结合，Ajax可以很好的提高用户的体验，而使用JQuery可以很方便的书写出复杂功能的代码。

搭建JQuery开发环境：

可以下载相应的JQuery文件库然后在自己的页面中把下载的js引用到自己的页面当中就可以了不需要进行任何的安装在<head></head>中可以加上如下的代码完成引入：

<head>

src="../Jscript/jquery-1.4.1.min.js"></script>

</head>

简单的JQuery程序：

实现功能：在页面加载时，弹出一个对话框，显示“Hello,JQuery!”这样的字样，点击“确定”按钮来关闭这个窗口。

<html>

<head>

<title>简单JQuery程序</title>

src="../Jscript/jquery-1.4.1.min.js"></script>

$(document).ready(function(){

alert("Hello,JQuery!");

})

</script>

</head>

<body>

</body>

</html>

上面的代码

$(document).ready(function(){

//程序段

})

与JavaScript当中的代码如下是一样的效果：

window.onload = function(){

//程序段

}

这两段代码的区别：

l 执行时间不同：$(doucumet).reday在页面框架下载完毕后就马上执行了，而window.onload必须在页面全部都加载完成（包括图片都下载完成）后才会执行，很明显这样的话前者的效率会更好一些。

l 执行的数量上有区别：$(document).ready可以重得复写上多个，并且每次执行的结果不同，而window.onload尽管也可以执行多个，但只输出最后一个执行结果

$(document).reday(function(){})可以简写为$(function(){})

JQuery程序的代码风格：

“$”符号的使用：这个符号会是使用最多的，无论是页面元素的选择、功能函数的前缀都必须使用这个符号

事件打操作可以进行链式的书写，JQuery程序可以使用链接式的方式编写这个元素的的所有事件

示例（链式书写）：

功能：在一个页面当中有一个<div>在这个<div>当中又包含了两个<div>一个是标题<div>一个是内容<div>,当页面首次加载的时候只是显示标题<div>中的内容，只有当用户点击了这个标题后才会显示内容<div>，并且这个时候会把标题<div>中的颜色改变

<html>

<head>

<title>JQuery链式书写法</title>

src="../Jscript/jquery-1.4.1.min.js"></script>

.divFrame{width:260px;border:solid 1px #666;font-size:10pt}

.divTitle{background-color:#eee;padding:5px;}

.divContent{padding:5px;display:none}

.divCurrColor{background-color:Red}

</style>

$(function(){

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

$(this).addClass("divCurrColor").next(".divContent").css("display","block");

});

</script>

</head>

<body>

</div>

</body>

</html>

上面的代码表示当用户单击了名为“divTitle”的元素时，自己就会增加名为divCurrColor的样式同时接下来divContent元素显示出来，这两个功能的实现使用”.”链接在一起

JQuery的简单应用：

Dom对象：文本对象模型，每一个页面都是一个Dom对象，通过JavaScript方法访问页面中的元素就是访问Dom对象

JQuery对象：通过JQuery库通过本身自带的方法获取页面元素的对象称之为JQuery对象比如

var tDiv = $(“#divTmp”);这是获得了id为divTmp元素的Jquery对象

控制DOM对象：

功能要求：用户输入了姓名、性别、婚姻状况后点击“提交”会获得相应的数据并显示到div标记中

<html>

<head>

<title>通过JavaScript控制Dom对象</title>

.divFrame{width:260px;border:solid 1px #666;font-size:10pt}

.divTitle{background-color:#eee;padding:5px}

.divTip{width:244px;border:solid 1px #666;padding:8px;font-size:9pt;margin-top:5px;display:none}

.textCss{border:solid 1px #ccc}

.divBtn{padding-top:5px}

.divBtn.btnCss{border:solid 1px #535353;width:60px}

</style>

function btnClick(){

//获得文本框中的值

var oTxtValue=document.getElementById("Text1").value;

//获得单选框按钮值

var oRdoValue = (Radio1.checked)?"男":(Radio2.checked)?"女":"未知";

//获得复选框的值

var oChkValue = (CheckBox1.checked)?"已婚":"未婚";

document.getElementById("divTip").style.display="block";

//设置文本元素的内容

document.getElementById("divTip").innerHTML = oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue;

}

</script>

</head>

<body>

<div class="divTitle">请输入如下信息</div>

姓名：<input id="text1" type = "text" class="txtCss"/><br/>

性别：<input id = "Radio1" name="rdoSex" type="radio" value="男"/>男

婚否：<input id="CheckBox1" type="checkbox"/>

</div>

</body>

</html>

上面的是使用传统的JavaScript来实现的，其中有代码

var oRdoValue = (Radio1.checked)?"男":(Radio2.checked)?"女":"未知";

//获得复选框的值

var oChkValue = (CheckBox1.checked)?"已婚":"未婚";

这里checked判断是否选中，选中这里就会返回true,没有选中则为false

<html>

<head>

<title>通过JavaScript控制Dom对象</title>

.divFrame{width:260px;border:solid 1px #666;font-size:10pt}

.divTitle{background-color:#eee;padding:5px}

.divTip{width:244px;border:solid 1px #666;padding:8px;font-size:9pt;margin-top:5px;display:none}

.textCss{border:solid 1px #ccc}

.divBtn{padding-top:5px}

.divBtn.btnCss{border:solid 1px #535353;width:60px}

</style>

src="../Jscript/jquery-1.4.1.min.js"></script>

$(function(){

$("#Button1").click(function(){

alert("OK");

//获得文本框的值

var textValue = $("#text1").val();

//获得单选框的选择

var radioValue = $("#Radio1").is(":checked")?"男":$("#Radio2").is(":checked")?"女":"未知";

//获得复选框的值

var checkValue= $("#CheckBox1").is(":checked")?"已婚":"未婚";

//显示提示文本框中的内容

$("#divTip").css("display","block").html(textValue+"<br>"+radioValue+"<br>"+checkValue);

})

</script>

</head>

<body>

<div class="divTitle">请输入如下信息</div>

姓名：<input id="text1" type = "text" class="txtCss"/><br/>

性别：<input id = "Radio1" name="rdoSex" type="radio" value="男"/>男

婚否：<input id="CheckBox1" type="checkbox"/>

</div>

</body>

</html>

这个上面是引入了JQuery之后的代码，这里没有在元素中加上 onClick="btnClick();”而是直接的在<script></script>当中加入了$(function(){

$("#Button1").click(function(){

//对ID是Button1的元素直接绑定了click事件

})

还有在JQuery中取得相应的值是如下：

var textValue = $("#text1").val();

//获得单选框的选择

var radioValue = $("#Radio1").is(":checked")?"男":$("#Radio2").is(":checked")?"女":"未知";

//获得复选框的值

var checkValue= $("#CheckBox1").is(":checked")?"已婚":"未婚";

通过$(“#id”)找到相应的元素再.val()就是直接的值，.is(“:checked”)就是是否选择，.css(“属性名”,”属性值”)为指定的元素加上属性，.html()为相应的元素加上html内容

JQuery控制CSS:

功能：有一个div元素在点击后会改变它的样式再次点击后又回到原来的样式

<html>

<head>

<title>JQuery控制CSS</title>

src="../Jscript/jquery-1.4.1.min.js"></script>

.divDefault{width:260px;font-size:10pt;padding:5px}

.divClick{width:260px;border:solid 1px #666; font-size:10px;background-color:#eee;padding:5px}

</style>

$(function(){

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

$(this).toggleClass("divClick").html("点击后");

})

</script>

</head>

<body>

</body>

</html>

这里使用了$(this).toggleClass("divClick")

xiaoxie_advent

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录