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" οnclick="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});
});

 

转载于:https://www.cnblogs.com/bitter-yu/p/4194295.html