JQuery学习总结【二】


Posted in Javascript onDecember 01, 2016

一:JQuery知识点

*:JQuery的dom操作

JQuery学习总结【二】

*:动态创建dom节点

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

JQuery学习总结【二】

*删除节点

JQuery学习总结【二】

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

*:document方法

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

Eg:加法计算器

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/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>

JQuery学习总结【二】

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

3:在jq里面通过下面的这种形式

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

Eg:阅读说明书

JQuery学习总结【二】

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/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:无刷新评论

JQuery学习总结【二】

JQuery学习总结【二】

Eg::文本颜色变化

JQuery学习总结【二】

代码:

JQuery学习总结【二】

JQuery学习总结【二】

Eg:

JQuery学习总结【二】

代码:

JQuery学习总结【二】

JQuery学习总结【二】

*:节点替换

JQuery学习总结【二】

*:样式的操作

JQuery学习总结【二】

*:练习代码

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

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/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");
 //});
 $(function() {
 $("#tables tr").click(function() {
 $("td", $(this).css("background","red"));
 });
 });
 </script>
</head>
<body>
 <table id="tables">
 <tr><td>姓名</td><td>年龄</td></tr>
 <tr><td>小张</td><td>2</td></tr>
 <tr><td>小红</td><td>43</td></tr>
 <tr><td>小路</td><td>23</td></tr>
 <tr><td>小李</td><td>23</td></tr>
 </table>
</body>
</html>

*取的RadioButton操作

JQuery学习总结【二】

*:实例 [全选和反选]

01:这里主要的就是将以前学习到的知识,得以回顾,这样子好记忆。

JQuery学习总结【二】

<html lang="en" xmlns="http://www.w3.org/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() {
 $("#setAll").click(function() {
 $("#List :checkbox").attr("checked",true); //这是div下面的button
 });
 $("#notsetAll").click(function() {
 $("#List :checkbox").attr("checked",false);
 });
 $("#reverse").click(function() {
 $("#List :checkbox").each(function() {
  $(this).attr("checked",!$(this).attr("checked"));
 });
 });
 });
 </script>
</head>
<body>
 <div id="List">
 <input type="checkbox"/>篮球1<br/>
 <input type="checkbox"/>足球2<br/>
 <input type="checkbox"/>篮球3<br/>
 <input type="checkbox"/>篮球4<br/>
 <input type="checkbox"/>篮球5<br/>
 </div>
 <input type="button" value="全选" id="setAll"/>
 <input type="button" value="全不选" id="notsetAll"/>
 <input type="button" value="反选" id="reverse"/>
</body>
</html>

*:事件

   *:jquery里面的click事件就是封装的bind函数,代表点击事件,

   *:hover函数,这里就是监听鼠标的事件。

JQuery学习总结【二】

*:超链接的禁用

<script type="text/javascript">
 $(function() {
 $("a").click(function (e) {
 alert("今天Link不行了");
 e.preventDefault(0); //表示禁用了链接
 });
 });
 </script>
<a href="Hover.html">Link</a>

*:Cookic

定义:它是保存在浏览器上的内容,用户在这次浏览页面向Cookic中保存文本内容,下次在访问的时候就可以取出上次保存的内容,这样子就得到了上次“记忆”内容。Cookic就是存储在浏览器里面的数据。<可以禁用>

特征:

  1:它和域名相关的

《baidu.com的Cookic和taobao.com的Cookic是不一样的。》

  2: 域名写入Cookic的总尺寸是有限制的。几千字节

  3:Cookic不一定可以读取出来,用户可以清除掉了。同时可以被禁用。

以上就是本文的全部内容,希望对大家有所帮助,有兴趣的可以看下上篇JQuery学习总结【一】。同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
原生js实现碰撞检测
Mar 12 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 #Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 #Javascript
Vue方法与事件处理器详解
Dec 01 #Javascript
简单理解vue中实例属性vm.$els
Dec 01 #Javascript
jsp 自动编译机制详细介绍
Dec 01 #Javascript
基于vue.js实现图片轮播效果
Dec 01 #Javascript
JQuery学习总结【一】
Dec 01 #Javascript
You might like
PHP高自定义性安全验证码代码
2011/11/27 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php数组随机排序实现方法
2015/06/13 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
Python3基础之函数用法
2014/08/13 Python
Python实现提取文章摘要的方法
2015/04/21 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
深入了解python中元类的相关知识
2019/08/29 Python
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
理工大学毕业生自荐信范文
2014/02/22 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
考研导师推荐信范文
2015/03/27 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS