- jQuery 函数位于一个 document ready 函数中：例如这样:
$(document).ready(function(){
// 开始写 jQuery 代码...
});
可以简写
$(function(){
// 开始写 jQuery 代码...
});
-
jquery选择器
获取 id 元素 $("#test").hide(); 获取class元素 $(".test").hide();
image.png
：可以理解为种类的意思 [] 可以理解为属性。。。
3.事件 focus() 聚焦事件 blur()失去焦点事件。一般用于搜索框。 输入框中。键盘代码事件
var validKeys = { start: 65, end: 90 }; //只对 keycode在 65 到90 之间的按键的按下处理、、
$("#keys").keydown( validKeys, function(event){
var keys = event.data; //拿到validKeys对象.
return event.which >= keys.start && event.which <= keys.end;
} );
4.显示或隐藏元素
显示或隐藏 $("p").toggle(); $(selector).toggle(speed,callback);
1. .$(selector)选中的元素的个数为n个，则callback函数会执行n次；
<p>1.测试hide</p>
<p>2.测试hide</p>
<p>3.测试hide</p>
<button id="hide_p">点我</button>
$("#hide_p").click(function(){
$("p").hide(100,function(){
console.log(111); /// 输出三次
});
});
5.淡入淡出效果
$("#div2").fadeToggle("slow"); ："slow"、"fast" 或毫秒。 或空、 $(selector).fadeTo(speed,opacity,callback); 设置元素的透明度。
-
$('#pannel').slideToggle(); 上下滑动。
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
7.组合动画$('#anim_btn').click(function(){ $(".anim_content").animate({ left:'250px', ///向右移动。 opacity:'0.5', height:'150px',//// 可以这样写 height :'+= 150px'; 相对于当前值。 width:'150px' }); });
组合动画2 。
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
$("button").click(function(){
$("div").animate({
height:'toggle' //预定义的值
});
});
停止所有的动画效果。 停止动画或效果，在它们完成之前。 stop();
7.链式写法
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
- 操作dom
三个简单实用的用于 DOM 操作的 jQuery 方法：
alert("Text: " + $("#test").text());text() - 返回这个值
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
$('#btn1').click(function(){
$('#test1').text('11111');
});
$('#btn2').click(function(){
$('#test2').html('<strong>11111</strong>');
});
$('#btn3').click(function(){
$('#test3').val('11111');
});
设置属性值 ：
<a href="http://www.baidu.com">;
</a>
$('#test4').attr({
"src":"截图00.png"，
“width”:"100px"
});
alert($("#runoob").attr("href")); 显示 属性值。。
$("#runoob").attr("href", function(i, origValue){
return origValue + "/jquery";
});
9.添加元素
function appendText()
{
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
append() 。之后 。prepend之前
append/prepend 与 before/after 的区别
append :
<p>
<span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>
结果是:
<p>
<span class="s1">s1</span>
<span class="s2">s2</span>
</p>
after
<p>
<span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>
结果是:
<p>
<span class="s1">s1</span>
</p>
<span class="s2">s2</span>
append 在元素内部嵌入
after 在元素外部追加
10.删除元素/删除元素及其子元素。
remove() 删除当前元素及其子元素，。。
empty() 清空子元素。。。父视图 还是存在的。
$("p").remove(".italic"); 移除所有class = italic的p 元素
11.添加或移除css样式
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
removeClass('blue');
$("button").click(function(){
$("h1,h2,p").toggleClass("blue"); //存在则删除。存在则添加
});
12.设置返回元素的css属性
$("p").css("background-color");// 这里只能返回第一个
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
13.尺寸
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法设置或返回元素的宽度（包括内边距）。
innerHeight()方法设置或返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框，不包含外边距）。
outerHeight() 方法返回元素的高度（包括内边距和边框，不包含外边距）。
14.遍历
parent() 直接父元素
parents()所有父元素
$("span").parents("ul").css({"color":"red","border":"2px solid red"}); 父元素中是ul的给设置css属性
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$("span").parentsUntil("div");
$("div").children(); 直接子元素
$("div").children("p.1"); 直接子元素中 class ="1"的p
$("div").find("span"); 返回属于 <div> 后代的所有 <span> 元素：
$("div").find("*"); 所有子元素...
$("div p").first(); div中的第一个p元素
$("div p").last();
$("p").eq(1); 第二次出现的p元素。
$("div p").filter(".url").css("background-color","yellow");
$("#123 p").filter(".url").css("background-color","yellow"); <div id="123">
$("p").not(".url"); 与filter相反。。。
网友评论