jQuery简介
他是封装了js和dom的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
有关选择器的jQuery代码
1.基本选择器
$("#id") //ID选择器
$("div") //元素选择器
$(".classname") //类选择器
$(".classname,.classname1,#id1") //组合选择器
2.层次选择器
$("#id>.classname ") //子元素选择器
$("#id .classname ") //后代元素选择器
$("#id + .classname ") //紧邻下一个元素选择器
$("#id ~ .classname ") //兄弟元素选择器
3.过滤选择器(重点)
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
$("li:eq(4)") //下标等于4的li
$("li:gt(2)") //下标大于2的li
$("li:lt(2)") //下标小于2的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
3.2内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的元素
$("td:empty") //不包含子元素或者文本的空元素
$("div:has(selector)") //含有选择器所匹配的元素
$("td:parent") //含有子元素或者文本的元素
3.3可见性过滤选择器
$("li:hidden") //匹配所有不可见元素，或type为hidden的元素
$("li:visible") //匹配所有可见元素
3.4属性过滤选择器
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
$("div[id^='qq']") // id属性值以qq开头的div 元素
$("div[id$='zz']") // id属性值以zz结尾的div 元素
$("div[id*='bb']") // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素
3.5状态过滤选择器
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
4.表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域jQuery设置css内容和属性
http://www.runoob.com/jquery/jquery-ref-html.html
设置内容
- text()
设置或返回所选元素的文本内容 - html()
设置或返回所选元素的内容（包括 HTML 标记） - val()
设置或返回表单字段的值
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});设置属性
jQuery attr() 方法也用于设置/改变属性值。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js2</title>
<style>
input[type = 'buttin'] {
}
</style>
</head>
<body>
<div id = 'id1'>123<a>12</a>3 </div>
<input name='username' type='text' value='9999'/>
<script src='js/jquery-3.2.1.js'> </script>
<script type = 'text/javascript'>
/*
var text = $('#id1').text();
var html = $('#id1').html();
console.log(text);
console.log(html);
$('#id1').text('feitain');
这里注意如果不加参数是取值，加上参数是修改
console.log(text);
*/
var data = $("input[name='username']").val()
$("input[name='username']").val('sb')
console.log(data)
//获取input标签下,name为username的
</script>
</body>
</html>通过jQuery 修改css标签
<body>
<div id = 'id1'>123<a>12</a>3 </div>
<input name='username' type='text' value='9999'/>
<script src='js/jquery-3.2.1.js'> </script>
<script type = 'text/javascript'>
var data = $("input[name='username']").attr('name');
console.log(data);
$("input[name='username']").attr('name','ok');
</script>
</body>- 将input标签下面类型为checkbox的类型的框默认勾选
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js2</title>
<style>
input[type = 'buttin'] {
}
</style>
</head>
<body>
游戏<input type='checkbox' />
<script src='js/jquery-3.2.1.js'> </script>
<script type = 'text/javascript'>
$("input[type='checkbox']").prop('checked',true);
//如过checked被替换成disable,不可用，就是只显示。如果没有设置true,默认是false，不勾选，
</script>
</body>
</html>
- 批量添加c2标签
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js2</title>
<style>
.c1 {
border:2px solid #999;
}
.c2 {
font-size:58px;
}
</style>
</head>
<body>
<script src='js/jquery-3.2.1.js'> </script>;
<div class='c1'>dddddd</div>;
<div class='c1'>sdf</div>;
<div class='c1'>sdssssf</div>;
<script type = 'text/javascript'>;
$('.c1').addClass('c2');
</script>
</body>
</html>- 交替进行对c2标签的添加和不添加(通过按钮)
http://www.runoob.com/jquery/jquery-css-classes.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js2</title>
<style>
.c1 {
border:2px solid #999;
}
.c2 {
font-size:58px;
}
</style>
</head>
<body>
<script src='js/jquery-3.2.1.js'> </script>
<div class='c1'>dddddd</div>
<div class='c1'>sdf</div>
<div class='c1'>sdssssf</div>
<input onclick='Foo();' type='button' value='点我呀';>
<script type = 'text/javascript'>
function Foo() {
$('.c1').toggleClass('c2');
}
</script>
</body>
</html>jQuery css()方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css(“propertyname”);
- 下面的例子将返回首个匹配元素的 background-color 值：
$(“p”).css(“background-color”);
设置 CSS 属性
如需设置指定的 CSS 属性，请使用如下语法：
css(“propertyname”,”value”);
- 下面的例子将为所有匹配元素设置 background-color 值：
$(“p”).css(“background-color”,”yellow”);
设置多个 CSS 属性
如需设置多个 CSS 属性，请使用如下语法：
css({“propertyname”:”value”,”propertyname”:”value”,…});
- 下面的例子将为所有匹配元素设置 background-color 和 font-size：
$(“p”).css({“background-color”:”yellow”,”font-size”:”200%”});
通过jQuery修改
返回顶部的小工具
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js3</title>
<style>
.returnTop {
position:fixed;
width:70px;
right:20px;
bottom:20px;
background-color:red;
}
.hide {
display:none;
}
</style>
</head>
<body>
<div id='return_top' class='returnTop hide' onclick='Go();'>返回顶部</div>
<script src='js/jquery-3.2.1.js'> </script>
<div style='height:3000px;'>dddddd</div>
<script type = 'text/javascript'>
$(function() {
//页面加载完成(指的是页面的框架加载完成,图片不加载，但是图片的位置预留)后，默认执行次函数；
})
$(window).scroll(function() {
//console.log(123);
var height = $(window).scrollTop();
if (height>0) {
$('#return_top').removeClass('hide');
}
else {
$('#return_top').addClass('hide');
}
});
function Go() {
$(window).scrollTop(0);
}
</script>
</body>
</html>- 另一种写法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js3</title>
<style>
.returnTop {
position:fixed;
width:70px;
right:20px;
bottom:20px;
background-color:red;
}
.hide {
display:none;
}
</style>
</head>
<body>
<div id='return_top' class='returnTop hide'>返回顶部</div>
<script src='js/jquery-3.2.1.js'> </script>
<div style='height:3000px;'>dddddd</div>
<script type = 'text/javascript'>
$(function() {
//页面加载完成(指的是页面的框架加载完成,图片不加载，但是图片的位置预留)后，默认执行次函数；
$('#return_top').click(function() {
$(window).scrollTop(0);
})
})
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height>0) {
$('#return_top').removeClass('hide');
}
else {
$('#return_top').addClass('hide');
}
});
</script>
</body>
</html>
jQuery属性
http://www.runoob.com/jquery/jquery-dimensions.html
jQuery文档处理
- jQuery append() 方法
append() 方法在被选元素的结尾插入指定内容。
$(selector).append(content,function(index,html))
<body>
<p> i would like to say:</p>
<input type='button' id='addId1' value='追加1'/>
<input type='button' id='addId2' value='追加2'/>
<script src='js/jquery-3.2.1.js'> </script>
<script type = 'text/javascript'>
$(function() {
$('#addId1,#addId2').click(function() {
//获取当前点击的标签，可以是追加1也可以是追加2,$(this)就代表当前点击的标签。
var currentId = $(this).attr('id');
if (currentId == 'addId1') {
$('p').append('feitian');
}
else {
$('p').append('loveyu');
}
})
})
</script>
</body>
jQuery的HTML和CSS方法
http://www.runoob.com/jquery/jquery-ref-html.html
- jQuery appendTo() 方法
$(content).appendTo(selector)
appendTo() 方法在被选元素的结尾插入 HTML 元素。
在每个 <p> 元素的结尾插入 <span> 元素：
$("button").click(function(){
$("<span>Hello World!</span>").appendTo("p");
});- jQuery after() 方法
after() 方法在被选元素后插入指定的内容。
$(selector).after(content,function(index))
在每个 <p> 元素后插入内容：
$("button").click(function(){
$("p").after("<p>Hello world!</p>");
});- jQuery empty() 方法
empty() 方法从被选元素所有子节点和内容。
注意：该方法不会移除元素本身，或它的属性。
提示：如需移除元素，但保留数据和事件，请使用 detach() 方法。
提示：如需移除元素及它的数据和事件，请使用 remove() 方法。
$(selector).empty()
移除所有 <div> 元素的内容：
$("button").click(function(){
$("div").empty();
});jQuery的筛选(这里就是获取标签对象)
- jQuery filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
返回带有类名 "url" 的所有 <p> 元素：
$(document).ready(function(){
$("p").filter(".url");
});- jQuery next() 方法和prev()方法
next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。prev()方法就是前一个
返回 <h2> 的下一个同胞元素：
$(document).ready(function(){
$("h2").next();
});- jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
返回每个 <span> 元素的的直接父元素：
$(document).ready(function(){
$("span").parent();
});- jQuery children()方法
children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
返回每个 <div> 元素的所有直接子元素：
$(document).ready(function(){
$("div").children();
});- jQuery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素。
返回 <h2> 的所有同胞元素：
$(document).ready(function(){
$("h2").siblings();
});
174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
