jQuery学习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

TonyaBaSy

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量216

点赞数

分类专栏： web 文章标签： jquery

本文链接：https://blog.csdn.net/sinat_34657451/article/details/51340236

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基本选择器

选择器是用来从HTML文档中选择一个或者一组标签。
“#id”：id选择器，通过 id 属性来进行选择。关键字“#”
“.class”：类选择器，通过 class 属性来选择标签。关键字“.”
“element”：标签选择器，只写 element 的名字，用来选择一组标签。注意：不用加尖括号。例如：$(“div”).addClass(“green”);
“element *”：选择指定 element 的全部子代。
“selector，selector…，selector”：多个简单的选择器叠加，用逗号隔开。例如：$(“div,p”).hide();

层次选择器

示例代码：
<body>
    <h3>attr()方法设置元素属性</h3>
    <p>body的子代。</p>
    <span id="1">hello</span>
    <span></span>
    <span></span>
    <span></span>
    <div>
        <p>div的子代。</p>
        <span id="2"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

“div p”：选择 div 所有的 p 子代“p1”和“p2”。
“body > p”：父子选择器。
“p + span”：邻居选择器，只选择所有符合条件组的第一个邻居，选择的是 <span id="1"> 和 <span id="2"> 标签。
“p ~ span”：邻居选择器加强版，选择所有组的所有邻居

过滤选择器

常常用来选择单个标签。属性过滤选择器，内容过滤选择器，元素过滤选择器比较好用，其他参考 jQuery中文网。例如：

$("span[id=2]").css("color","green");  //属性过滤选择器
$("span[id!=2]").css("color","green"); //属性过滤反选器
$("p:contain('div')").css("color","green");    //内容过滤选择器
$("span:has('id')").css("color","green");  //元素过滤选择器

表单选择器

涉及到 form 的选择器要加空格，就像这样 form。例如：
```
$("form :input").css("color","green");
```

表单选择器，选择的是各个表单的 type 属性。下面是几个示例：

$("form :password").css("color","green");  //选择type="password"的表单
$("form :radio").css("color","green");     //选择type="radio"的表单

:input选择器比较特殊，他选择的不仅仅是 <input> 标签，选择的是 input select textarea 标签。但是已经被 .filter(":input") 代替。

对DOM的操作

两种获取文本内容的方式比较

.html() 和 .text() 的区别在于，前者不仅仅获得文本，而且包括文本格式，而后者仅仅是获得纯文本。

ready 和 onLoad 的比较

ready的调用方式：$(document).ready(function(){...}) 或者可以写为 $(function(){...})

onLoad的调用方式： window.onLoad=function(){...}

所属不同：ready 为 jQuery 所有， onLoad 是原生JavaScript。
加载顺序不同：ready 函数是按 Dom 树的构建顺序，同 Script 标签一同加载执行的。onLoad 是在 Dom 树加载完成后，再进行执行。

jQuery事件

绑定事件：以前用 bind(event, function(){...}) 现在用 on。

$(this).bind("click change",function(){...});  //绑定多个事件时，同时放在第一个变量里，用空格隔开

toggle(functionA,functionB,...,functionX) 为点击事件绑定多个处理函数。

triggle(event) 手动触发一个事件，这个事件可以是自定义的，也可以是原有的。示例如下，绑定了一个自定义的事件 change-color 并且手动触发了它。

<script type="text/javascript">
$(function () {
    $("div").bind("change-color", function () {
        $(this).addClass("color");
    });
    $("div").trigger ("change-color");
});
</script>

bind() 的加强版————live()：它可以将事件绑定到动态元素(在 javascript 中动态创建的标签为动态标签)中。
一些常用事件：
- focus 和 blur：聚焦和取消聚焦是的两个事件
- hover：指针移入目标的触发该事件
- change：在选择框中，选择内容改变，或者文本内容改变时触发该事件

TonyaBaSy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记

基本选择器选择器是用来从HTML文档中选择一个或者一组标签。“#id”：id选择器，通过 id 属性来进行选择。关键字“#”“.class”：类选择器，通过 class 属性来选择标签。关键字“.”“element”：标签选择器，只写 element 的名字，用来选择一组标签。注意：不用加尖括号。例如：$(“div”).addClass(“green”);“element *”：选择指定
复制链接

扫一扫

专栏目录