// 本元素相邻的label元素:
$("p+ label")
// 本元素之后的所有同级label元素:
$("p~ label")
// 本元素下层中的所有span元素
$("div span")
// 本元素下第一层中的所有span元素
$("div> span")
// 本元素(class="div1")下 第一个li元素/最后一个li元素/奇,偶数li元素
$(".div1li:first")
$(".div1li:last")
$(".div1 li:odd") //偶数
$(".div1 li:even") //奇数
// Not firstor not last
$(this).closest('tr').find('td:not(:last)')
$(this).closest('tr').find('td:not(:first)')
// 本元素(ul)下第一层索引为2的li元素,索引是从0开始
$("ul > li:eq(2)") //索引等于2
$("li:gt(2)") // 索引大于2
$("li:lt(2)") // 索引小于2
// 所有包含'jQuery'关键字的li
$("li:contains('jQuery')").css("background","green");
// 所有含有Label元素的li,'label'是选择器,可以任意定义。
$("li:has('label')").css("border","solid2px red")
// 所有可见p元素,所有隐藏li元素
$("li:hidden")
$("p:visible")
// 所有title 属性为'蔬菜'的li
$("li[title=蔬菜]").css("background-color","green");
// title 属性以'蔬菜'结尾
$("li[title^=蔬菜]").css("background-color","green");
// title 属性包含'蔬菜'
$("li[title*=蔬菜]").css("background-color","green");
// title 属性以'蔬菜'结尾
$("li[title$=蔬菜]").css("background-color","green");
// (1)所有title属性为'水果',内容包含香蕉的,奇数位置的li;
$("li[title=水果]:contains(香蕉):even").css("background-color","yellow");
// [attribute=value]:属性等于值
// [attribute!=value]:属性不等于值
// [attribute*=value]:属性包含值
// 指所有含有li作为子元素的元素下,第一个(最后一个)li元素,可能是一个集合:
$("li:first-child").css("background-color","green");
$("li:last-child").css("background-color","green");
// 说明:
// (1):多于一个选择器中间无需空格,直接写即可。
============================================================
// 选择表单元素:
:input
:password
:text
:radio
:checkbox
:submit
:image
// 根据属性
:checked
:selected
设置属性:
$(":radio#Radio1").attr("disabled",true);
$(":radio#Radio2").attr("checked",true);
$(":radio#Radio3").hide();
CSS操作:
$("#content").addClass("red");
//$("#content").removeClass("red");
$("#content").addClass("blue");
$("#content").css({"background-color":"red","color":"white"});
// 在Selector中添加content
$(selector).append(content)
// 把content添加到selector中
$(content).appendTo(selector)
// 找到最近的父节点,并调用append():
var $html = "<span class='red'>小青蛙</span>"
$("#t1").closest("div").append($html);
// 向容器中添加元素,调用appendTo():
<span class="green">小乌龟</span>
var $html = "<span class='red'>小青蛙</span>"
$($html).appendTo($(".green"));
// Selector被content替换
$(selector).replaceWith(content)
// 使用content替换所有Selector的位置
$(content).replaceAll(selector)
//在selector位置之后添加content
$(selector).after(content)
//在selector位置之前添加content
$(selector).before(content)
//selector被content包裹(同appendTo)
$(selector).wrap(content)
//selector包裹content (同append)
$(selector).wrapInner(content)
//each遍历
$("span").each(function (index) {
if (index % i == 0) {
$(this).attr("class","red");
})
//清空selector的子元素
$(selector).empty();
//清空selector下满足selecter-sub的子元素
$(selector).empty(selector-sub);
//删除selector的子元素
$(selector).remove();
//删除selector下满足selecter-sub的子元素
$(selector).remove(selector-sub);
======================================
<input type="button" value="Input Button" /><br />
<input type="submit" value="点我就提交了" /><br />
<button>Button</button><br />
$(":sumbit") ->会选中 2和 3
$(":button") ->会选中 1和 3
$("input:submit") ->会选中2
$("input:button") ->会选中1
=========================================
<body>
<h3>appendTo()方法插入内容</h3>
<div>
<spanclass="green">小乌龟</span>
</div>
<spanclass="red">小兔子</span>
<scripttype="text/javascript">
//插入内容
$(".red").appendTo("div");
//插入变量
var $html ="<span class='red'>小青蛙</span>"
$($html).appendTo("div");
</script>
</body>
=======================================
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>包裹元素和内容</title>
<scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"type="text/javascript"></script>
<link href="style.css"rel="stylesheet" type="text/css" />
</head>
<body>
<h3>使用wrapInner()方法包裹元素</h3>
<spanclass="red" title='hi'>我的身体有点歪</span>
<spanclass="span1">Hello I am span</span>
<div class='div2'></div>
<scripttype="text/javascript">
// A被B包裹
$(".span1").wrap("<divclass='div1'></div>");
// A包裹B
$(".div2").wrapInner("<span class='span2'>Hello Iam span2</span>");
// .red被<i></i>包裹
$(".red").wrapInner("<i></i>");
</script>
</body>
</html>
=======================================
<body>
<h3>after()方法在元素之后插入内容</h3>
<spanclass="green">我们交个朋友吧!</span>
<div class="div1">
<input type="text"value="t1"/>
<input type="text"value="t4"/>
</div>
<scripttype="text/javascript">
var $html1 ="<span class='red'>兄弟。</span>";
$(".green").after($html);
var $html2 = "<inputtype='text' value='t2'/>";
var $html3 = "<inputtype='text' value='t3'/>";
var $firstText = $(".div1:text:first-child");
var $lastText = $(".div1:text:last-child");
$firstText.after($html2);
$lastText.before($html3);
</script>
</body>
=============================================
//页面初始化
$(document).ready(function(){})等价于$(function(){});
//绑定事件
$(selector).bind("event",function(){});
$(selector).on("event",function(){});
$(selector).live("event", function(){}); //可绑定动态元素(从 jQuery 1.7 开始,不再建议使用 .live()方法。1.9不支持.live(),本节代码编辑器里的js引用版本改为了1.8。)
//一次绑定多个事件,events中间用空格隔开
$(selector).bind("event1event2", function(){});
//解绑事件
$(selector).unbind("event");
//绑定一次事件
$(selector).one("event",function(){});
//触发事件
$(selector).trigger("event");
//hover,over
$(selector).hover(overFunc(){},outFunc(){});
//focus(), blur()得到/失去焦点
//Toggle,会toggle selector指定的元素
$(selector).toggle(func1(){},funct2(){}, func3(){});
//显示,隐藏
// speed:毫秒; callback:完成之后调用
$(selector).hide(speed,[callback])
$(selector).show(speed,[callback])
//上划,下划
$(selector).slideUp(speed,[callback]) //应用于显示元素
$(selector).slideDown(speed,[callback]) //应用于隐藏元素
//上划下划切换
$(selector).slideToggle(speed,[callback])
//淡入淡出
$(selector).fadeIn(speed,[callback]) //应用于隐藏元素
$(selector).fadeOut(speed,[callback]) //应用于显示元素
$(selector).fadeTo(speed,opacity,[callback]) //指定透明度
//动画, callback中可再执行其他动画
$(selector).animate({params},speed,[callback])
//停止动画参数为bool
$(selector).stop([clearQueue],[goToEnd])
//延迟动画
$(selector).delay(duration)
==================================
// load
$(selector).load(url,[data],[callback])
//getJSON
jQuery.getJSON(url,[data],[callback])或
$.getJSON(url,[data],[callback])
//getScript
jQuery.getScript(url,[callback])或
$.getScript(url,[callback])
// get
$.get(url,[callback])
// post
$.post(url,[data],[callback])
=================================
//使用serialize()方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求,它的调用格式如下:
$(selector).serialize()
//使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为:
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
=====================================
//生成JSON对象
//var jsonStr='[{"姓名": "李晓明", "分数":99},{"姓名": "李二","分数":86 }]';
$.parseJSON(jsonStr);
$("#btnShow").bind("click",function () {
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json",function(data){
$this.attr("disabled", "true");
$.each(data, function(index, sport) {
//if(index==3)
$("ul").append("<li>" +sport["name"] + "</li>");
});
});
})
<body>
<div id="divtest">
<div class="title">
<spanclass="fl">我最喜欢的一项运动</span>
<spanclass="fr">
<inputid="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<scripttype="text/javascript">
$(function(){
$("#btnShow").bind("click", function(){
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json",function(resultData){
$($this).attr("disabled", true);
$.each(resultData,function(i, data){
$("ul").append("<li>" + data["name"]+ "</li>");
})
})
});
})
</script>
</body>
======================================
//返回bool,检测contained是否在container内
$.contains(container, contained);
// 触发事件时传递参数:代码来自:http://stackoverflow.com/questions/3273350/jquerys-click-pass-parameters-to-user-function
$("some selector").click({param1: "Hello", param2: "World"}, cool_function);
// in your function, just grab the event object and go crazy...
function cool_function(event){
alert(event.data.param1);
alert(event.data.param2);
}
<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").attr('value', 'Save'); //versions older than 1.6
<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").prop('value', 'Save'); //versions newer than 1.6
<!-- Different button types-->
<button id='btnAddProfile' type='button'>Add</button>
$("#btnAddProfile").html('Save');