jquery框架学习(keep update)

最新推荐文章于 2022-07-01 21:46:25 发布

租房请下载：房东直租APP

最新推荐文章于 2022-07-01 21:46:25 发布

阅读量1.4k

点赞数 1

分类专栏：我的框架文章标签： jquery 学习选择器 dom 函数

本文链接：https://blog.csdn.net/AinUser/article/details/72809042

版权

我的框架专栏收录该内容

7 篇文章 0 订阅

订阅专栏

[html]view plaincopy

jquery在日常的开发中，是较为常用的一种技术，所以今天也不算较为系统详细的学习吧。
主要是对jquery当中，许多常用的方法进行学习和总结吧
jquery当中主要的特点就是：选择器，js当中呢，主要就是dom树结构。
下面就不多说了，开始我们jquery当中方法的学习。

[html]view plaincopy

①：触发函数的两种方式：
<script type="text/javascript">
/* 函数触发方式一 */
$(function(){
//$(type="[name='method1']").click(function(){
$("button").click(function(){
$(this).hide();
});
});
/* 函数触发方式二 */
function onClick(){
$("p").slideToggle();
}
</script>
</head>

<body>
<button name="method1">函数触发方式一:点击按钮一隐藏</button>
<input type="button" οnclick="onClick();" value="函数触发方式二:点击文字隐藏"/>
<p>i am show content!</p>
</body>

[html]view plaincopy

②：选择器的使用：
选择器一共分为4中：
基本选择器（id选择器，类选择器，标签选择器，多路选择器）
层次选择器（后代选择器，儿子选择器，后续所有兄弟选择器，第一个兄弟选择器）
表单选择器过滤选择器（简单过滤选择器，内容过滤选择器，可见性过滤选择器，属性过滤选择器，子元素过滤选择器，表单对象属性过滤选择器）
1）基本选择器
<script type="text/javascript">
/* 基本选择器 */
/* id选择器 */
/* $(function(){
$("#btn").click(function(){
$("p").slideToggle();
})
}) */
/* 类选择器 */
/* $(function(){
$(".btn").click(function(){
$("p").hide();
})
}) */
/* 标签选择器 */
/* $(function(){
$("input").click(function(){
$("p").slideToggle();
})
}) */
/* 多路选择器 */
/* $(function(){
$("p ,.btn").click(function(){
alert("ni dian ji l wo !");
});
}) */
</script>
</head>
<body>
<div id="controller">
<input id="btn" class="btn" type="button" value="点击文字隐藏"/>
<p>i am show content!</p>
</div>
</body>
2）层次选择器
<script type="text/javascript">
/* 后代选择器 (后代)*/
/* $(function(){
$("#controller input,p").click(function(){
alert("你使用的是后代选择器");
})
}) */
/* 儿子选择器（兄弟）*/
/* $(function(){
$("#controller > p,button").click(function(){
alert("你使用的是儿子选择器");
})
}) */
/* 后续所有兄弟选择器 */
$(function(){
$("#controller ~ div").click(function(){
alert("你选择的是后续所有兄弟选择器!");
})
})
/* 下一个兄弟选择器 */
$(function(){
$("#controller + div").click(function(){
alert("你选择的是下一个兄弟选择器!");
})
})
</script>
</head>
<body>
<div>
<p>i am first p!</p>
</div>
<div id="controller">
<div>
<input id="btn" class="btn" type="button" value="点击文字隐藏"/>
<input id="btn2" class="btn2" type="button" value="点击文字隐藏2"/>
<p>i am son and son!</p>
</div>
<p>i am son!</p>
<button>i am son button</button>
</div>
<div id="controller2">
<input id="btn3" class="btn3" type="button" value="点击文字隐藏3"/>
<input id="btn4" class="btn4" type="button" value="点击文字隐藏4"/>
<p>i am show content2!</p>
</div>
<div id="controller3">
<button>i am button3!</button>
</div>
<button>i am brother button</button>
<p>i am brother p!</p>
</body>
3）过滤选择器
<script type="text/javascript">
/* 简单过滤器 */
$(function(){
/* :first的使用 */
//$("ul li:first").css("backgroundColor","red");

/* :last的使用 */
//$("ul li:last").css("backgroundColor","red");

/* :even的使用 */
//$("ul li:even").css("backgroundColor","red");

/* :odd的使用 */
//$("ul li:odd").css("backgroundColor","red");

/* :eq(0)的使用 */
//$("ul li:eq(0)").css("backgroundColor","green");

/* :gt(0)的使用 (获取大于指定索引的元素)*/
//$("ul li:gt(0)").css("backgroundColor","green");

/* :lt(0)的使用 (获取大于指定索引的元素)*/
//$("ul li:lt(0)").css("backgroundColor","blue");
})
</script>
</head>

<body>
<h1>基本选择器</h1>
<ul>
<li class="def">item0</li>
<li class="def">item1</li>
<li class="not">item2</li>
<li class="def">item3</li>
</ul>
<span id="sp">span</span>
</body>
4）内容过滤选择器
<script type="text/javascript">
/* 简单过滤器 */
/* :contains(text) (显示包含给定文本的元素) */
$(function(){
$("div:contains('E')").css("backgroundColor","red");
});

/* :empty (所有不包含子元素或者文本为null的元素) */
$(function(){
$("div:empty").css("backgroundColor","blue");
});

/* :has(selector) (含有选择器所匹配的元素的元素)*/
$(function(){
$("div:has(span)").css("backgroundColor","green");
});

/* :parent (所有含有子元素或者文本的元素)*/
$(function(){
$("div:parent").css("backgroundColor","purple")
});
</script>
</head>

<body>
<div>ABCD</div>
<div><span>qq</span></div>
<div>EPaH</div>
<div></div>
</body>
5）可见性过滤选择器
<script type="text/javascript">
/* 可见性过滤器 */
/* :hidden (获取所有不可见元素或者type为hidden的元素)*/
$(function(){
/* 使隐藏的元素显示出来 */
/* $("span:hidden").show(); */
/* 给显示的元素添加背景 */
/* $("div:visible").css("backgroundColor","red"); */
/* 使隐藏的元素显示并且添加背景颜色 */
$("span:hidden").show().css("backgroundColor","yellow");
})
</script>
</head>

<body>
<span style="display:none">Hidden</span>
<div>visible</div>
</body>
6）属性过滤选择器
<script type="text/javascript">
/* 属性过滤选择器 */
$(function(){
/* [attribute] (获取包含给定属性的元素) */
//$("div[id]").hide(2000);
/* [attribute=value] (获取等于给定的属性是某个特定值的元素) */
//$("div[title='A']").hide(2000);
/* [attribute!=value] (获取不等于给定的属性是某个特定值的元素) */
//$("div[title!='A']").hide(2000);
/* [attribute^value] (获取给定的属性是以某些值开始的元素) */
//$("div[title^='A']").hide(2000);
/* [attribute$=value] (获取给定的元素是以某些值结尾的元素) */
//$("div[title$='A']").hide(2000);
/* [attribute*=value] (获取给定的属性是以包含某些值的元素) */
//$("div[title*='C']").hide(2000);
/* [selector1][selector2]... (获取满足多个条件的符合属性的元素) */
$("div[id$='B'][title*='B']").hide(2000);(两个筛选器之间不可以有空格)
})
</script>
</head>

<body>
<div id="divID">ID</div>
<div id="divB" title="A">title a</div>
<div id="divAB" title="AB">id</div>
<div title="ABC">title abc</div>
</body>
7）子元素过滤选择器
<script type="text/javascript">
/* 子元素过滤选择器 */
$(function(){
/* :nth-child(2) (获取每个父元素下的特定位置元素，索引从1开始) */
//$("li:nth-child(2)").hide(1000);
/* :first-child (获取每个父元素下的第一个元素) */
$("li:first-child").css("backgroundColor","red");
/* :last-child (获取每个父元素下的最后一个子元素) */
//$("li:last-child").hide(2000);
/* :only-child (获取每个父元素下的仅有的一个子元素) */
//$("li:only-child").hide(2000);
})
</script>
</head>

<body>
<ul>
<li>1-0</li>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
<ul>
<li>2-0</li>
<li>2-1</li>
<li>2-2</li>
<li>2-3</li>
</ul>
</body>
8）表单对象属性过滤选择器
<style type="text/css">
.GetFocus{
background-color:red;border:solid 1px yellow
}
</style>
<script type="text/javascript">
/* 表单对象属性过滤选择器 */
$(function(){
/* :enabled (获取表单中所有属性为可用的元素) */
$("#form1 input:enabled").addClass("GetFocus")
/* :disabled (获取表单中所有属性为不可用的元素) */
//$("#form1 input:disabled").hide(2000);
/* :checked (获取表单中所有被选中的元素) */
//$("#form1 input:checked").hide(2000);
/* :selected (获取表单中所有被选中option的元素) */
//$("#span2").html("选中的选项是:"+$("select option:selected").text())
})
</script>
</head>

<body>
<form id="form1" style="width:241px;">
<div id="divA">
<input type="text" value="可用文本框"/>
<input type="text" disabled="disabled" value="不可用文本框"/>
</div>
<div id="divB">
<input type="checkbox" checked="checked" value="1"/>选中
<input type="checkbox" value="0"/>未选中
</div>
<div id="divC">
<select mutiple="mutiple">
<option value="0">item0</option>
<option value="1" selected="selected">item1</option>
<option value="2">item2</option>
<option value="3" selected="selected">item3</option>
</select>
<span id="span2"></span>
</div>
</form>
</body>
9）表单选择器
下午搬家帮忙去

[html]view plaincopy

②：鼠标点击的四种方式：/隐藏元素

第一种方式：

1

2

3

4

 
           $(document).ready( 
           function 
           (){ 
          
           $( 
           "#clickme" 
           ).click( 
           function 
           (){ 
          
           alert( 
           "Hello World click" 
           ); 
          
           });

第二种方式：

1

2

3

 
           $( 
           '#clickmebind' 
           ).bind( 
           "click" 
           , 
           function 
           (){ 
          
 
           alert( 
           "Hello World bind" 
           ); 
          
 
           }); 
          

第三种方式：

1

2

3

4

 
           $( 
           '#clickmeon' 
           ).on( 
           'click' 
           , 
           function 
           (){ 
          
           alert( 
           "Hello World on" 
           ); 
          
           }); 
          
           });