首页 > 代码库 > jqurey基础一
jqurey基础一
jqurey1
用法
笔记
jqurey
- API的使用
- jqurey的详细介绍
API的使用
引入包名
- <script src = "jquery-1.11.1.min.js"><script>
-
- <script src = "jquery-1.11.1.min.js"><script>
入口函数
方式1
- $(document).ready(function (){
- alert("入口函数1");
-
- });
方式2
- $(function(){
- alert("入口函数2");
- });
- $(function(){
事件的处理程序
- <script src=http://www.mamicode.com/"包名"> </script>
- <script>
- $(function(){
- $("#demo").click(function(){
- alert("btn事件处理程序");
- $("btn").click(function(){
- $("div").hide
- });
- });
- });
- </script>
- //html文件13297974522
- <input type = "button" value="按钮" id="btn"/>
- <div></div>
- <script src=http://www.mamicode.com/"包名"> </script>
jqurey的详细介绍
JS入口函数跟jquery入口函数的区别:
JS的window.onload事件是等到所有的内容,以及我们的外部图片之类的文件加载完之后,才回去执行
jQuery的入口函数是在html所有标签都加载之后,就回去执行.
jquery基本选择器
基本选择器 | ||
---|---|---|
符号 | 说明 | 用法 |
$("#demo") | 选择id为demo的第一个元素 | $("demo").css("background","red")修改了id为demo元素的CSS样式 |
$(".style") | 选择所有类名为style的元素 | $(".style").css("background","yellow")修改了class为style的所有元素的样式 |
$("div") | 选择标签为div的所有元素 | $("div").css("background","blue") |
$("*") | 选择所有元素,一般很少用 | $("*").css("background","green"); |
$("div ,.sty") | 复合选择器,选择所有的div元素和类名为sty的元素 | $("div ,.sty").css("background","blue") |
jQuery的其他选择器(层级选择器)
层级选择器 | ||
---|---|---|
符号 | 说明 | 用法 |
空格 | 后代选择器,选择所有的后代元素 | $("div span").css("background","red"); |
> | 子代选择器,选择所有的子代选择器 | $("div>p").css("background","yellow"); |
+ | 选择紧邻着的下一个元素 | $("div + p").css("background","blue"); |
~ | 兄弟选择器,选择兄弟后面的所有元素 | $("div ~ h1").css("background","yellow") |
------------- | ------------- | ------------- |
过滤选择器的使用
过滤选择器的使用 | |||
---|---|---|---|
选择器 | 描述 | 返回 | 示例 |
:first | 选取第一个元素 | 单个元素 | $("first:div").css("background","red");选取所有DIV元素中的第一个元素 |
:last | 选取最后一个元素 | 单个元素 | $("last:div").css("background","red"); |
:not(select) | 去除所有与给定选择器匹配的元素 | 集合元素 | $("div:not(.myClass)")选取class不是myClass的div元素 |
:even | 选取索引(从0开始)是偶数的所有元素 | 集合元素 | $("div:even").css("background","red"); |
: odd | 选取索引(从0开始)是奇数的所有元素 | 集合元素 | $("div: odd").css("background","blue"); |
:lt(index) | 选取索引(从0开始)小于index的所有元素 | 集合元素 | $("div:lt(2)").css("background","red") |
:gt | index是从0开始,选取大于index值得所有元素 | 集合元素 | $("div:gt(1)".css("background","blue")) |
:eq(index) | index是从0开始,选取等于index值得元素 | 单个元素 | $("div:eq(2)".css("background","blue"); ) |
jqurey基础一
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。