主页 / 网络编程 /

JQuery学习总结【二】

网络编程 2021-07-04 19:19www.168986.cn编程入门
本文主要介绍了JQuery的基本知识，如JQuery的dom操作，动态创建dom节点，删除节点，document方法等等，文章篇尾处附上实例小练习。需要的朋友可以参考下

一JQuery知识点

:JQuery的dom操作

动态创建dom节点

比如动态创建表格等，在js里面进行完成。

删除节点

这里面的删除就是将其放在了一个地方，并不是真的删除，之后可以使用。

document方法

1:.val()可以获取到文本框里面的值，若括号里面有值则直接为赋值。

Eg:加法计算器

<!DOCTYPE html>
<html lang="en" xmlns="http://.w3./1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <script src="js/jquery-1.4.2.js"></script>
 <script type="text/javascript">
 $(function() {
 $("#buttons").click(function() {
 var tex1 = $("#tex1").val();
 var tex2 = $("#tex2").val();
 var tex3 = parseInt(tex1, 10) + parseInt(tex2,10);
 $("#tex3").val(tex3);
 });
 });
 </script>
</head>
<body>
 <input type="text" id="tex1"/><input type="button" value="+"/><input type="text" id="tex2"/>
 <input type="button" value="=" id="buttons"/><input type="text" id="tex3"/>
</body>
</html>

2:可以通过attr属性来进行隐藏。

3在jq里面通过狼蚁网站SEO优化的这种形式

(function());这是把一个(function());这是把一个()是让其在ready的时候执行，若是没有这个就是定义了一个方法。

Eg:阅读说明书

<!DOCTYPE html>
<html lang="en" xmlns="http://.w3./1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <script src="js/jquery-1.4.2.js"></script>
 <script type="text/javascript">
 var leftSeconds = 10;
 var intarvalId;
 $(function() {
 $("#buttons").attr("disabled", true);
 intarvalId = setInterval("CountDom()", 1000);
 });
 function CountDom() {
 if(leftSeconds<=0) {
 $("#buttons").val("同意");
 $("#buttons").attr("disabled", false);
 clearInterval(intarvalId);
 return;
 }
 leftSeconds--;
 $("#buttons").val("请仔细阅读" + leftSeconds + "秒");
 }
 </script>
</head>
<body>
 <textarea>在使用前请仔细阅读说明书。</textarea>
 <input type="button" id="buttons" value="同意"/>
</body>
</html>

Eg无刷新评论

Eg:文本颜色变化

代码

Eg:

代码

节点替换

:样式的操作

练习代码

选中的高亮显示，里面就是有如何在jq里面添加css样式。

<!DOCTYPE html>
<html lang="en" xmlns="http://.w3./1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery-1.4.2-vsdoc.js"></script>
 <script src="js/jquery-1.4.2.js"></script>
 <style type="text/css">
 #tables {
 margin: auto;
 }
 </style>
 <script type="text/javascript">
 //$(function() {
 // $("#tables tr:first").css("font-size", 30);
 // $("#tables tr:last").css("color", "red");
 // $("#tables tr:gt(0) :lt(6) ").css("font-size", 28);
 // $("#tables tr:gt(0):even").css("background","red");
 /
上一篇：jQuery中ajax错误调试分析 下一篇：Vue.js第二天学习笔记（vue-router）

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by