一、用jquery寻找元素
1、选择器
基本选择器：
$("*")
$("#id") 用id匹配
$(".class") 用class名匹配
$("element") 用标签名匹配
$(".class,p,div") 组合匹配
层级选择器：
$(".outer div")
$(".outer>div")
$(".outer+div")
$(".outer~div")
基本筛选器：
$("li:first")
$("li:eq(2)")
$("li:even")
$("li:gt(1)")
属性选择器：
$(‘[id="div1"]‘) $(‘["new_name="zhang"][id]‘)
表单选择器：
$("[type=‘text‘]")----->$(":text")
其中用的最频繁的就是基本选择器和层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab功能</title>
<script src="jquery.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
line-height: 40px;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: darkgray;
color: yellow;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li new_name="c1" class="current" onclick="tab(this);">菜单一</li>
<li new_name="c2" onclick="tab(this);">菜单二</li>
<li new_name="c3" onclick="tab(this);">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
</body>
<script>
function tab(self){
var index=$(self).attr("new_name");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(self).addClass("current").siblings().removeClass("current");
}
</script>
</html>
tab标签切换例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title>
<style>
.menu{
height: 500px;
width: 30%;
background-color: gainsboro;
float: left;
}
.content{
height: 500px;
width: 70%;
background-color: rebeccapurple;
float: left;
}
.title{
line-height: 50px;
background-color: #425a66;
color: forestgreen;}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this);">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this);">菜单二</div>
<div class="con hide">
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this);">菜单三</div>
<div class="con hide">
<div>111</div>
<div>111</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
</body>
<script>
function show(self){
$(self).next().removeClass("hide");
$(self).parent().siblings().children(".con").addClass("hide");
}
</script>
</html>
菜单折叠例子
2、筛选器
过滤筛选器：
$("li").eq(2) 索引为2的li标签
$("li").first()
$("ul li").hasclass("test") 返回布尔值，判断是否有class属性
查找选择器：
$("div").children(".test") #查找class为test的子标签
$("div").find(".test") 查找节点下的所有class为test的标签
$(".test").next() #查找下一个兄弟标签
$(".test").nextAll()
$(".test").nextUntil()
$("div").prev() #查找上一个兄弟标签
$("div").prevAll()
$("div").prevUntil()
$(".test").parent() 查找父标签
$(".test").parents() 查找叔父标签
$(".test").parentUntil()
$("div").siblings() #查找所有兄弟标签
二、操作元素
1、属性操作
--------------------------属性
$("").attr(); 查找属性（可查自定义属性）
$("").removeAttr(); 删除属性
$("").prop(); 查找属性（只能查固有的属性）
$("").removeProp(); 删除固有属性
--------------------------CSS类
$("").addClass(class|fn) 增加class样式名
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn]) #查找子节点的html代码
$("").text([val|fn]) 查找文本值
$("").val([val|fn|arr]) 查找value值
---------------------------
$("").css("color","red") #添加修改css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
</head>
<body>
<button onclick="selectall();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
</body>
<script>
function selectall(){
$("table :checkbox").prop("checked",true)
}
function cancel(){
$("table :checkbox").prop("checked",false)
}
function reverse(){
$("table :checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
}
</script>
</html>
全选反选例子
2、文档处理
//创建一个标签对象
$("<p>")
//内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty()
$("").remove([expr])
//复制
$("").clone([Even[,deepEven]])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+" onclick="add(this);">
<input type="text">
</div>
</div>
<script src="jquery.min.js"></script>
<script>
//var $clone_obj=$(self).parent().clone(); // $clone_obj放在这个位置可以吗?
function add(self){
// 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val("-").attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){
$(self).parent().remove()
}
</script>
</body>
</html>
赋值样式条
3、css操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
.hide{
display: none;
}
.returnTop{
height: 30px;
width: 90px;
background-color: darkgray;
position: fixed;
color: greenyellow;
bottom: 30px;
right: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.div p{
height: 150px;
}
.div2{
background-color: darkcyan;
}
.div3{
background-color: aqua;
}
.div{
height: 500px;
}
.div1{
background-color: orchid;
font-size: 5px;
overflow: auto;
width: 500px;
}
</style>
</head>
<body>
<div class="div1 div">
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</div>
<div class="div2 div"></div>
<div class="div3 div"></div>
<div class="returnTop hide" onclick="returnTop();">返回顶部</div>
</body>
<script src="jquery.min.js"></script>
<script>
//监听一个window的滚轮事件
window.onscroll = function () {
//当滚轮像素大于200的时候显示返回顶部的标签
if($(window).scrollTop()>200){
$(".returnTop").removeClass("hide")
}else{
$(".returnTop").addClass("hide")
}
}
//将滚轮像素调整到0就是返回顶部了
function returnTop() {
$(window).scrollTop(0)
}
</script>
</html>
返回顶部
三、事件
页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})
事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
// $(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);})就是筛选出ul下的li给其绑定
// click事件；
[selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件；如：
//$(‘ul li‘).on(‘click‘, function(){console.log(‘click‘);})的绑定方式和
//$(‘ul li‘).bind(‘click‘, function(){console.log(‘click‘);})一样；我通过js给ul添加了一个
//li：$(‘ul‘).append(‘<li>js new li<li>‘)；这个新加的li是不会被绑上click事件的
//但是用$(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);}方式绑定，然后动态添加
//li:$(‘ul‘).append(‘<li>js new li<li>‘);这个新生成的li被绑上了click事件
[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)
http://www.cnblogs.com/yuanchenqi/articles/6070667.html
时间： 2024-08-24 02:16:22