标签：
jQuery=$ 2者相等
$是顶级的对象，就像dom中的window
jQuery中最常用的对象即$对象，要想使用jQuery的方法必须通过$对象。只有将普通的Dom对象封装成jQuery对象，然后才能调用jQuery中的各种方法。
$是jQuery简写，在代码中可以使用jQuery代替$，但一般为了方便大家都直接使用$。
通过js实现的页面加载完毕的执行代码的方式与JQuery的区别：
需求：页面加载完毕后弹出“加载完毕！”。
通过window.onload实现。
通过jQuery的方式实现。
$(document).ready(fn);
$(fn); 【等价于$(document).ready(fn);】
window.onload与$(document).ready(fn);的区别
window.onload需要等待页面完全加载完毕才会触发，即所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发。$(document).ready()只要Dom元素加载完毕即触发。这样可以提高响应速度。
$(document).ready();可以多次注册事件处理程序，并且最终都会执行，而window.onload每次注册新的事件处理程序时都会将前面的覆盖掉。
使用jQuery实现window.onload的效果：$(window).load(fn);
jQuery中注册事件是load(fn)而不是onload(fn);与Dom不一样。
dom对象和JQuery对象的属性和方法是不能相互调用的，只能通过相互转化才行
要想调用text()方法来设置层中显示的文字，必须沟通过jQuery对象才能调用text方法
//第一步先将txtObj转换为jQuery对象。
//把Dom对象转换为jQuery对象： $(dom对象)
将dom对象转化为jQuery对象：$(dom对象)
//获取层对象(Dom对象)
var txtObj = document.getElementById(‘dv1‘);
var txtobjJQuery=$(txtobj);
txtobjJQuery.text("我转成jQuery对象了");
//不能通过jQuery对象来操作Dom对象的属性和方法：innerText()
//必须得把jQuery对象再转换为Dom对象。
将jQuery对象转化为dom对像：.get(0);
//var domObj = txtObjJQuery[0];//2个效果一样
var domobj=txtobjtJQuery.get(0);
domobj.innerText="我转成dom对象了"
$.map(arrint,function(){})：遍历集合数组（v,k））与$.each的区别就是（k,v):键值对的对应位置，map有返回值，而each没有返回值
1、
var arrint = [2, 3, 5, 6, 8]; var arr = $.map(arrint, function (v, k) { return v * 2; }); alert(arr);
2、
var arr1 = $.map(arrint, function (v, k) { if (k > 2) { return v * 2; } else { return v; } }); alert(arr1);
//遍历这个数组
3、
var arr2 = $.map(arrint, function (v, k) {
return k + "=" + v;
});
alert(arr2);
//第二个参数（匿名函数）有两个参数，第一个参数是键（索引）k，第二个参数是值v
$.each(arrint,function(){}):遍历集合dic
//遍历数组
var arrint = [2, 3, 5, 7, 8, 9];
$.each(arrint, function (k, v) {
alert(k + "=" + v);
alert(this);//直接用this来取得当前集合的值
});
//遍历集合dic
var dic = { name: "huangjiansheng", age: 20, gender: "男" };
$.each(dic, function (k, v) {
alert(k+"="+v);
});
var dic = { name: "nihao", age: "30", gender: "男" };
$.each(dic, function (k, v) {
if (v==30) {
return false;
}
alert(this);//直接用this来取得当前集合中的值
});
使用$.trim(str)去掉首位的空格;
// window.onload = function () {
/ document.getElementById("btn").onclick = function () {
// var val = document.getElementById("txt1").value;
// val = val.replace(/^\s+/,‘‘).replace(/$\s+,‘‘);
// alert("==="+val+"===");
// }
// }
$(function(){
var s = " 3 3 wi 34 你 哈的 我nm w fe ";
s = $.trim(s);
alert("=="+s+"==");
});
//注意：这里的inputs并不是一个数组，它只是一个看起来像数组的一个对象
var inputs = document.getElementsByTagName(‘input‘);
//这里的inputs不是数组，所以没有数组的一些方法。
//inputs.reverse();没有这个方法
for (var i = 0; i < inputs.length; i++) {
alert(inputs[i].type);
}
jQuery中的Id选择器，表示直接获取页面上Id为dv1的对象，并且返回值就是一个jQuery对象。
// 标签选择器
//通过标签选择器获取到的是页面上的所有的div标签，要想给每个div都设置文字，必须循环每个div对象，
//但是我们这里并没有循环，原因是text()方法内部帮我们循环了，这个特性就叫做“隐式迭代”
$(‘div‘).text(‘hahahahaahaa‘);
//链式编程
//jQuery中之所以能链式编程，也是因为在每个方法调用完毕以后返回了对象自己。
$(‘p‘).text(‘我们都是p‘).css(‘color‘, ‘red‘).css(‘border‘, ‘1px solid blue‘).click(function () {
alert(‘老虎屁股摸不得！‘);
}).css(‘background-color‘,‘black‘);
jQuery中的选择器：
1、id选择器 $(‘#div1‘)//表示直接获取页面上Id为dv1的对象
$(‘#div1‘).text(‘212313‘);
2、标签选择器 $(‘div‘)//标签选择器获取到的是页面上的所有的div标签
把全部的div标签的值改为23213
这个特性叫做隐式迭代
$(‘div‘).text(‘23213‘);
3、类选择器$(‘.cls‘).css(‘color‘),‘red‘;//选择页面上所有应用了cls类样式的元素
4、组合选择器：多种选择器同时应用一种样式：$(‘#.link,p,div‘).css(‘color‘,‘red‘);//表示页面上的所有的id为alink1的元素，p元素，div元素都被选择了
//将每个选择器匹配到的结果合并到一起
5、（标签+类）选择器
$(p.calss).text();
5、层次选择器
div下面的所有P元素（子，后代）
$(‘div p‘).css(‘color‘,‘red‘);
div下面的所有直接子元素（子）
$(‘div > p‘).css(‘color‘,‘red‘);
获取span元素后的紧跟的第一个兄弟p元素，将其设置为红色，紧跟后的第一个兄弟元素，并且这个元素还必须是P
$(‘span+p‘).css(‘color‘,‘‘red‘);//与next()方法相同
span元素后紧跟的任何类型的兄弟元素
$(‘span+*‘).css()
获取当前元素的后面的所有兄弟元素，并且只能是div类型的
$(‘span~div‘).css();//与nextAll()相同
//设置span后紧跟的那一个兄弟，而且必须是p
$(‘span‘).next(‘p‘).css(‘color‘, ‘red‘);//与$(‘span+p‘)相同
//这个表示span后的紧挨着的那个兄弟变红
//$(‘span‘).next().css(‘color‘, ‘red‘);
//6.选择当前元素后面的所有的兄弟,而且必须是p
//$(‘span‘).nextAll(‘p‘).css(‘color‘,‘red‘);//与$(‘span ~ div‘).css(‘color‘, ‘red‘)相同
//span元素的前一个兄弟
//$(‘span‘).prev().css(‘color‘, ‘red‘);
当前元素之前的所有兄弟元素
// $(‘span‘).prevAll().css(‘color‘, ‘red‘);
当前元素之前的所有兄弟p类型元素
//$(‘span‘).prevAll(‘p‘).css(‘color‘, ‘red‘);
//表示获取span元素的所有的兄弟元素
// $(‘span‘).siblings().css(‘color‘, ‘red‘);
next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）
nextAll();//当前元素之后的所有兄弟元素
prev();//当前元素之前的紧邻着的兄弟元素（上一个）
prevAll();//当前元素之前的所有兄弟元素
siblings();//当前元素的所有兄弟元素
将表格下的所有p设置为红色
$(‘td p‘).css();
6、基本过滤选择器
:first 选取第一个元素。$("div:first")选取第一个<div>
:last 选取最后一个元素。$("div:last")选取最后一个<div>
:not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input>
:even、:odd，选取索引是偶数、奇数的元素：$("input:even")选取索引是奇数的<input>
:eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input>
:gt(0):lt(3):大于0小于3；在gt(0)过滤后的条件下再重新从集合中取gt(3)小于3的
$(‘td‘,范围)：在指定的范围内找td//$(‘td‘,(this))表示在当前行内找td
$(":header")选取所有的h1……h6元素（*）
$("div:animated")选取正在执行动画的<div>元素。 （*）
//在选中的所有p元素中，颜色都变成蓝色
//$(‘p‘).css(‘color‘, ‘blue‘);
//在选中的所有p元素中，让第一个p元素的颜色办成蓝色
//$(‘p:first‘).css(‘color‘, ‘blue‘);
//等价于:first
// $(‘p‘).first().css(‘color‘, ‘blue‘);
//选中的p元素中，将最后一个设置为蓝色
//$(‘p:last‘).css(‘color‘, ‘blue‘);
//等价于:last
//$(‘p‘).last().css(‘color‘, ‘blue‘);
//设置所有选中的p中，索引为2的p的颜色变成蓝色
//通过索引来访问选中的元素
//当索引超出界限后没有任何效果。
// $(‘p:eq(2)‘).css(‘color‘, ‘blue‘);
//将所有索引大于2的元素的p设置为蓝色
// $(‘p:gt(2)‘).css(‘color‘, ‘blue‘);
//将所有索引小于2的元素的p设置为蓝色
// $(‘p:lt(2)‘).css(‘color‘, ‘blue‘);
//选择页面上所有的p元素，除了那些应用了cls类样式的p元素。
//$(‘p:not(.cls)‘).css(‘color‘, ‘blue‘);
// $(‘h1,h2,h3,h4,h5,h6‘).css(‘color‘, ‘red‘);
//选取页面上所有的h标签，无论是h几
// $(‘:header‘).css(‘color‘, ‘blue‘);
//选取页面上p中的所有的偶数元素
// $(‘p:even‘).css(‘color‘, ‘blue‘);
//选取页面上P中的所奇数的与元素
$(‘p:odd‘).css(‘color‘, ‘blue‘);
为btn1添加一个单击事件
$(‘#btn1‘).click(function()
{
$(‘p‘).text(‘我们都是P‘);
})
添加样式：
$(‘p‘).css(‘color‘,‘red‘);
$(‘p‘).css(‘border‘,‘1px solid bule‘);
$(‘p‘).click(function(){
alert(‘我是黄建胜‘);
})
链式编程：每个对象方法调用完毕后，返回调用
者自己
$(‘p‘).css(‘color‘,‘red‘).click(function(){
alert(‘我是‘);
}).css(‘‘)
链式编程的时候一定要注意在什么时候“破坏”了链，当前对象的传递，如果传递被破坏，则继续链式编程会有意想不到的结果！
调用end()方法。（返回链 被破坏前的对象。）
toggleClass(‘class’);//切换样式的显示。
hasClass(‘class’);//判断是否应用了某样式。
//$(‘div‘).text(‘Test‘).css(‘color‘, ‘red‘);//设置文本，只适合与有（text）文本节点的情况
$(‘div‘).html(‘<font color="green"> hahaha</font>‘); //.html()方法相当于innerHTML，
.text()方法，相当于innerText
设置元素的value的值，是通过val()方法来设置的，
当传递参数的时候，表示为元素的value中获取值。
$(‘#txt1‘).val(‘itcast.cn‘);//设置有value属性的元素的的value值
});
$(‘#btn1‘).click(function () {
//jQuery方法的一般规律：如果传递参数表示设置一个值，如果不传递参数表示获取一个值。
alert($(‘div‘).text());
alert($(‘#txt1‘).val());
});
jQuery的方法的一般的规律：如果传递参数表示设置一个值，如果不传值表示获取一个值
$(‘#txt1‘).text(‘123‘);设置值
$(‘#txt1‘).text();//获取值
设置元素的value值，通过val()方法来设置
当传递参数的时候，表示为元素的value中获取值
$(function () {
$(‘#btn‘).click(function () {
// $(‘div‘).html(‘<font color="blue">你好啊</font>‘);
$(‘div‘).html(‘<a href="www.baidu.com">百度</a>‘);
//alert($(‘div‘).html()); //获取html,返回字符串
//$(‘div‘).text(‘我是一个好孩子‘);
//$(‘div‘).val(‘我是一个不好的孩子‘);//错误div没有value属性，设置不了值
//var s = $(‘#txt1‘).val();//由于文本框有value属性，可以赋值和取值
//alert(s);
//$(‘#txt1‘).val(‘我靠‘);
// var s = $(‘#txt1‘).text();null,文本框没有text节点，不能追加文本
// alert(s);
//$(‘#txt1‘).text(‘hhahh‘);//报错，由于文本框不能追加text文本，只能给属性value赋值
});
$(‘#btn1‘).click(function () {
var s = $(‘div‘).html();
alert(s); //<A href="http://localhost:2918/Web/www.baidu.com">百度</A>
});
})
链式编程，隐式迭代:
html(‘val’).text(‘val’).css()链式编程，隐式迭代。
链式编程注意：$(‘div’).html(‘设置值’).val(‘设置值’);这样可以，但是$(‘div’).html().text()这样是不对的，因为获取值时返回的是获取的字符串而不是对象本身所以不能链式编程。
当页面没有id为‘txt’的标签时，dom中的getelementbyid会报null错误
使用jquery时，即使页面中不存在txt也不报错
jquery选择器返回的是一个集合，如果元素没有放在集合中
及这个集合为空
所以可以根据id判断改元素是否存在
if($(‘#id‘).length>0)
{
alert(‘改元素存在‘)
}
动态创建元素的时候用（如果存在则不创建，不存在则创建）
当 要设置多个css样式(行内样式：在style属性值显示的样式)的时候：传递一个键值对进去
$(function(){
$(‘#btn‘).click(fucntion(){
$(‘div‘).css({‘border‘:‘‘,‘color‘:‘‘,‘‘:‘‘});
});
});
toggleClass(‘class’);//切换样式的显示。
hasClass(‘class’);//判断是否应用了某样式。
让超链接不可用
$(‘a‘).attr(‘disable‘,true);
7、属性过滤选择器：
$("div[id]")选取有id属性的<div>
$("div[title=test]")选取title属性为“test”的<div>，jQuery中没有对getElementsByName进行封装，用$("input[name=abc]")
$("div[title!=test]")选取title属性不为“test”的<div>
还可以选择开头【name^=值】、结束【 name$=值】、包含【 name*=值】等，条件还可以复合。【[属性1=a][属性2=b]…】（*）
8、表单对象选择器（过滤器）：
$("#form1:enabled")选取id为form1的表单内所有启用的元素
$("#form1:disabled")选取id为form1的表单内所有禁用的元素
$("input:checked")选取所有选中的元素（Radio、CheckBox）
$("select:selected")选取所有选中的选项元素（下拉列表）
$(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得<input>
$(":text")选取所有单行文本框，等价于$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);
$(“:password”)选取所有密码框。
同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。
代替了$(‘input[type=***]’);
//form 下的所有被禁用的元素 北京色红色
// $(‘form :disabled‘).css(‘backgroundColor‘, ‘red‘);
//form下面的所有没有被禁用的元素背景色为蓝色
//$(‘form :enabled‘).css(‘backgroundColor‘, ‘blue‘);
//:checked表示所有被选中的radio或者checkbox
// $(‘:checked‘).css(‘backgroundColor‘, ‘red‘);
//:selected表示所有被选中的option
//对于select标签应用css样式时，有很多浏览器支持性问题，所以
//一般我们在网上见到的下来菜单用的都不是select,而是自己模拟的。
$(‘:selected‘).css(‘fontSize‘, ‘30px‘);
//$(‘input‘).css(‘backgroundColor‘, ‘red‘);//页面中所有的input标签
//第一个表单选择器。
// $(‘:input‘).css(‘backgroundColor‘, ‘red‘);
//$(‘input,textare,button,select‘);
//
//$(‘input[type=text]‘).css(‘backgroundColor‘, ‘red‘);
//表示只选择单行文本框，等价于$(‘input[type=text]‘);
//$(‘:text‘).css(‘border‘, ‘1px solid red‘);
//选中页面上的所有的checkbox
//$(‘input[type=checkbox]‘).css(‘backgroundColor‘, ‘red‘);
//$(‘:checkbox‘).css(‘backgroundColor‘,‘blue‘);
//$(‘input[type=radio]‘);
// $(‘:radio‘).css(‘backgroundColor‘, ‘red‘);
//修改属性：
// $(‘a‘).attr(‘href‘, ‘http://www.baidu.com‘);
//删除title属性
//$(‘a‘).attr(‘title‘, ‘‘);//清空属性
//这个才表示删除属性呢。
$(‘a‘).removeAttr(‘title‘);
//删除元素，从页面移除
var obj=$(‘ul‘).remove();
//再把刚刚删除的那个添加到div下面
$(‘div‘).append(obj);
//因为元素只能有一个父节点，所有可以直接把一个元素移动到另一个节点下
$(‘#div1‘).append($(‘#span‘));
//selec标签下的所有元素移动到s2下
$(‘#s1 option‘).appendTo(‘#s2‘)
//将选中的项移动到s2下面
$(‘#s1 ：selected‘).appendTo(‘#s2‘)
在指定的范围内收索：
只要在$()指定第二个参数，第二个参数为相对的元素.
$( “ul”, $(this) ).css(“background”, “red”);
$(选择器,context);例如：$(‘td’,$(‘div table tr’));
context参数可以是用dom对象集合或jQuery对象
默认如果不传递context则，会在整个文档中搜索。
案例：修改点击行的所有td的背景色。通过$(‘td’,context)
$(function () {
$(‘tr‘).click(function () {
//设置当前点击行的背景色为红色
//$(this).css(‘backgroundColor‘, ‘red‘);
//设置当前点击行中的单元格背景色：偶数为黄色，奇数为蓝色
//关键问题：如何选中当前点击行中的所有的td
//如果直接写$(‘td‘),表示在当前整个页面中找td,而$(‘td‘,范围)则表示在指定的范围内找td,比如：$(‘td‘,$(this)),由于$(this)表示当前行，所有$(‘td‘,$(this))的意思就是，表示在当前行中找td
$(‘td:even‘, $(this)).css(‘backgroundColor‘, ‘yellow‘);
$(‘td:odd‘, $(this)).css(‘backgroundColor‘, ‘blue‘);
});
});
jQuery的Dom操作：
1、使用html()方法读取或者设置元素的innerHTML：
alert($("a:first").html());
$("a:first").html("hello");
2、使用text()方法读取或者设置元素的innerText：
alert($("a:first").text());
$("a:first").text("hello");
3、使用attr()方法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。
alert($("a:first").attr("href"));
$("a:first").attr("href", "http://www.rupeng.com");
attr({‘key’:’value’,’k’:’v’});
4、使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’)
//动态创建Dom节点
使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象，然后调用append等方法将新创建的节点添加到Dom中：
var link = $("<a href=‘http://www.baidu.com‘>百度</a>");
$("div:first").append(link);
$()创建的就是一个jQuery对象，可以完全进行操作
var link = $("<a href=‘http://www.baidu.com‘>百度</a>");
link.text("百毒");
Link.attr(‘title’,’百度’);创建好添加属性
$(“div:first”).append(link);。
创建radio，使用$(‘<input name=“”/>’);，而不要在创建好后通过attr(‘name’,’gender’).//通过attr()设置name,在IE6下有问题。
//动态创建Dom节点
append方法用来在元素的末尾追加元素（最后一个子节点）。
prepend，在元素的开始添加元素（第一个子节点）。
after，在元素之后添加元素（添加兄弟）
before：在元素之前添加元素（添加兄弟）
子元素.appendTo(父元素);//主动巴结!到最后一个
子元素.prependTo(父元素);//主动巴结到第一个。
(*)A.insertBefore(B);将A插入到B的前面，等同于B.before(A);
(*)X.insertAfter(Y);将X插入到Y的后面，等同于Y.after(X);
$(function () {
$(‘#btn3‘).click(function () {
//var obj = $(‘<input type="text">‘);
//$(‘#dv1‘).append(obj);//将创建的元素添加到div的子元素中，而且是最后一个子元素
//$(‘#dv1‘).prepend(obj); //将创建的元素添加到div的子元素中，而且是子元素中的最前面一个
// $(‘#dv1‘).after(obj); //将创建的元素添加到div后面的紧跟的兄弟元素
//$(‘#dv1‘).before(obj); //将创建的元素添加到div前面的兄弟元素
//$(‘<input type="text">‘).appendTo(‘#dv1‘); //创建一个元素并主动添加到div（父元素）的子元素中（最后一个）
//$(‘<input type="text">‘).prependTo(‘#dv1‘);//创建一个元素并主动添加到div(父元素)的子元素中（子元素的最前面一个）
});
})
删除节点:
emptys();
清空某元素下的所有子节点
内部实现：while(ele.firstChild){ele.removeChild(ele.firstChild);}
元素.remove(expr) ，将自己从本页删除
删除当前元素，返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下：
var lis = $("#ulSite li").remove();
$("#ulSite2").append(lis);
案例：清空ul中的项，代码见备注。$("ul li.testitem").remove(); 删除ul下li中有testitem样式的元素。
权限选择：var items = $(“#select1 option:selected”).remove(); $(“#select2”).append(items); 更狠的：$(“#select1 option:selected”).appendTo($(“#select2”))；
不同的浏览器的css样式有兼容性的问题，所以不同浏览器中在jQueryde使用样式的时候会有兼容性的问题
是本身css的样式的问题，而不是jquery的问题
同时选中多个radio，然后 设置值，radio的value如果与被设置的值相同，则被选中
$(‘raido‘).val([‘男‘,‘司机‘]);//同时选中男和司机，注意里面是数组
//如果是设置一个被选中的也要用数组
全选：
$(function(){
//全选：
$(‘#btnCHKAll‘).click(){
$(‘:checkbox‘).attr(‘checked‘,true);
};
//全不选：
$(‘#btnNotchkALL‘).cilck(){
#(‘:checkbox‘).attr(‘checked‘),false;
};
//反选:循环遍历其中的checkbox，如果当前值是选中的就取反（没选中），没有选中的就选中
$(‘#btnchkreverse‘).cilck(){
$(‘:checkbox‘).each(function(index,chkobj){
$(‘chkobj‘).attr(‘checked‘,!$(chkobj).attr(‘checked‘));//让当前的checkbox的属性值，变成之前的checkbox的值取反
});
}
});
//获取div1下面的应用了.class1类样式的a标签
$(#div1 a.class1).cilck(function(){});//点击
jacvascript:void(0)：点击超链接时，不跳转，不重新加载
//绑定事件
$(‘#txt1‘).bind(‘click‘,function(){//注册只能调用一次的方法把bind改为one().
alert(‘我被单击了‘);
});
效果同上，注册点击事件
$(‘a‘).click(function(eve){
alert(‘我不去百度了！‘);
//return false;
//阻止事件继续的方法
eve.preventDefault();//如果div及元素嵌套的话会出现点击最里面的会把每个divz中的方法都执行
});
//mouseover和mouseout事件相同
$(‘div‘).hover(function(){
$(this).css(‘background‘,‘red‘);
},function(){
$(this).css(‘background‘,‘yellow‘);
});
表示最初引发事件的对象
alert($(evt.targer).attr(‘id‘))
标签：
原文地址：http://www.cnblogs.com/hetong/p/4852443.html
