jquery练习笔记
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#pannel {
position:relative;
width:100px;
height:100px;
border:1px solid #0050d0;
background:#96e555;
cursor:pointer;
}
</style>
<script type="text/javascript" src="../Packages/jQuery.1.8.3/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//选择器总结
//jquery中选择器编写均可以以元素名为开头 后跟id,class或则属性选择器来组成。
//$("input[name$='3']") input为元素名,[]中包含属性name,name的值以3结尾
//$("input#none5") 不能有空格
//$("input.cls1") 不能有空格
//$("input:first")
//$("input[class][name^='none']") 复合选择器，返回含有class属性且name属性的值以none值开头
//$("input.cls1[name^='none']") 返回class为.cls1且name属性的值以none值开头
//form所有后代input元素
var Init1 = function () {
$("form input").each(function () {
alert($(this).attr("name"));
})
};
//form所有input子元素
var Init2 = function () {
$("form > input").each(function () {
alert($(this).attr("name"));
})
};
//紧接form后的所有input同辈元素
var Init3 = function () {
$("form ~ input").each(function () {
alert($(this).attr("name"));
}) //$("input[name='none2'] ~ input").each(function () {
// alert($(this).attr("name"));
//})
};
//紧接form的第一个input同辈元素
var Init4 = function () {
$("form + input").each(function () {
alert($(this).attr("name"));
})
};
//返回属性name包含none的所有input元素
var Init5 = function () {
$("input[name*='none']").each(function () {
alert($(this).attr("name"));
})
}
//返回class为cls1的所有input元素
var Init6 = function () {
//alert($("input.cls1").attr("name"));
$("input.cls1").each(function () {
alert($(this).attr("name"));
})
}
//返回id为none5的所有input元素
var Init7 = function () {
//alert($("input.cls1").attr("name"));
$("input#none5").each(function () {
alert($(this).attr("name"));
})
}
//返回第一个input元素
var Init8 = function () {
$("input:first").each(function () {
alert($(this).attr("name"));
})
} //返回第一个input元素
var Init9 = function () {
//$("input[class][name^='none']").each(function () {
// alert($(this).attr("name"));
//})
$("input.cls1[name^='none']").each(function () {
alert($(this).attr("name"));
})
}
//$(Init9); var GetDom = function (id) {
//alert($("#none7").val());
var $id = $("#" + id);
alert($id);
alert($id.get(0));
alert($id.val());
}
//此处如果直接调用GetDom("none7")，$id.val()值为undefined
//因为$()时，dom元素只是绘制完成，但未加载完成
//$(GetDom("none7")); //jquery对象与dom对象间的转换
//jquery转dom var $none7=$("#none7");var none7=$none7[0];或 var none7=$none7.get(0);
//dom转jquery var none7=document.getElementById("none7"); var $none7=$(none7); //与$(GetDom("none7"));对应，
//将方法调用加载到按钮点击事件上，点击可成功获取数据
$(function () {
$("#Button1").bind("click", function () {
GetDom("none7");
});
}) $(function () {
var $cr = $("#cr");
$cr.click(function () {
if ($cr.is(":checked"))
{
alert("恭喜！请继续下一步操作");
}
else
{
alert("请阅读规章制度！");
}
})
}) //让渡变量$的控制权
//jQuery.noConflict();
//(function ($) {
// $(function () {
// //$("#Button2").click(function () {
// // alert("让渡测试");
// //})
// alert("让渡测试");
// });
//})(jQuery); //判断一个元素是否存在
//两种方式
if ($("#none7").length > 0)
{ }
if ($("#none7")[0])
{ } //基本选择器 #id \ .class \ element \ * \ selector1,selector2...
//层次选择器 $(ancestor descendant) ancestor所有后代descendant元素
//$("parent>child")
//$("prev+next") 等同于方法$("prev").next("next") 获取后一个元素
//$("prev~siblings") 等同于$("prev").nextAll("siblings") 获取prev后所有兄弟元素
//$("doc").siblings()方法是获取所有同辈元素，跟位置无关
//过滤选择器 //子元素过滤选择器nth-child(index/odd/even/equation),其中index是从1开始的。
//eq(index),index是从0开始的 //$(html) 根据传入的html标记字符串，创建一个dom对象，并将dom对象包装为jquery对象返回。
//含创建元素、文本、属性节点
//var $li1=$("<li>香蕉</li>");$("ul").append($li1); //插入节点
//append() 向每个匹配的元素内追加内容
//prepend() 向每个匹配的元素内前置内容
//appendTo() 将所有匹配的元素追加到指定的元素内
//prependTo() //after() 每个匹配的元素后插入内容。 <p>我爱你</p> $('p').after('<b>你好！</b>') 结果是 <p>我爱你</p><b>你好！</b>
//insertAfter() 将所有匹配的元素插入到指定元素后面。 <p>我爱你</p> $('<b>你好！</b>').insertAfter('p') 结果是 <p>我爱你</p><b>你好！</b>
//before()
//insertBefore() //删除节点
//remove() 将匹配的元素及其子元素一起删除，返回的是已被删除的节点引用，删除后可再次使用
//empty() 清空元素中所有后代节点，可用于清空内容 //替换节点
//replaceWith() 将所有匹配的元素替换成指定的dom或html
//replaceAll() 用指定dom或html替换后面括号里的元素，与replaceWith相反
$(function () {
//$('p').replaceWith("<strong title='你喜欢的水果'>你喜欢的水果是?</strong>");//将$('p')替换为后面的内容
$("<strong title='你喜欢的水果'>你喜欢的水果是?</strong>").replaceAll('p');//用前面的内容替换$('p')
}) //克隆
$(function () {
$("ul li").click(function () {
//$(this).clone().appendTo($('ul'));
$(this).clone().appendTo('ul');//克隆点击li并追加到ul内尾
$(this).clone(true).appendTo('ul');//clone(true)复制元素的同时也复制元素所绑定事件
})
}) //包裹节点
$(function () {
//$("strong").wrap("<b></b>");//将每个stong用<b>包裹
//$("strong").wrapAll("<b></b>");//将strong组合并用<b>包裹,中间的元素依次提取靠后
$("strong").wrapInner("<b></b>");//将strong子元素或内容用<b>包裹
}) //addClass()
//removeClass() //toggle()
//toggleClass()
//hasClass() //css() 有单位
//元素的高度获取
//css("height")获取的高度与样式设置有关，有可能为‘anto’。获取的高度包含px $('p').css("color",red); $('p').css("fontSize","10px")采用骆驼写法，尽量用引号
//height()方法获取的是元素实际高度，与样式设置无关。不含px单位 //$('p').is(':visible') p元素是否显示
//jquery自定义方法ready(),hover(),toggle()
//hover(enter,leave)模拟光标悬停事件,光标移到元素上触发enter，移除触发leave
//hover(enter,leave)是用于替换bind("mouseenter")和bind("mouseleave"),不是用于替换bind("mouseover")和bind("mouseout")
//toggle(fn1,fn2,...,fnN)模拟鼠标连续点击事件
//toggle()还能切换元素的可见状态。$(this).toggle(); ////x = 0;
////y = 0;
////$(document).ready(function () {
//// $("div.over").hover(
//// function () { $(".over span").text(x += 1); },
//// function () {$(".enter span").text(y += 1);}
//// )
////}); //获取事件对象
//$(p).bind("click",function(event){});//event就是事件对象
//event只有处理函数可以访问，当事件处理函数执行完后，就会被销毁 //事件冒泡
//停止事件冒泡 event.stopPropagation()
//$(p).bind("click",function(event){//函数内容;event.stopPropagation();}); //阻止元素的默认行为 event.preventDefault()
//例如超链接有默认跳转事件，提交按钮会提交表单等
//验证表单内容可用到
//$(function () {
// $("#sub").bind("click", function (event) {
// var username = $("#username").val();
// if (username == "")
// {
// //处理说明
// //...
// event.preventDefault();//阻止表单提交
// }
// })
//})
//如果同时想对事件对象停止冒泡和阻止默认行为可适用 return false; //jquery不支持事件捕获，事件捕获是从上到下 //事件对象属性
//event.type() 获取事件类型
//event.stopPropagation() 停止冒泡
//event.preventDefault() 阻止默认行为
//event.target() 获取触发事件元素 event.target.href 连接地址
//event.relatedTarget() 获取相关元素
//event.pageX()//event.pageY() 获取光标相对页面的x和y坐标
//event.which() 鼠标单机事件中获取左中右键,在键盘中获取键盘的按键
//event.metaKey() 键盘事件中获取ctrl按键
//event.originalEvent() 指向原始的事件对象 //移除事件
//可以为同一元素绑定多个事件，也可以为多个元素绑定同一个事件 bind()
//unbind([type],[,data]) 移除事件绑定
//$('p').unbind(); //移除所有绑定
//$('p').unbind("click");//移除click事件
//$('p').unbind("click",fun1);//移除click的事件方法fun1 //one() 使用方式和bind()一致
//用于只绑定一次的事件，当处理函数被执行一次后将移除 //模拟操作
//$('p').trigger("click");模拟点击事件 简化写法$('p').click();
//trigger()不仅可以触发浏览器支持的事件，也能触发自定义事件
//trigger(type,[,data]) 第二个用于传递参数
//bind()可以绑定自定义事件
//$(function () {
// $("#sub").bind("Myclick", function (event, msg1, msg2) {
// alert(msg1 + msg2);
// })
// $("#sub").trigger("Myclick", ["我的自定义", "事件"]);
//}) //trigger()会触发浏览器的默认操作，如果只触发事件 不触发默认操作可用triggerHandler()
//triggerHandler("focus") 只触发focus中的事件方法，不会获得焦点 //jquery中的动画
//$("elment").hide(); 等价于 $("elment").css("display","none");
//jquery的动画效果应放在标准模式下，不然可能会引起动画抖动 //hide()和show() 同时改变元素的高宽度和透明度 //fadeIn()和fadeOut()改变元素的透明度，淡入淡出
//fadeIn()
//fadeOut() 在一定时间内 降低元素的透明度，直至消失 //slideUp()与slideDown()改变的是元素的高度
//slideUp() 元素由下至上缩短隐藏
//slideDown() 元素由上至下延伸显示 //自定义动画animate(params,speed,callback)
$(function () {
$(this).css("opacity", 0.5);//设置不透明度
$("#pannel").bind("click", function () {
//$(this).animate({ left: "500px" }, 3000);//向右移动500px
//$(this).animate({ left: "+=500px" }, 3000);//+=表示在当前位置累加
//$(this).animate({ left: "500px",height:"200px" }, 3000);//+=表示在当前位置累加
//动画先后顺序，写成多个animate即可
//$(this).animate({ left: "500px", height: "200px", opacity: 1 }, 3000)//向右逸动500的同时高度逐渐变为200 并设置不透明度为100%
// .animate({ top: "200px", width: "200px" }, 3000)
// .fadeOut("slow"); //执行一系列动作后，改变css样式，写字最后一个动画的回调方法中.
//这样就将css加入到了动画的队列中
$(this).animate({ left: "500px", height: "200px", opacity: 1 }, 3000)//向右逸动500的同时高度逐渐变为200 并设置不透明度为100%
.animate({ top: "200px", width: "200px" }, 3000, function () {
$(this).css("border", "5px solid blue");
});
})
//stop([clealQuene][,gotoEnd])
//clealQuene设为true，把当前元素尚未执行完的动画序列清空
//gotoEnd设为true，让正在执行的动画直接到达结束时的状态
$("#pannel").hover(function () {
$(this).stop()//停止当前动画，进入下一个动画序列
.animate({ left: "500px", height: "200px", opacity: 1 }, 3000);
},
function () {
$(this).stop(true)
.animate({ top: "200px", width: "200px" }, 3000);
}
)
//判断元素是否处于动画状态
//$("#pannel").is(":animated") //其他动画方法
//toggle()切换元素的可见状态
//slideToggle()通过高度切换元素的可见性
//fadeTo() 设置匹配元素的不透明度，高宽度不会发生变化 //Javascript Math ceil()、floor()、round()三个函数的区别
//Math.ceil(12.2) 向上取整
//Math.floor(12.2) 向下取整
//Math.round(12.2) 四舍五入 //scrollTop:"50px" 控制滚动条 //表单验证
//表单中必填元素的验证，采用blur(function(){}).光标移除时触发
//要做到即时验证，可为表单元素绑定keyup()和focus()事件
$("form :input").blur(function () {
//失去焦点 验证处理
//多条件分支判断
}).keyup(function () {//键盘松开时触发
$(this).triggerHandler("blur");
}).focus(function () {//获取焦点时触发
$(this).triggerHandler("blur");//triggerHandler()只触发元素事件，不触发元素默认事件方法
})
}) //filter() 筛选出与指定表达式匹配的元素集合
//$('p').filter('.selected');//筛选出含有selected样式的p元素 //has() 保留包含特定后代的元素
//<ul>
// <li>list item 1</li>
// <li>list item 2
// <ul>
// <li>list item 2-a</li>
// <li>list item 2-b</li>
// </ul>
// </li>
// <li>list item 3</li>
// <li>list item 4</li>
//</ul>
//jQuery 代码: $('li').has('ul').css('background-color', 'red');//将包含ul的li背景色改为红色 //hasClass() 检查当前元素是否含有特定的类 //$(this)["removeClass"]("selected") 等价于 $(this).removeClass("selected") //var thisEle=$(""#paras).css("font-size");//获取id为paras的字体大小
//var textFontSize=parseFloat(thisEle,10);//去掉字体的单位
//var unit=thisEle.slice(-2)//获取字体的单位 //index() 搜索匹配元素，并返回相应元素的索引值，从0开始 //jquery的cookie插件运用 //jquery的ajax. load(url [,data] [,callback])
//$("#divT").load("test.html")
//$("#divT").load("test.html .para")//加载test页面中样式为para的元素至divT中。para为URL参数
//load()中 若无data参数采用get方式传输，若有data参数采用post方式传输
//load() 回调函数callback 请求完成后，无论是否成功都会被调用
//load() 回调函数callback有三个参数
//$("#divT").load("test.html", function (responseText,textStatus,XMLHttpRequest) {
// //responseText 请求返回的内容
// //textStatus 请求状态：success,erro,notmodified,timeout4种
// //XMLHttpRequest XMLHttpRequest对象
//}) //$.get(url [,data] [,callback] [,type])
//callback在请求成功后才会触发与load()不一样
//type 请求返回内容的格式 //$(selector).serialize()
//
//serialize() 通过序列化表单值，创建 URL 编码文本字符串。包含自动编码
//serializeArray() 将dom元素序列化后，返回json格式
//表单元素必须使用name属性，才会被序列化到字符串中
//$.param() 用于对一个数组或对象按key/value进行序列化
//var obj = { a: 1, b: 2, c: 3 };
//var objstr = $.param(obj);
//alert(objstr);//a=1&b=2&c=3 //ajax全局事件方法。只要ajax请求发生，就会触发
//ajaxStart(callback) ajax请求开始时触发
//ajaxStop(callback) ajax请求结束时触发
//ajaxComplete(callback) 完成时
//ajaxError(callback) 发生错误时执行的函数，捕捉的错误最后一个参数传递
//ajaxSend(callback) 请求发送前执行
//ajaxSuccess(callback) 请求成功时触发 //ajaxStart(callback)示例 loading为div 内容为加载中...
//$("#loading").ajaxStart(function () {
// $(this).show();
//});
//$("#loading").ajaxStop(function () {
// $(this).hide();
//})
//使某个ajax请求不受全局方法影响。可将global设置为false
//$.ajax({
// url: "test.html",
// global:false //不触发全局事件
//}) //html lable的for属性规定与那个表单元素绑定.
//for="element_id" element_id为label 要绑定的元素的 id。
//当点击lable（male或female），绑定的单选按钮被选中
//<form>
// <label for="male">Male</label>
// <input type="radio" name="sex" id="male" />
// <br />
// <label for="female">Female</label>
// <input type="radio" name="sex" id="female" />
//</form> //可以运用验证插件，cookie插件 //jQuery.extend() 可以用传入的参数覆盖默认值
//jquery的插件this是指jquery对象
//封装jquery对象方法的插件
; (function ($) {
$.fn.extend({
"color": function (value) { },
"border": function (value) { },
"backgroud": function (value) { }
})
})(jQuery) //封装全局函数插件
; (function ($) {
$.extend({
ltrim: function (text) {
return (text || "").replace(/^\s+/g, "");
//(text||"")用于防止传入尽量的text这个字符串变量处于未定义状态
//如果text为undefined,则返回"" 否则返回text
},
rtrim: function (text) {
return (text || "").replace(/\s+$/g, "");
}
});
})(jQuery);
$("#trimTest").val(
jQuery.trim(" text ") + "\n" +
jQuery.ltrim(" text ") + "\n" +
jQuery.rtrim(" text ")//自定义全局函数插件的使用
);
</script>
</head>
<body>
<input name="none2" />
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input class="cls1" name="none" />
<input class="cls1" name="none5" />
<input id="none6" class="cls1" name="none6" />
<input name="none3" />
<input id="none7" type="text" value="none7" name="none7"/>
<input id="Button1" type="button" value="button" /><br />
<input type="checkbox" id="cr" /><label for="cr" >我已阅读制度</label>
<input id="Button2" type="button" value="button" /><br />
<ul>
<li>菠萝</li>
<li>雪梨</li>
<li>苹果</li>
<li>香蕉</li>
</ul>
<p title="你喜欢的水果"><strong>你喜欢的水果是?</strong></p>
<input name="none8" value="dddd" />
<strong title='你喜欢的水果'>你喜欢的水果是?</strong>
<div>分隔</div>
<strong title='你喜欢的水果'>你喜欢的水果是?</strong> <div id="pannel"></div>
</body>
</html>
jquery练习笔记的更多相关文章
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery整理笔记文件夹
jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- jQuery 学习笔记：jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery:自学笔记(5)——Ajax
jQuery:自学笔记(5)——Ajax 使用Ajax快捷函数 说明 出于简化AJAX开发工作的流程,jQuery提供了若干了快捷函数. 实例 1.显示 test.php 返回值(HTML 或 XML ...
- jQuery:自学笔记(4)——事件与事件对象
jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...
随机推荐
- IE8中jQuery.load()加载页面不显示的原因
一.jQuery.load() jQuery.load(url,[data],[callback])通过Ajax异步请求加载服务器中的数据,并把数据放到指定元素中. url :请求服务器的地址 dat ...
- 第三十四天- 线程队列、线程池(map/submit/shutdown/回调函数)
1.线程列队 queue队列 :使用import queue,用法与进程Queue一样 class queue.Queue(maxsize=0) # 先进先出: q = queue.Queue(3) ...
- 【代码笔记】iOS-产生随机字符串
一,代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...
- mysql数据库操作指令
数据库相关 查询所有数据库 show databases; 创建数据库 create database 数据库名: 创建数据库指定字符集 create database 数据库名 character ...
- Win10家庭版、专业版、企业版、教育版各版本功能区别对照表
关于Win10系统的版本问题,MS酋长之前曾经分享过Windows10有哪些版本,在这篇文章中简单地介绍了一下Win10各版本的功能区别及适宜用户群,但是并没有对各版本的功能区别做一详细的对比.日前微 ...
- Problem1-Project Euler
Problem1-Project Euler Multiples of 3 and 5 If we list all the natural numbers below 10 that are m ...
- 关于Apache连接数限制的设置
昨天晚上收到监视团队的电话,说web服务器连不上.(作为DBA,这貌似超出了我的工作范畴啊...) 于是马上VPN连上服务器,发现网络负载均衡下的两台Apache服务器都没有响应,而服务器OS层面上正 ...
- javascript 正则(将数字转化为三位分隔的样式)【转】
原文:https://www.cnblogs.com/sivkun/p/7123963.html })+\b)/g, ',') 解释: \b : 匹配单词边界,就是位于字符\w([a-zA-Z0-9_ ...
- SqlServer中sqlmaint 实用工具和xp_sqlmaint扩展过程
sqlmaint 实用工具可以对一个或多个数据库执行一组指定的维护操作.使用 sqlmaint,可以运行 DBCC 检查.备份数据库及其事务日志.更新统计以及重建索引.所有数据库维护活动都会生成报表, ...
- spark的shuffle和原理分析
概述 Shuffle就是对数据进行重组,由于分布式计算的特性和要求,在实现细节上更加繁琐和复杂. 在MapReduce框架,Shuffle是连接Map和Reduce之间的桥梁,Map阶段 ...