目录
一、尺寸
拿到JQuery对象后，调用宽度和高度的方法；例如,调用宽度的方法有：width，innerWidth，outerWidth
<style>
div{
width: 300px;
height: 350px;
border: solid 3px red;
padding-left: 50px;
margin-left: 30px;
}
</style>
<script src="../js/jquery-1.11.min.js"></script>
<script>
$(function(){
var txt = "宽度："+$("div").width()+"<br/>";
txt += "宽度+内边距："+$("div").innerWidth()+"<br/>";
txt += "宽度+内边距+边框："+$("div").outerWidth()+"<br/>";
txt += "宽度+内边距+边框+外边距："+$("div").outerWidth(true)+"<br/>";
$("div").html(txt);
})
</script>
<div></div>二、Jquery遍历
在JQuery中的遍历，我们可以理解为去查找指定规则的元素或子元素或父元素
1.找祖先
ript type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
//$("p").parent().css("height","100px"); //找直接父亲
//$("p").parents().css("height","100px"); //找祖先
//指定的祖先加效果
//$("p").parents("#parent").css("height","100px");
//p和body之间加效果
$("p").parentsUntil("body").css("height","100px");
})
</script>
<div id="parent">
<div id="son">
<p>段落1</p>
</div>
</div>2.找后代
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
//找直接儿子
//$("#parent").children().css("height","100px");
//找为p的直接儿子
//$("#parent").children("p.a").css("height","100px");
//找后代为p的
//$("#parent").find("p").css("height","100px");
//找所有后代
$("#parent").find("*").css("height","100px");
})
</script>
<div id="parent">
<div id="son">
<p>段落1</p>
</div>
<p class="a">段落2</p>
<p>段落3</p>
<h4>标题四</h4>
</div>3.找兄弟
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
//找所有兄弟
//$(".a").siblings().css("height","100px");
//找兄弟#son
//$(".a").siblings("#son").css("height","100px");
//找下一个兄弟
//$(".a").next().css("height","100px");
//找下面所有兄弟
//$(".a").nextAll().css("height","100px");
//在两者之间的兄弟
//$("#son").nextUntil("h4").css("height","100px");
//找上一个...和下一个类似
$("h4").prev().css("height","100px");
})
</script>
<div id="parent">
<div id="son">
<p>段落1</p>
</div>
<p class="a">段落2</p>
<p>段落3</p>
<h4>标题四</h4>
</div>4.过滤
<script>
$(function(){
//找第一个p
//$("p").first().css("height","100px");
//找最后一个p
//$("p").last().css("height","100px");
//找第几个p，下标从0开始
//$("p").eq(1).css("height","100px");
//选择为.a的p，其他的过滤掉
//$("p").filter(".a").css("height","100px");
//p中不包括.a
$("p").not(".a").css("height","100px");
})
</script>
<div id="parent">
<p>段落1</p>
<p class="a">段落2</p>
<p>段落3</p>
<h4>标题四</h4>
</div>5.遍历元素
遍历元素，类似于js中的for循环，挨个循环遍历出元素
遍历方法：each(function(i, obj){}) 参数1：下标 参数2：元素对象
<!--案例1：为多个图片绑定点击事件，点击指定的，变为另一张图片，并指定好，选中的是第几张
分析：循环遍历图片后，即可知道选中的是第几张图片：each
-->
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$(function(){
$("img").each(function(i,obj){
//指定的图片的点击事件
$(this).click(function(){
//指定的图片被改
//$(this).attr("src","../img/java.jpg");
obj.src="../img/java.jpg";
console.log(i);
})
})
})
</script>
<img src="../img/002.png" width="200px" height="300px" />
<img src="../img/003.png" width="200px" height="300px" />
<img src="../img/004.png" width="200px" height="300px" />三、选择器扩展
概述：选择器的扩展，都是在选择器里面进行的复合操作；也就是$(选择器)，里面进行复合操作
1.层次选择器
<script>
$(function(){
//层次选择器：后代，子代，相邻兄弟，后面兄弟
//$("ul a").css("color","red"); //后代的a都起作用
//$("ul>a").css("color","red"); //子代的a都起作用
//$("#aa+li").css("color","red"); //相邻兄弟起作用
//$("#aa~li").css("color","red"); //后面兄弟起作用
$("#bb~li").css("color","red"); //后面兄弟起作用
})
</script>
<ul>
<li id="aa"><a>床前明月光</a></li>
<li id="bb"><a>疑是地上霜</a></li>
<li><a>举头望明月</a></li>
<a>低头思故乡</a>
</ul>2.简单过滤选择器
简单过滤包含：:fist, :last, :eq(), :not(),:even, :odd...
注意：过滤选择器都是以:开头的
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
//$('ul>li:first').css("color","red"); //找第一个
//$('ul>li:last').css("color","red"); //找最后一个
//$('ul>li:eq(2)').css("color","red"); //找下标为2的
//$('ul>li:gt(1)').css("color","red"); //找大于第1个
//案例：隔行换色：偶数行红，奇数行绿 ,第一行不变色
$('ul>li:even:not(:first)').css("color","red"); //偶数行红 下标从0开始
$('ul>li:odd').css("color","green"); //奇数行绿
</script>3.内容选择过滤器
内容过滤针对于标签中的基本值，例如：基本值
包括：contains, empty, parent...
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
$("div:contains('John')").css("color","red");
</script>4.属性过滤选择器
<h1 id="aa" name='zs'>我的标题1</h1>
<h1 id="bb" name="zsf">我的标题2</h1>
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
//$("h1[id]").css("color","red"); //包含id属性
//$("h1[id][name^='zs']").css("color","red"); //name以zs开头
$("h1[id][name*='sf']").css("color","red"); //包含sf的
</script>5.表单过滤选择器
表单过滤，往往是通过type属性获取元素的jquery对象 例如,:text,就拿到了type为text的元素
<form>
用户名：<input type="text" disabled="disabled" /><br />
密码： <input type="password" /><br />
性别:<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" />女<br />
爱好:<input type="checkbox" />吃
<input type="checkbox" />喝<br />
省份：<select>
<option>湖南</option>
<option selected="selected">湖北</option>
</select><br />
<input type="submit" value="提交" />
</form>
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
/* 表单的过滤 */
//$("input").css("display","none"); //input标签隐藏
//$(":input").css("display","none"); //表单所有子控件都隐藏
//$(":text").css("display","none"); //type为text标签隐藏
//$(":radio").css("display","none"); //type为radio标签隐藏
/* 表单属性过滤 */
//$(":enabled").css("display","none"); //可用的控件隐藏
//$(":disabled").css("display","none"); //不可用的控件隐藏
//$(":checked").css("display","none"); //选中的控件隐藏
$(":selected").css("display","none"); //下拉选中隐藏
</script>四、综合案例
1.学科分类
//学科分类：
//1.点击学科分类，隐藏内容，再点击学科分类则显示内容，且右上角图片可切换
$("#head").click(function(){
//判断是否为块级，如果是，则隐藏
if($("#content").css("display")=="block"){
$("#content").css("display","none");
$("#head>span>img").attr("src","../img/open.gif");
}else{
$("#content").css("display","block");
$("#head>span>img").attr("src","../img/close.gif");
}
})
//2.点击‘简化’则显示内容较少，点击‘更多’，则显示更多选项
$("#btn>a").click(function(){
if($(this).html()=="简化"){
$(this).html("更多");
$("ul>li:gt(5):not(:last)").css("display","none");
}else{
$(this).html("简化");
$("ul>li:gt(5)").css("display","block");
}
})2.选项卡功能
//案例：实现选项卡功能：点击选项卡，可切换选项对应内容
//分析：
//1.点击事件，先清除tab的class；再将指定的li加class
//2.点击时，对应的content都清除，指定下标的content的li加class
$("#tab>li").each(function(i,obj){
$(this).click(function(){
$("#tab>li").removeClass("tabFocus"); //清所有
$(this).addClass("tabFocus"); //选中的添加class
$("#content>li").removeClass("contentFocus"); //清所有
$("#content>li:eq("+i+")").addClass("contentFocus");
})
})3.全选功能
//1.全选功能的点击
$("#chkAll").click(function(){
//prop获取checked的属性为true或false
$(":checkbox:not('#chkAll')").prop("checked",$("#chkAll").prop("checked"))
})
//2.选中单个复选框功能
var arr = $(":checkbox:not('#chkAll')");
arr.click(function(){ //单个复选框的点击
var sel = $(":checked:not('#chkAll')"); //选中的元素
//全选功能要选中或不选中
$("#chkAll").prop("checked",arr.length==sel.length);
})
//3.删除选中选项
$("#btnDel").click(function(){
var sel = $(":checked:not('#chkAll')"); //选中的元素
var tr = sel.parent().parent(); //获取选中的父亲
tr.remove(); //删除当前和子元素
arr = $(":checkbox:not('#chkAll')"); //重新单选个数元素赋值
})五、Jquery冲突处理
JQuery中需要通过$符号去获取JQuery对象，但往往$在其他框架中也会用到，这时可能会产生冲突；
所以，在JQuery中提供了三种处理JQuery冲突的方案
<script type="text/javascript" src="../js/jquery-1.11.min.js" ></script>
<script>
//方案1： $失效，直接写全jquery对象的应用
/*
$.noConflict(); //让$失效
jQuery(function(){
jQuery("input").click(function(){
alert("hello");
})
})*/
//方案2：改别名
/*
var jq = $.noConflict(); //接收$的别名
jq(function(){
jq("input").click(function(){
alert("方案2");
})
})*/
//方案3：$传参->变为了局部变量的使用方式
$.noConflict(); //让$失效
jQuery(function($){ //函数体中传参-$为局部变量
$("input").click(function(){
alert("方案3");
})
})
</script>
<input type="button" value="冲突处理" />
扫一扫
707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
