JQery是对javascript的封转库
也就是调用JQuery的一句函数
JQuery的扩展插件非常多
JQuery的优点:尺寸小、使用简便、链式编程、隐式迭代(自动对于多个元素进行迭代方法调用)、屏蔽游览器差异跨浏览器兼容性好、插件丰富、开源、免费
vsdoc是vs2008sp1以后增加的一个技术,将js技术未见对应的vsdoc(相当于一个js库提供的数据库)放到js
一起,就会有这个第三方js的自动提示的功能
onload只能注册一次,后注册的取代前注册的,而
ready则可以多次注册都会被执行
$(document).ready(function (){alert("你好!")})
ready简写方式
$(function(){alert("你好")});
ready则是dom元素创建完毕被触发,这样可以提高网页的响应速度
早jquery中可以使用$(window).load那种事件调用的时机
$其实是一个函数
jquery提供的函数:
$.map(array,fn)对数组array中每一个元素调用fn函数逐个进行处理,fn函数将处理返回,最后得到一个新数组
例如:
var array = [3, 5, 8];
var array2 = $.map(array, function (item) {
return item * 2;
})
$.
$.map不能处理Dictionary风格的数组
$.each(array,fn)对数组array每个元素进行遍历,相当于dom中屈指的for循环
$.each(arr, function () {
alert(this);//表示当前遍历到的value,dictionary也一样
})
普通数组用以上表达式
****jquery对象、dom对象
jquery对象就是通过jquery包装dom对象后产生的对象
alert($(div1).html());//取到div1中innerHTML的值
jquery对象只能调用jquery对象封装的方法,不能调用dom对象的方法,dom对象也不能调用jquery对象的方法,所以alert($(div1).innerHTML)是错的,因为innerHtml是dom对象的属性
array是js语言本身的对象,不是dom对象,因此不需要转换为jquery对象才能用
将dom转换为dom对象,$(dom对象);当调用jquery没有封装的方法的时候必须用dom对象,转换方法:
var domobj=jqobj[0] 或者var domobj=iqobj.get(0)
jquery修改样式:$("#div1").css("background","red");
获得样式$("#div1").css("background");
$("#div1").val(new date())赋值//有参数就是赋值
$("#div1").val()取值
$("#div1").html("")赋值//相当于dom中的innerHTML
$("#div1").html()取值
$("#div1").text("")赋值//相当于dom中的innerText
$("#div1").text()取值
****jquery选择器
jquery选择器用于查找满足条件的元素,比如可以用
$("#控件id")来根据控件id获得控件的jquery对象
可以根据控件的类名称,比如$("div").click()
css选择器
<style type="text/css">
.test{background-color:red;}
</style>
$(".test").css("background", "blue");
多条件选择器:$("p,div,span.test"),同时选择p标签、div标签和拥有test样式的span标签的元素
注意选择器表达式中的空格不能多不能少
层次选择器
$("div li")获取div下的所有li元素(后代、子代、子的子)
$("div > li")获取div下的直接li子元素
$(".test + div")获取样式名为test之后的第一个div元素(不常用)
$(".test ~ div")获取样式名为test之后的所有div元素(不常用)
***jquery的迭代
就算写错id名称也不会报错
可以用以下方式判断:
if($("div1".length<=0))
{
alert("该控件没有找到!");
}
****节点遍历;
next()方法用于获取节点之后的挨着的第一个同辈元素
nextAll()方法用于获取节点之后的方法用于获取所有元素nextAll("div")可以过滤
siblings方法用于获取所有同辈元素
*****链式编程
jquery是javascript的一个库,所以基本都为方法,所以可以一直点下去,
******基本过滤选择器
:first选取第一个元素。$("div:first")选取第一个div
:last选取第一个元素。$("div:last")选取最后一个div
:not(选择器)选取不满足“选择器”条件的元素i
$("input:not(.test)")选取样式名不是test的<input>
:even、:odd 选取索引是奇数、偶然的元素:
$("input:even")选取索引是奇数的<input>
(多用于隔行变色)
:eq(索引序号)、:gt(索引序号)、:lt(索引序号)选取索引序号等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的input
***相对选择
只要在$()指定第二个参数,第二个参数为相对的元素。
$("ul", $(this).css("background", "red"));
*****更多的过滤器
$("div[id]")选取有id属性的<div>
$("dic[title=test]")选取title属性为"test"的<div>(进行属性的过滤) 比如:$("input[name=abc]") 找到input控件中name属性为abc的控件
$("dic[title!=test]")选取title属性不为"test"的<div>
还可以选择开头、结束、包含等、条件还可以复合
****表单选择器(过滤器)
$("#form1:enabled")选取id为form1的表单内所有启用的元素
$("#form1:disabled)选取id为form1的表单内所有禁用的元素
$("#form1:checked)选取id为form1的表单内所有选中的元素(Radio、checkBox)
$(":input")选取所有的<input>
<textarea>、<select>、<button>
$(":text")选取所有单行文本框
$(":password")选取所有密码框
$("#form1:selected")选取所有元素中的选项元素(下拉列表)
注意空格的问题
****元素的each
jQuery元素的也可以调用each方法,只是对$.each的简化调用
$("input[name=name]:checked").each()
****jquery的Dom操作
使用html、text方法,相当于Dom、对象中的innerHTML和innerText
使用attr()方法读取或者设置元素的属性,对于Jquery没有封装的属性用attr来操作
使用removeAttr删除属性。
*****动态创建Dom节点
使用$(html字符串)来创建Dom节点
然后调用append等方法将新创建的节点添加到Dom中;
append方法用来在元素的末尾追加元素
prepend方法用来在元素的前面添加元素
after在元素之后添加元素(添加兄弟)
before在元素之前添加元素(添加兄弟)
var link = $("<a href='http://www.baidu.com' >百度</a>");
$("div:first").append(link);
$()创建的就是一个Jquery对象,可以完全进行操作
能不要用动态生成就不要动态生成
*****删除节点
remove方法,删除选择的节点
$("ul li.testitem").remove();
删除有testItem样式的li
删除的元素还有,只是暂时移除,后面还可以
remove方法的返回值是被删除的节点对象
var lis=$("ul li.testitem").remove();
$("#ulsite2").append(lis);
empty()方法是将元素清空,不在可用,相当于销毁
val方法来获得jquery对象的值
parseInt(val,10)
再次重申,jquery只是一个javascript的一个库
不要问“在jquery中如何实现javascript中实现”
先查看一下有没有封装
不能实现的就用原来的javascript实现
appendTo方法将节点添加到控件Id对象中,比如;
$(this).css("background", "white").appendTo("#ul2");
replaceWith()方法将标签元素替换成新的元素标签
比如,将br替换成了hr
$("br").replaceWith("<hr />");
wrap()方法,用来将所有元素逐个用指定标签包裹
比如:
$("b").wrap("<font color='red'></font>");将所有粗体字红色显示
获取样式attr("class","myclass"),
追加样式addClass("myclass"),
移除样式removeClass("myclass"),
(都不影响其他样式)
切换样式toggleClass("myclass"){如果存在样式就替换,没有就追加}
判断是否存在样式:hasClass("myclass")
$("body *")新的选择器,选择页面中所有的控件对象
IEColoecting工具,可以让IE各种版本共存
****RadioButton操作
取得RadioButton的选中值
$("input[name=name]:checked").val()
radioButton设值
$(":radio[name=name]").val(["保密"]);
*****Jquery中的事件绑定:$("#btn").bind("click",function(){}),每次都这么调用太麻烦
所以jquery可以使用$("#btn").click(function(){})来进行简化
hover(enterfn,leavefn),当鼠标放在元素上时进行调用,离开时调用下一个函数
Jquery中的冒泡事件跟dom中是一样的,并且封装了禁止冒泡:$("tr").click(function(e){alert("tr");e.stopPropagation();})
如果想获得事件的信息,只要给匿名参数增加一个参数:e,e就是参数的对象e.stopPropagation();
e.praeventDefault()取消默认的行为,比如链接、表单、提交按钮之类的行为
****e的其他事件
pageX
pageY点击事件时的坐标
、target获得触发事件的元素(冒泡的起始,和this不一样)、which如果是鼠标事件获得的按键(1左键、2中键、3右键)
keycode(键盘码 小键盘的1和主键盘的1keyCode不一样)
charCode(asc码)
移除事件的绑定:bind()方法可以移除一切绑定的事件
unbind("click")则只移除click的绑定
one("click",function(){})
只触发一次
******动画
show()、hide()方法会显示和隐藏元素。用toggle()方法在显示、隐藏之间切换
可以给上面的方法带参数,单位为毫秒,也可以使用内置的速度:fast(200毫秒)、slow(600)、normal(400)\一般可以用这三个值
****动态添加难题
不能把定义的变量当成控件id来用
必须先把元素名加载到页面上才能控制它
*****Jquery插件:Jquery cookie
cookie就是保存在游览器上的内容,用户在这次游览页面的时候想cookie中保存文本内容,下次访问页面的时候就可以取出来上次保存的内容,这样就起到了记忆的作用!
cookie有几个属性,名字、值、域、限期
cookie是跟域名相关的
cookie不是写入以后一定下次能读出来,游览器可能会定期清除、用户也可能会手动清除
expires表示要求游览器保留cookie的期限
不设代表浏览器关闭之后就会被销毁
*****Jquery_UI插件的使用