Jquery 学习
Jquery
1、onload 加载 (只能加载1次)
onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发。
ready是Dom元素创建完毕后就被触发。
$(window).load()
2、jquery选择器
$("#控件Id")来根据控件id获得控件的jQuery对象,相当于getElementById
3、层次选择器:
(1)$("div li")获取div下的所有li元素(后代,子、子的子……)
(2)$("div > li")获取div下的直接li子元素
(3)$(".menuitem + div")获取样式名为menuitem之后的第一个div元素(不常用)
(4)$(".menuitem ~ div")获取样式名为menuitem之后所有的div元素(不常用)
5、Jquery对象
jQuery对象就是通过jQuery包装Dom对象后产生的对象:alert($('#div1').html())。
Dom对象要想通过jQuery进行操作,先要转换为JQuery对象。
$('#div1').html() <=> document.getElementById("div1").innerHTML;
$('#div1')得到的就是jQuery对象,jQuery对象只能调用jQuery对象封装的方法,不能调用Dom对象的方法
,Dom对象也不能调用jQuery对象的方法,所以alert($('#div1').innerHTML是错的,因为innerHTML是DOM对
象的属性。
Array是JS语言本身的对象,不是Dom对象,因此不需要转换为Jquery对象才能用
(*)将Dom对象转换为JQuery对象的方法,$(dom对象);
当调用jQuery没有封装的方法的时候必须用Dom对象,转换方法:var domobj = jqobj[0]或者var
domobj=jqobj.get(0)
function test() {
var div1 = document.getElementById("div1");
var jqDiv1 = $(div1);
alert(jqDiv1.html());
var domdiv = jqDiv1[0];
alert(domdiv.innerHTML);
}
<input type="button" onclick="test()" value="click" />
6、样式
addClass 增加样式
removeClass 移除样式
toggleClass 切换样式(存在就删除,不存在就增加)
hasClass 判断是否有这样式
7、inherited
重父标签继承下来的颜色
8、表单选择器
$("#form1:enabled") 选取id为form1的表单内所有启用的元素
$("#form1:disabled") 选取id为form1的表单内所有禁用的元素
* $("input:checked") 选取所有选中的控件
$("select option:selected") 选取所有选中的选项元素
$(":text") 选取所有单行文本框。
9、each方法
显示选中的复选框信息
$(function() {
$("input[name=names]").click(function() {
var names = $("input[name=names]:checked");
var arr = new Array();
names.each(function(key, value) { arr[key] = $(value).val(); });//也可以用this只获
取value
$("#msgNames").text("共选中"+names.length+"条:"+arr.join(","));
});
});
<input type="checkbox" name="names" value="tom" />tom
<input type="checkbox" name="names" value="jim" />jim
<input type="checkbox" name="names" value="lily" />lily
<p id="msgNames"></p>
10、添加append
$("#btn2").click(function () {
var link2 = $("<a href='http://www.baidu.com'>百度1</a>");
var input1 = $("<input type='text'/>");
input1.val("1111123333444");
$("body").append(input1,link2);
});
$("<a></a>").text("百度").attr("href", "http://www.baidu.com").appendTo($("body"));
(*)prepend,在元素的开始添加元素。 prependto。
after,在元素之后添加元素(添加兄弟)。
before:在元素之前添加元素(添加兄弟)
11、删除节点
remove()删除选中的节点
empty()将节点清空,清除节点的innerHTML,节点还在
12、定时器
var leftSeconds = 10;
setInterval(function () {
$("#btnAgr").val("答案等" + leftSeconds + "秒");
leftSeconds--;
}, 1000);
13、节点操作
replaceWith替换
wrap()方法用来将所有元素逐个用指定标签包裹
$("br").replaceWith("<hr/>");
$("b").wrap("<font color='red'></font>");
14、radioButton
设置RdddioButton的选中值 val中的参数必须加“[]”;
checked用来过滤选中的控件:
alert($("input[name=ah]:checked").val());
给一个radio赋值(val中[]不能省略):
$("input[name=ah]").val(["打酱油"]);
15、mouseover 进入元素及其子元素均触发,即使没有离开元素也会被触发。mouseover属于冒泡事件
mouseenter 进入元素触发(子元素不触发)
16、preventDefal() 阻止默认行为
17、jquery ajax调用一般处理程序
$.ajax({
type: "post",
url: "AjaxHandler.ashx",
data: {"value1":'万事如意',"value2":'心想事成',"value3":'牛牛牛'}, //参数要
对应
success: function(result) {
alert(result);
}
});
18、$("#div1").hide() 隐藏ID为div1的板块
show() 显示
siblings()每个元素的同胞
slideUp() 向上隐藏
slideDown() 向下显示
$("#ulTab>li:not(:first)>div[name=body]").hide();//隐藏除第一个之外的name=body的div
$("#ulTab>li>div[name=title]").click(function() {
//把自己的兄弟显示
$(this).siblings().slideDown();
//父亲的兄弟(叔叔)
var shushu = $(this).parent().siblings();
//把叔叔的name=body的隐藏
$("div[name=body]", shushu).slideUp();
});
19、相对定位、绝对定位css
position: relative; 相对定位
position: absolute; 绝对定位
20、动画
$("#div1").animate({ opacity: 0 }).animate({ opacity: 1 }).animate({ opacity: 0 }).animate({
opacity: 1 }).animate({ opacity: 0 }).animate({ opacity: 1 });
});
opacity 透明度
$("#img1").animate({ width: 1000, height: 1000, opacity: 0 }, 3000, "swing", function() {
$(this).remove(); });
swing 前面的执行完毕 在执行后面的函数。
21、$.cookie("mytext", $("#txt1").val()); //写入存储cookie
$("#txt1").val($.cookie("mytext")); //读取cookie
22、expires1 cookie储存1天
$("#btnDing").click(function() {
if ($.cookie("btnding") == "true") {
alert("不能重复顶");
return;
}
alert("顶!");
$.cookie("btnding", "true", {expires:1});
});