Jquery基础整理

时间:2023-12-21 16:45:32

1.简单的JQuery

(1)  $(document).ready(function(){

$(document).ready(mydays);

alert(“加载完毕,请检查!”);

function mydays(){

alert(“加载完毕,请检查!”)   };

});

//注册事件的函数,和普通的Dom不一样,不需要再元素上面标记onload这样的事件。

(2)当页面Dom元素加载完毕时执行代码,可以简写为:$(function(){ alert(“加载完成”) });

(3)和onload类似,但是onload只能注册一次(window.onload=function….)(没有C#中的“+=“机制),后注册的取代先注册的,而ready可以多次注册都会被执行。

(4)JQuery的ready和Dom的onload的区别:

onload是所有Dom元素创建完毕,图片,CSS等加载完毕后才能被触发。ready则是Dom元素创建完毕后就被触发,这样可以提高网页的响应速度。

  1. JQuery提供的函数

(1) $.map(array,fn) 对数组array中每个元素调用fn函数将逐个进行处理,fn函数将处理返回,最后得到一个新数组。

例如:得到一个数组值是原数组值二倍的新数组

var arr[3,4,7,8];

var arr2=$.map(arr,function(item){  return item*2  });

$.map不能处理Dictionary风格的数组。

(2) $.each(array,fn) 对数组array中每个元素调用fn函数进行处理,没有返回值。

var arr={“tom”:10,”jerry”:20,”lily”:30};

$.each(arr,function(key,value){alert(key+”=”+value);});

如果是普通风格的数组,则key的值是序列号。

(3) 还可以省略function参数,这时候用this可以得到遍历的当前元素。

var arr=[3,6,7];

$.each(arr,function(){ alert(this);   });

  1. JQuery对象,Dom对象

(1) JQuery对象就是通过JQuery包装Dom对象后产生的对象:alert($(“#div1”).html());。Dom对象要想通过JQuery进行操作,先要转换为JQuery对象。

(2) $(“#div1”).html()等价于document.getElementById(“div1”).innerHTML;

(3) $(“#div1”)得到的就是JQuery对象,JQuery对象只能调用JQuery对象封装的方法,不能调用Dom对象的方法,Dom对象也不能调 用JQuery对象的方法,所以这句话是错误的(alert($(“#div1”).innerHTML)),因为innerHTML是Dom对象的属 性。

(4) Array是JS语言本身的对象,不是Dom对象,因此不需要转换为JQuery对象才能用。

(5) 将Dom对象转换为JQuery对象的方法,$(Dom对象);当调用JQuery没有封转的方法时必须用Dom对象。转换方法:var domobj=jqobj[0]或者var domobj=jqobj.get(0)。

(6) JQuery修改样式:$(“#div1”).css(“background”,”red”);  获得样式

$(“#div1”).css(“background”);  修改value=$(“#un”).val(“abc”)。获得value;

$(“#un”).val(),类似的获得,设置innerText,innerHTML用text()和html()。

  1. JQuery选择器

(1) JQuery选择器用于查找满足条件的元素,比如可以用$(“#控件ID”)来根据控件ID获得控件的JQuery对象,相当于getElementById;

$(“#div1”).html(“<font color=red>Hello</font>”);

(2) $(“TagName”)来获取所有指定标签名的JQuery对象,相当于getElementByName;

$(function(){

$(“#btnclick”).click(function(){

$(“p”).html(“我们都是p”);

});

});

隐式迭代,给所有选择出来的元素增加Click事件

(3) css选择器,同时选择拥有样式的多个元素。

<style type=”text/css”>

.test{background-color:red; }

</style>

<script type=”text/javascript”>

$(function(){

$(“.text”).click(function(){

alert($(this).text());

});        });

</script>

<p class=”test”>Test1</p>

(4) 多条件选择器

1) 多条件选择器:$(“p,div,span.menuitem”),同时选择p标签,div标签和拥有menuitem样式的.span标签元素。

2) 注意:选择器表达式中的空格不能多,不能少,这是易错点。

3) 层次选择器:

$(“div li”)获取div下的所有li元素(后代,子,子的子)。

$(“div>li”)获取div下的直接li子元素。

$(“.menuitem+div”)获取样式名为menuitem之后的第一个div元素。

$(“.menuitem~div”)获取样式名为menuitem之后的所有div元素。

  1. JQuery隐式迭代

如何判断对象是否存在,JQuery选择器返回的是一个对象数组,调用text(),html(),click()之类的方法的时候其实是对数组中的每个 元素迭代调用每个方法,因此即使通过ID选择的元素不存在也不会报错,如果需要判断是否存在,因该这样 写:if($(“btn1”).length<=0){

alert(“ID”为btn1的元素不存在,请您检查!);

}

  1. JQuery节点遍历

(1) next()方法用于获取节点后的第一个挨着的同辈元素 $(“.menuitem”).next(“div”);

nextAll()方法用于获取节点后的所有同辈元素   $(“.menuitem”).nextAll(“div”);

(2) siblings()方法用于获取所有的同辈元素。  $(“.menuitem”).siblings(“li”);

  1. JQuery基本过滤选择器

(1) :first 选取第一个元素。$(“div :first”);  选取第一个<div>

(2) :last 选取最后一个元素。  $(“div :last”)  选取最后一个<div>

(3) :not(选择器)选取不满足”选择器条件的元素”   $(“input :not(.myclass)”);   选取样式名不是myclass的<input>。

(4) :even,:odd  选取索引是奇数,偶数的元素。$(input:even)选取索引是奇数的<input>

(5) :eq(索引序号),:gt(索引序号),:lt( 索引序号)选取索引等于,大于,小于索引序号的元素,比如 $(“input:lt(5)”)  选取索引小于5的<input>。

(6) $(“:header”)选取所有的h1…..h6的元素。

(7) $(“div:animated”); 选取正在执行动画的<div>元素

(8) 属性过滤选择器

$(“div[id]”)选取有ID属性的<div>

$(“div[title=test]”)选取title属性为”test”的

,JQuery中没有对GetElementByName进行封装,用$(“input[name=abc]”);

$(“div[title!=test]”)选取title属性不为”test”的<div>

还可以选择开关,结束,包含等,条件还可以复合。

(9) 表单对象选择器

$(“#form1:enabled”);   选取id为form1的表单内所有启用的元素。

$(“#from1:disabled”);   选取id为form1的表单内所有禁用的元素。

$(“#form1:checked”);   选取所有选中的元素(Radio,CheckBox)。

$(“selectLselected”);    选取所有选中的选项元素(下拉列表)。

  1. 元素的each

JQuery元素也可以调用each方法,只是对$.each的简化调用。举例:显示选中的复选框

  1. JQuery表单选择器

(1) $(“:input”);  选取所有的<input>,<textarea>,<select>和<button>元素, 和$(“input”)不一样,$(“input”)只能获得<input>控件。

(2) $(“:text”);  选取所有的单行文本框,等价于$(“input:[type=text]”);

(3) $(“:password”)选取所有的密码框,同理还有::radio,:checkbox,:submit,:image,:reset,:button,:file,:hidden。

  1. JQuery的Dom操作

(1) 使用html()方法读取或者设置元素的innerHTML;

alert($(“a:first”).html());              alert($(“a:first”).html(“Hello”));

(2) 使用text()方法读取或者设置元素的innerText.

alert($(“a:first”).text());               alert($(“a:first”).text(Hello));

(3) 使用attr()方法读取或者设置元素的属性,对于JQuery没有封装的属性用attr进行操作。     alert($(“a:first”).attr(“href”));

$(“a:first”).attr(“href”,”http://www.baidu.com&rdquo;);

(4) 使用removeAttr删除属性

  1. 动态创建Dom节点

(1) 使用$(html字符串)来创建Dom节点,并且返回一个JQuery对象,然后调用append等方法将新创建的节点添加到Dom中。

var link=$(“<a href=’http://www.baidu.com’>百度</a>&rdquo;);

$(“div:first”).append(link);

$()创建的就是一个JQuery对象,可以完全进行操作。

var link=$(“<a href=’http://www.baidu.com’>百度</a>&rdquo;);

link.text(“百度”);

$(“div:first”).append(link);

append()方法用来在元素的末尾追加元素。

prepend()在元素的开始添加元素。

after() 在元素之后添加元素。

before()在元素之前添加元素。

  1. 删除节点

(1) remove()删除选择的节点

$(“ul li.textitem”).remove();  删除ul下的li中有testitem样式的元素。

remove方法的返回值是被删除的节点对象,还可以继续使用被删除的节点,比如重新添加到其他其他节点下:

var list=$(“#ulsite li”).remove();

$(“#ulsite2”).append(list);

(2) empty()是将节点清空

  1. 节点操作

(1) 替换节点

$(“br”).replaceWith(“<hr />”);  注解:<br />替换为<hr />

(2) 包裹节点

warp()方法用来将所有元素逐个用指定标签包裹。

$(“b”).warp(“<font color=’red’></font>”)将所有的粗体红色显示

  1. JQuery样式操作

(1) 获取样式 attr(“class”)。

(2) 设置样式 attr(“class”,”myclass”)。

(3) 追加样式 addClass(“myclass”)。

(4) 移除样式  removeClass(“myclass”)。

(5) 切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)  taggleClass(“myclass”)。

(6) 判断是否存在样式  :hasClass(“myclass”);

16  RadioButton操作

(1) 取得RadioButton中的选中值

$(“input[name=gender]:checked”).val();

<input id=”Radio1”checked=”checked” name=”gender” type=”Radio” value=”男” />男

<input id=”Radio2”checked=”checked” name=”gender” type=”Radio” value=”女” />女  <input id=”Radio3”checked=”checked” name=”gender” type=”Radio” value=”保密” />保密

(2) 设置RadioButton的选中值

$(“input[name=gender]”).val([“女”]);或者$(“:radio[name=gender]”).val([“女”]);

注释:val中参数的[]不能省略。

(3) 对RadioButton的选择技巧对于CheckBox和Select列表框也适用。

(4) 除了可以使用val批量设置RadioButton,CheckBox等的选中以外,还可以设定checked属性来单独设置控件的选中状态。

$(“#btn1”).attr(“checked”,true);

17  JQuery事件

(1) JQuery中的事件绑定  $(“#btn”).bind(“click”,function(){  });,每次都这么调用太麻烦,所以JQuery可以用$(“#btn”).click(function(){  })来进行简化。

(2) 合成事件hover,hover(enterfn,leavefn); 当鼠标放在元素上时调用enterfn方法,当鼠标离开元素的时候调用leavefn方法。

(3) 事件冒泡  JQuery中也向JavaScript一样是事件冒泡。

(4) 调用事件对象的stopPropagation()方法终止冒泡。  e.stopPropagation();

注:如果想要获得事件相关的信息,只要给响应的匿名函数增加一个参数e,e就是事件对象。

$(“tr”).click(function(e){

alert(“tr被点击”); e.stopPropagation();

});            注意:函数的参数是e.

(5) 阻止默认行为:有的元素有默认行为,比如超链接点击后会转向新连接,提交按钮会默认提交表单,如果想阻止默认行为只有调用事件对象的PreventDefault()方法和window.event.return.value=false效果一样。

$(“a”).click(function(e){

alert(“所有超链接暂时全部禁止”); e.PreventDefault();

});

(6) 属性  pageX,pageY,target获得触发事件的元素(冒泡的起始,和this不一样)。

which如果是鼠标事件获得按键(1 左键,2 中键,3 右键)。altkey、shiftkey、ctrlkey获得alt,shift,ctrl是否按下,为bool值。keycode(键盘码,小键盘的1 和主键盘的keycode不一样),charcode(ASC码)属性发生事件时的keycode,charcode。

(7) 移除事件绑定  bind()方法即可移除元素上所有绑定的事件,如果unbind(“click”)则只移除click事件的绑定。  bind  :  +=   unbind :  -=

(8) 一次性事件:如果绑定的事件只想执行一次随后立即unbind.,可以使用one()方法进行事件绑定。

18  JQuery鼠标

(1) 获得发生事件时鼠标的位置

$(document).mousemove(function(){

document.title=e.pageX+”,”+e.pageY;

});

(2) 在mousermove,clcik等事件的匿名响应函数中如果指定一个参数e,那么就可以从e读取发生事件时的一些信息,比如对mousemove等鼠标事件来说,就可以读取e.pageX,e.pageY来获得发生事件时鼠标在页面的坐标

注解:body只是元素的显示范围,document是整个文档。

19  JQuery动画

show(),hide()方法是显示,隐藏元素,用toggle()方法在显示,隐藏之间切换。

$(“:button[value=show]”).click(function(){    $(“:button[value=hide]”).click(function(){

$(“div”).show();                          $(“div”).hide();

});                                     });

注解:如果show(),hide()方法不带参数则是立即显示,立即隐藏,如果指定速度参数,则会用指定时间进行动态显示,隐藏,单位为毫秒,也可以使用三个内置的速度。

fast(200毫秒),normal(400毫秒),slow(600毫秒)。

20  JQuery插件  JQuery Cookie

(1) 什么是Cookie  Cookie就是保存在浏览器上面的内容,用户在这次浏览页面的时候向Cookie中保存文本内容。下次在访问页面的时候就可以取出来上次保存的内容,这 样就可以得到上次”记忆的内容”。Cookie不是JQuery特有的概念,只不过是JQuery把它简化的更好用而已。

(2) Cookie需要浏览器的支持,浏览器的Cookie是可以禁用的,如果禁用了Cookie就不能使用了,不过一般不用考虑禁用Cookie的情 况,Cookie的几个特征,Cookie是与域名相关的,所以163.com不能读取baidu.com记录的Cookie,因为如此读取,设置 Cookie的时候不用担心不同域名Cookie的冲突,一个域名能写入的Cookie总尺寸是有限制的,一般是几千字节,能写入的Cookie总条数一 般是几十条,超过以后浏览器自己会根据自己的策略移除一些Cookie,Cookie不是写入以后一定下一次能读取出来,浏览器可能会定期清除,用户也可 以手动清除。

(3) Cookie就是存储在浏览器上面的一些数据。

21  JQuery Cookie使用

(1) 使用方法,Cookie保存的是键值对。

1) 添加JQuery.Cookie.js

2) 设置值, $.cookie(“名字”,”值”)。 Cookie中保存的值都是文本

3) 读取值 var v=$.cookie(“名字”);

4) $.cookie(“用户名”,”Tom”);在同域名的另外一个页面下面也能读到。

(2) 设置值的时候还可以指定第三个参数, $.cookie(“名字”,”值”,{expires:7,path:’/’,domain:’itcast.cn’,secure=true});  expires表示要求浏览器保留Cookie几天,这个值只是给浏览器的建议,可能没到时间已经被清除了。