jquery知识点1

引入jquery

基础选择器

id选择器

$("#my_id")

元素选择器---eg:div

$(“element”)

class选择器

$(“.class”)

全选---eg:$(“div *”)--选择全部的div

$(“*”)

选择多个

$(“sele1,sele2,seleN”)

父子选择器--子包括子孙

$("ance desc")

父子选择器-子仅仅包括儿子

$(“parent > child”)

相邻的选择器--只获取相邻的下一个元素

$(“prev + next”)

相邻的选择器--获取相邻的所有元素

$(“prev ~ siblings”)

eg:

$("p~span").css("border", "solid 1px red");
$("p~label").html("我们都是p先生的粉丝");

过滤选择器

first过滤选择器--选择第一个li

$(“li:first”)

:eq(index)过滤选择器--从0开始计数

eg: $("li:eq(2)").css("background-color", "#60F");

文本内容查找过滤选择器contains(text)

$("li:contains('你好')").css("background", "green");

:has(selector)过滤选择器

<li><p>我是P先生</p></li>

$("li:has('p')").css("background-color", "blue");

:hidden过滤选择器

:visible过滤选择器

[attribute=value]属性选择器

eg: $("li[title='水果']").css("background-color", "green");

[attribute!=value]属性选择器

[attribute*=value]属性选择器--包含

eg: $("li[title*='水']").css("background-color", "green");

:first-child子元素过滤选择器--每个列表的第一个li

$("li:first-child").css("background-color", "green");

:last-child子元素过滤选择器

表单选择器

:input表单选择器--冒号前有空格

返回全部的表单元素，不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select> 和 <button>标记的表单元素

<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<select>
<option>Option</option>
</select><br />
<textarea rows="3" cols="8"></textarea><br />

</form>

eg:$("#frmTest :input").addClass("bg_blue");

:text表单文本选择器

$("#frmTest :text").addClass("bg_blue");

:password表单密码选择器

$("#frmTest :password").addClass("bg_red");

:radio单选按钮选择器

</form>

$("#frmTest :radio").attr("disabled","true");

:checkbox复选框选择器

$("#frmTest :checkbox").attr("disabled","true");

:submit提交按钮选择器

通常情况下，一个表单中只允许有一个“type”属性值为“submit”的提交按钮

<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<input type="submit" value="点我就提交了" /><br />
<button>
Button</button><br />
</form>

$("#frmTest input:submit").addClass("bg_red");-----如果没有input的话，button也会添加上样式。

:image图像域选择器

使用:image选择器只能获取<input>图像域，而不能获取<img>格式的图像元素。

<form id="frmTest" action="#">
<input type="image" src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />
<br />
<img alt="" src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />
</form>

<script type="text/javascript">
$("#frmTest :image").addClass("bg_red");
</script>

:button表单按钮选择器

:button选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。

$("#frmTest :button").addClass("bg_blue");

:checked选中状态选择器

$("#frmTest :checked").attr("disabled", true);

:selected选中状态选择器

与:checked选择器相比，:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素

<form id="frmTest" action="#">
<select id="Select1" multiple="multiple">
<option value="0">苹果</option>
<option value="1" selected="selected">桔子</option>
<option value="2">荔枝</option>
<option value="3" selected="selected">葡萄</option>
<option value="4">香蕉</option>
</select><br /><br />
<div id="tip"></div>
</form>

<script type="text/javascript">
var $txtOpt = $("#frmTest :selected").text();
$("#tip").html("选中内容为:" + $txtOpt);
</script>

dom元素的操作

使用attr()方法控制元素的属性

其中attr(属性名)格式是获取元素属性名的值

<a href="http://127.0.0.1" id="a1">点我就变</a>
<div>我改变后的地址是：<span id="tip"></span></div>

<script type="text/javascript">
$("#a1").attr("href","www.imooc.com");
var $url = $("#a1").attr("href");
$("#tip").html($url);
</script>

html()和text()方法操作元素的内容

当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。

<h3>html()和text()方法设置元素内容</h3>
<div id="html"></div>
<div id="text"></div>

<script type="text/javascript">
var $content = "<b>唉，我又变胖了！</b>";
$("#html").html($content);
$("#text").text($content);
</script>

操作元素的样式

通过addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。

<div id="content">我穿了一件红色外衣</div>

<script type="text/javascript">
$("#content").css({"background-color":"red","color":"white"});-----------=$("#content").addClass("red white");------用空格隔开
</script>

移除属性和样式

removeAttr(name)和removeClass(class)

$("#content").removeClass("blue white");

使用append()方法向元素内追加内容

或者

var $html = "<div id='test' title='hi'>我不是调用函数创建的</div>"

$("body").append($html);

$(content).appendTo(selector)

参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。

var $html = "<span class='red'>小青蛙</span>"

$($html).appendTo("div");
</script>

$(selector).before(content)和$(selector).after(content)

<span class="green">我们交个朋友吧！</span>

<script type="text/javascript">
var $html = "<span class='red'>兄弟。</span>"
$(".green").after($html);
</script>

$(selector).clone()

<h3>使用clone()方法复制元素</h3>
<span class="red" title="hi">我是美猴王</span>

<script type="text/javascript">
$("body").append($(".red").clone());
</script>

$(selector).replaceWith(content)和$(content).replaceAll(selector)--替换内容

参数selector为被替换的元素，content为替换的内容。

<span class="green" title="hi">我是屌丝</span>

<script type="text/javascript">
var $html = "<span class='red' title='hi'>我是土豪</span>";
$(".green").replaceAll($html);
</script>

$(selector).wrap(wrapper)-----包裹元素本身。和$(selector).wrapInner(wrapper)----包裹元素内容

参数selector为被包裹的元素，wrapper参数为包裹元素的格式。

<span class="red" title='hi'>我的身体有点歪</span>

<script type="text/javascript">
$(".red").wrapInner("<i></i>");
</script>

$(selector).each(function(index))

参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始

<body>
<h3>使用each()方法遍历元素</h3>
<span class="green">香蕉</span>
<span class="green">桃子</span>
<span class="green">葡萄</span>
<span class="green">荔枝</span>

<script type="text/javascript">
$("span").each(function (index) {
if (index == 1) {
$(this).attr("class", "red");
}
});
</script>
</body>

remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。

$("span").remove(".green");

jquery事件与应用

ready()事件类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行

$(document).ready(function(){})等价于$(function(){});

<div id="tip"></div>
<input id="btntest" type="button" value="点下我" />

<script type="text/javascript">
$(function(){
$("#btntest").bind("click", function () {
$("#tip").html("我被点击了！");
});
});

绑定事件$(selector).bind(event,[data] function)参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。

<body>
<h3>bind()方法绑多个事件</h3>
<input id="btntest" type="button" value="点击或移出就不可用了" />

<script type="text/javascript">
$(function () {
$("#btntest").bind("click mouseout",function () {
$(this).attr("disabled", "true");
})
});
</script>
</body>

hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果，

$(selector).hover(over，out);

<body>
<h3>hover()方法切换事件</h3>
<div>别走！你就是土豪</div>

<script type="text/javascript">
$(function () {
$("div").hover(
function () {
$(this).addClass("orange");
},
function () {
$(this).removeClass("orange")
})
});
</script>
</body>

$(selector).toggle(fun1(),fun2(),funN(),...)

toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，同时，它还可以实现元素的隐藏与显示的切换------toggle()方法支持目前主流稳定的jQuery版本1.8.2，在1.9.0之后的版本是不支持的。

<input id="btntest" type="button" value="点一下我" />
<div>我是动态显示的</div>

<script type="text/javascript">
$(function () {
$("#btntest").bind("click", function () {
$("div").toggle();
})
});
</script>

unbind()方法可以移除元素已绑定的事件

$(selector).unbind(event,fun)其中参数event表示需要移除的事件名称，多个事件名用空格隔开，fun参数为事件执行时调用的函数名称。

<input id="btntest" type="button" value="移除事件" />
<div>土豪，咱们交个朋友吧</div>

<script type="text/javascript">
$(function () {
$("div").bind("click",
function () {
$(this).removeClass("backcolor").addClass("color");
}).bind("dblclick", function () {
$(this).removeClass("color").addClass("backcolor");
})
$("#btntest").bind("click", function () {
$("div").unbind();
$(this).attr("disabled", "true");
});
});
</script>

one()方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次，

$(selector).one(event,[data],fun)-----参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数

<h3>one()方法执行一次绑定事件</h3>
<div>请点击我一下</div>

<script type="text/javascript">
$(function () {
var intI = 0;
$("div").one("click", function () {
intI++;
$(this).css("font-size", intI + "px");
})
});
</script>

调用trigger()方法手动触发指定的事件$(selector).trigger(event)

其中event参数为需要手动触发的事件名称。

<div>土豪，咱们交个朋友吧</div>

<script type="text/javascript">
$(function () {
$("div").bind("change-color", function () {
$(this).addClass("color");
});
$("div").trigger("change-color");
});
</script>

focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件

<body>
<h3>表单中文本框的focus和blur事件</h3>
<input id="txtest" type="text" value="" />
<div></div>

<script type="text/javascript">
$(function () {
$("input").bind("focus", function () {
$("div").html("请输入您的姓名！");
})
$("input").bind("blur", function () {
if ($(this).val().length == 0)
$("div").html("你的名称不能为空！");
})
});
</script>
</body>

当一个元素的值发生变化时，将会触发change事件

<select id="seltest">
<option value="葡萄">葡萄</option>
<option value="苹果">苹果</option>
<option value="荔枝">荔枝</option>
<option value="香焦">香焦</option>
</select>

<script type="text/javascript">
$(function () {
$("select").bind("change", function () {
if ($(this).val() == "苹果")
$(this).css("background-color", "red");
else
$(this).css("background-color", "green");
})
});
</script>

与bind()方法相同，live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素，即使用代码添加的元素事件

$(selector).live(event,[data],fun)--参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。-------从 jQuery 1.7 开始，不再建议使用 .live() 方法

jquery动画特效

show()和hide()方法用于显示或隐藏页面中的元素，

$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])-----参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值

<div>
<h4>我喜欢吃的水果</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
<input id="hidval" type="hidden" value="0"/>
</div>

<script type="text/javascript">
$(function () {
$("h4").bind("click", function () {
if ($("#hidval").val() == 0) {
$("ul").show();
$("#hidval").val(1);
} else {
$("ul").hide();
$("#hidval").val(0);
}
});
});
</script>

调用show()和hide()方法仅是实现的元素的显示和隐藏功能，如果在这些方法中增加“speed”参数可以实现动画效果的显示与隐藏，同时，如果添加了方法的回调函数，它将在显示或隐藏执行成功后被调用

$(selector).toggle(speed,[callback])

<div>
<h4>
<span class="fl">我喜欢吃的水果</span>
<span class="fr" id="spnTip">显示</span>
</h4>
<ul>
<li>苹果</li>
<li>甘桔</li>
<li>梨</li>
</ul>
</div>

<script type="text/javascript">
$(function () {
var $spn = $("#spnTip");
$("h4").bind("click", function () {
$("ul").toggle(30,function(){
$spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏");
})
});
});
</script>

$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])

要注意的是：slideDown()仅适用于被隐藏的元素；slideup()则相反。

例如，调用slideUp()和slideDown()方法实现页面中元素的向上和向下的滑动效果，

使用slideToggle()方法可以切换slideUp()和slideDown()

$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback])

fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果，前者淡入隐藏的元素，后者可以淡出可见的元素，

$(selector).fadeTo(speed,opacity,[callback])

使用fadeTo()方法设置淡入淡出效果的不透明度

<body>
<h3>使用fadeTo()方法设置淡入淡出效果的不透明度</h3>
<span class="red"></span><span class="orange"></span><span class="blue"></span>

<script type="text/javascript">
$(function () {
$("span").each(function (index) {
switch (index) {
case 0:
$(this).fadeTo(3000,0.2);
break;
case 1:
$(this).fadeTo(3000,0.4);
break;
case 2:
$(this).fadeTo(3000,0.6);
break;
}
});
});
</script>
</body>

span
{
width: 70px;
height: 70px;
float: left;
border: solid 1px #ccc;
margin: 0px 8px;
}
.red
{
background-color: Red;
}
.orange
{
background-color:Orange;
}
.blue
{
background-color: Blue;
}

调用animate()方法制作简单的动画效果

$(selector).animate({params},speed,[callback])

其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名

<span></span>
<div id="tip"></div>

<script type="text/javascript">
$(function () {
$("span").animate({
width: "80px",
height: "80px"
},
3000, function () {
$("#tip").html("执行完成!");
});
});
</script>

调用animate()方法制作移动位置的动画

在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。

<body>
<h3>制作移动位置的动画</h3>
<span></span>
<div id="tip"></div>

<script type="text/javascript">
$(function () {
$("span").animate({
left: "+=100px"
}, 3000, function () {
$("span").animate({
height: '+=30px',
width: '+=30px'
}, 3000, function () {
$("#tip").html("执行完成!");
});
});
});
</script>
</body>

span
{
position:absolute;
width:80px;
height:80px;
border: solid 1px #ccc;
margin: 0px 8px;
background-color: Red;
color:White;
vertical-align:middle
}

调用stop()方法停止当前所有动画效果

$(selector).stop([clearQueue],[goToEnd])

两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。

<span></span>
<input id="btnStop" type="button" value="停止" />
<div id="tip"></div>

<script type="text/javascript">
$(function () {
$("span").animate({
left: "+=100px"
}, 3000, function () {
$(this).animate({
height: '+=60px',
width: '+=60px'
}, 3000, function () {
$("#tip").html("执行完成!");
});
});
$("#btnStop").bind("click", function () {
$("span").stop ();
$("#tip").html("执行停止!");
});
});
</script>

调用delay()方法延时执行动画效果

$(selector).delay(duration)其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执行

<span></span>
<input id="btnStop" type="button" value="延时" />
<div id="tip"></div>

<script type="text/javascript">
$(function () {
$("span").animate({
left: "+=100px"
}, 3000, function () {
$(this).animate({
height: '+=60px',
width: '+=60px'
}, 3000, function () {
$("#tip").html("执行完成!");
});
});
$("#btnStop").bind("click", function () {
$("span").delay(2000)
$("#tip").html("正在延时!");
});
});
</script>

自己独立使用编写时还是有问题

posted @ 2015-01-16 15:15 zzpin 阅读(187) 评论(0) 收藏举报

刷新页面返回顶部

zzpin