jQuery学习笔记

最新推荐文章于 2023-07-25 07:50:51 发布
最新推荐文章于 2023-07-25 07:50:51 发布
阅读量854 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzti_erlie/article/details/53185421
版权

jQuery入门

基于jquery-3.1.1.js

<body>
<input type="button" value="button">
</body>
<script>
    $(function(){
        $("input").click(function(){
            alert("the button is clicked");
        });
    });
</script>

基础核心

常规选择器

简单选择器
这里写图片描述

<body>
<!--初始颜色为红色-->
    <div id="box" style="color: red;"><p>常规选择器</p></div>
    <div id="box" style="color: red;"><p>常规选择器</p></div>
    <div style="color: red;"><p>常规选择器</p></div>
</body>
<script>
// 修改为黑色，标签和类是一样的用法
    $("#box").css("color","black");
//不会报错
    $("#aaa").css("color","red");
//找不到会报错
    //document.getElementById("aaa").style.color = "red";
//输出3,id返回的单个，标签名和类是多个
    alert($("div").length);
//输出1
    alert($("#box").length);
</script>

进阶选择器
这里写图片描述
高级选择器
这里写图片描述

<body>
    <div class="tab1" style="color: red;">
        <p>tab1-p</p>
        <a href="#">tab1-a</a>
        <div>
            <p>123</p>
        </div>
    </div>
    <div class="tab2" style="color:red;">
        <p>tab2-p</p>
    </div>
    <div class="tab3" style="color:red;">
        <p>tab3-p</p>
    </div>
</body>
<script>
    //后代选择器,tab1里面的div的p也会发生变化
    $(".tab1 p").css("color","black");
    //等价find方法
    $(".tab1").find("p").css("color","yellow");
    //子选择器,tab1里面的div的p不会发生变化
    $(".tab1 > p").css("color","brown");
    //等价children方法
    $(".tab1").children("p").css("color","blue");
    //next选择器,和他同级的div标签变成黑色,只有tab2
    $(".tab1+div").css("color","black");
    //等价next方法
    $(".tab1").next("div").css("color","yellow");
    //nextAll选择器，同级的对象变成绿色，tab2和tab3都有
    $(".tab1 ~ div").css("color","green");
    //等价nextAll方法
    $(".tab1").nextAll("div").css("color","gray");
</script>

属性选择器
这里写图片描述

过滤选择器

基本过滤器
这里写图片描述

<body>
<ul>
    <li>下标0</li>
    <li>下标1</li>
    <li>下标2</li>
    <li>下标3</li>
    <li>下标4</li>
</ul>
</body>
<script>
    $("li:first").css("background","#ccc");
    //和上一个等价
    $("li").first().css("background","red");
    $("li:last").css("background","#ccc");
</script>

内容过滤器
这里写图片描述

<body>
<ul>
    <div>
        <p>123</p>
    </div>
    <div>
        <p>456</p>
    </div>
    <div class="red">
        <p>789</p>
    </div>
</ul>
</body>
<script>
    $('div:contains("123")').css("background","#ccc");
    //没有效果，不知道原因
    $('div:has(.red)').css("background","#ccc");
</script>

可见性过滤器
这里写图片描述

<body>
<p>123</p>
<p style="display: none">456</p>
<p style="display: none">123</p>
<p>456</p>
</body>
<script>
    //显示2
    alert($("p:hidden").length);
    //显示2，如果调用的size，则显示的是undefined
    alert($("p:visible").length);
</script>

子元素过滤器
这里写图片描述

<body>
<ul>
    <li>123</li>
    <li>456</li>
    <li>789</li>
</ul>
</body>
<script>
    //123的背景发生变化
    $("li:first-child").css("background","#ccc");
</script>

基础DOM和CSS操作
设置元素及内容
这里写图片描述

<body>
<div id="box">
    <p>123456</p>
</div>
</body>
<script>
// 输出<p>123456</p>
    alert($("#box").html());
//输出132456
    alert($("#box").text());
//设置html的内容为www.erlie.cc，表示为斜体
    $("#box").html('<em>www.erlie.cc</em>');
//设置html的内容为www.erlie.cc
    $("#box").text('<em>www.erlie.cc</em>');
//将添加的内容写到下一行
    $("#box").html($("#box").html()+"<em>www.erlie.cc</em>");
</script>
<body>
<input type="text" value="123">
<input type="checkbox" value="check1">男
<input type="checkbox" value="check2">女
<input type="radio" value="radio1">男
<input type="radio" value="radio2">女
</body>
<script>
    //输出123
    alert($("input").val());
    //将值设置为456
    $("input").val("456");
    //设置选中状态的时候文本框的内容发生改变
    $("input").val(["check1","check2","radio1"]);
</script>

元素属性操作
这里写图片描述

<body>
<!--title属性的作用是鼠标悬浮到上面时有一个提示框/-->
<div title="详细操作">12345678</div>
</body>
<script>
//    获取属性的属性值
    alert($("div").attr("title"));
    $("div").attr("title","我是后面更改的属性");
//0,1,2个参数都可以
    $("div").attr("title",function(index,value){
        return "下标是" + index + "原来的内容是" + value;
    });
//内容同样0，1，2个参数都可以
    $("div").html(function(index,value){
        return "下标是" + index + "原来的内容是" + value;
    });
// 删除指定属性，这个方法不能使用匿名函数
    $("div").removeAttr("title");
</script>

元素样式操作
这里写图片描述
这里写图片描述

DOM节点操作

创建节点

<body>
</body>
<script>
    var box = $('<div id="box">节点</div>');
    $("body").append(box);
</script>

插入节点(内部插入节点)
这里写图片描述

<body>
<div></div>
<span>span结点</span>
</body>
<script>
    $("div").append("<strong>结点</strong>");
    $("div").append(function(index,html){
        return index + html;
    });
    //将span结点添加到div结点后面
    $("span").appendTo("div");
</script>

外部插入节点
这里写图片描述

<body>
<div>div结点</div>
<span>span结点</span>
</body>
<script>
    //在div结点前面加入span结点
    $("div").before("<span>span结点</span>");
    //将span结点移动到div后面
    $("span").insertAfter("div");
</script>

包裹节点
这里写图片描述
这里写图片描述

<body>
<div>div结点</div>
<p>中间的p</p>
<div>第二个div节点</div>
<p>末尾的p</p>
<div id="a">
    <p>123</p>
</div>
</body>
<script>
    //显示div节点在一行，123在一行
    $("div").wrap("<strong>123</strong>");
    //可以包裹多个
    $("div").wrap("<strong><em></em></strong>");
    //使用匿名函数
    $("div").wrap(function(index){
        return "<strong></strong>";
    });
    // 移除一层包裹内容，多个得移除多次
    $("div").unwrap();
    //所有div上面包一层strong,是把所有的div放到一块，然后包起来
    $("div").wrapAll("<strong></strong>");
    $("#a").wrapInner("<strong></strong>");
</script>

注意wrapAll的用法，是把元素放到一块，整个再包起来，上面使用wrapAll,得到的HTML页面如下
这里写图片描述
节点操作

<body>
<div>123</div>
<div id="box">456</div>
</body>
<script>
    //会出现2个里面包含123的div节点，参数可以为空，参数为空只复制元素和内容，加上true，元素的事件处理也复制出来
    $("body").append($("div").clone(true));
    //直接删除div节点,恢复时不保留事件行为
    $("div").remove();
    //remove里面也可以加参数，删除指点的节点
    $("div").remove("#box");
    //保留事件的删除节点，恢复时保留事件行为
    $("div").detach();
    //清空节点里面的内容
    $("div").empty();
    $("div").replaceWith("<span>span标签的作用是对行内元素进行样式设置</span>");
    //和上面是一个效果
    $("<span>span标签的作用是对行内元素进行样式设置</span>").replaceAll("div");
</script>

表单选择器

常规选择器

<body>
<input type="text" name="user" value="123">
<input type="password" name="pass" value="456">
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
<textarea name="text"cols="30" rows="10"></textarea>
<select name="city">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
</body>
<script>
    //元素名定位，默认获取第一个
    alert($("input").val());
    //同上
    alert($("input").eq(0).val());
    //选择type为password的字段
    alert($("input[type=password]").val());
    //选择name位user的字段
    alert($("input[name=user]").val());
</script>

表单选择器
这里写图片描述
这里写图片描述

<body>
<input type="text" name="user" value="123">
<input type="password" name="pass" value="456">
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
<textarea name="text"cols="30" rows="10"></textarea>
<select name="city">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
</body>
<script>
    //输出6
    alert($(":input").length);
    //结合属性选择器,输出1
    alert($(":input[name=user]").length);
</script>

表单过滤器
这里写图片描述

<body>
<input type="text" name="user" value="123">
<input type="password" name="pass" value="456">
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
<textarea name="text"cols="30" rows="10"></textarea>
<select name="city">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
</body>
<script>
    //下拉列表选中的元素，输出1
    alert($(":selected").length);
    //输出单选,复选,下拉列表选中的元素，输出2
    alert($(":checked").length);
</script>

基础事件

这里写图片描述

<body>
<div></div>
<input type="button" value="button">
</body>
<script>
    $("input").bind("click",function(){
        alert("点击");
    });
    //同上
    $("input").bind("click",fn1);
    $("input").bind("click",fn2)
    function fn1(){
        alert("触发第一个函数");
    };
    function fn2(){
        alert("触发第二个函数");
    }
    //移入移出各执行一次代码
    $("input").bind("mouseover mouseout",function(){
        $("div").html(function(index,value){
            return value + "1";
        });
    });
    //通过键值对绑定参数
    $("input").bind({
        "mouseover" : function () {
            alert("移入");
        },
        "mouseout" : function(){
            alert("移出");
        }
    });
    //删除当前所有事件
    $("input").unbind();
    //使用参数删除指定类型事件
    $("input").unbind("mouseover mouseout");
    //删除指定处理函数的事件
    $("input").unbind("click",fn1);
</script>

简写事件绑定方法
这里写图片描述
这里写图片描述
mouseover和mouseout表示鼠标移入和移出触发，穿过子元素会触发
mouseenter和mouseleave穿过子元素也会触发

<body>
<div style="width: 200px;height: 200px;background: green;">
    <p style="width: 100px;height: 100px;background: red;"></p>
</div>
<strong></strong>
</body>
<script>
    //移入div触发一次，移入p再触发一次
    $("div").mouseover(function () {
        $("strong").html(function(index,value){
            return value + "1";
        });
    });
    //穿过div或p，在这个区域只触发一次
    $("div").mouseenter(function(){
        $("strong").html(function (index,value) {
            return value + "1";
        });
    });
</script>

keydown,keyup返回的是键码，keypress返回的是字符编码

<body>
<input type="text">
</body>
<script>
    //返回的是键码，不太理解，按字母返回的都是0
    $("input").keydown(function(e){
        alert(e.keyCode);
    });
    //放回的是字符编码,按a放回是97
    $("input").keypress(function(e){
        alert(e.charCode);
    });
</script>

focus和blur表示光标激活和丢失，事件触发时机是当前元素
focusin和focusout也表示光标激活和丢失，事件触发时机可以是子元素

<body>
<div style="width: 200px;height: 200px;background: red;">
    <input type="text">
</div>
<strong></strong>
</body>
<script>
    //当前元素触发
    $("input").focus(function(){
        $("strong").html("123");
    });
    //点击文本框和div区域都不能触发，因为div获不得焦点
    $("div").focus(function(){
        $("strong").html("123");
    });
    //绑定的是div,子类input触发
    $("div").focusin(function(){
        $("strong").html("123");
    });
</script>

复合事件
这里写图片描述
hover结合的是mouseenter和mouseleave方法

<body>
<div style="width: 200px;height: 200px; background: black;"></div>
</body>
<script>
    //鼠标移入触发第一个事件，移出触发第二个事件
    $("div").hover(function(){
        //注意this不加括号
        $(this).css("background","yellow");
    },function(){
        $(this).css("background","red");
    });
</script>

事件对象

event对象的属性
这里写图片描述

<body>
<input type="button" value="button">
<div style="width: 100px;height: 100px; background: red;">
    <p style="width: 50px;height: 50px; background: yellow;">456</p>
</div>
</body>
<script>
    //获取触发事件名,输出click
    $("input").click(function (e) {
        alert(e.type);
    });
    //获取绑定的DOM元素输出[object HTMLInputElement]
    $("input").click(function(e){
        alert(e.target);
    });
    //获取额外的数据,输出123e
    $("input").bind("click",123,function(e){
        alert(e.data);
    });
    //字符串传递"123",数组传递[123,"123"]，对象传递{user:Lee,age:100}，数组调用方式为e.data[1]
    //对象调用方式为e.data.user,注意Lee外面加上引号
    $("input").bind("click",{user:"Lee",age:100}, function (e) {
        alert(e.data.user);
    });
    //上面可以简写为如下形式
    $("input").click({user:"Zhang",age:100},function(e){
        alert(e.data.user);
    });
    //移入div之前的DOM元素,输出[object HTMLBodyElement]
    $("div").mouseover(function(e){
        alert(e.relatedTarget);
    });
    //移出p之后到达的最近的DOM元素,输出[object HTMLDivElement]
    $("p").mouseout(function(e){
        alert(e.relatedTarget);
    });
    //输出[object HTMLDivElement],获取绑定的DOM元素，相当于this,区别与event.target
    $("div").click(function(e){
        alert(e.currentTarget);
    });
    //event.target得到的是触发元素的DOM，event.currentTarget得到的是监听元素的DOM
    //this也是得到监听元素的DOM
    //获取时间戳
    $("div").click(function (e) {
        alert(e.timeStamp);
    });
</script>

页面中重叠了多个元素，多个元素都绑定了同一个事件，就会出现冒泡问题

<body>
<div style="width: 100px;height: 100px; background: red;">
    <input type="button" value="button">
</div>
</body>
<script>
    //单击文档页面触发文档，单击div，触发div和文档,点击按钮,触发按钮,div,文档
    $("input").click(function(e){
        alert("按钮被触发了");
        //加上这一句，上层冒泡被取消
        e.stopPropagation();
    });
    $("div").click(function(){
        alert("div被触发了");
    });
    //注意document不能加引号了
    $(document).click(function(){
        alert("文档页面被触发了");
    });
</script>

冒泡和默认行为的一些方法
这里写图片描述

<body>
<div style="width: 50px;height: 50px; background: red">
    <a href="2.html">链接</a>
</div>
</body>
<script>
    $("a").click(function(e){
        //取消a元素的默认行为,即点击不会跳转到另一个链接
        e.preventDefault();
    });
    $("div").click(function(e){
        alert("div被点击了");
    });
    //同时禁止冒泡和默认行为
    $("a").click(function (e) {
        //取消默认行为
        e.preventDefault();
        //取消冒泡
        e.stopPropagation();
    });
    //也可以改写为这样
    $("a").click(function(e){
        return false;
    });
</script>

高级事件

模拟用户操纵的简写方法
这里写图片描述

<body>
<input type="button" value="button">
</body>
<script>
    //网页加载完毕自行点击一个按钮，而不是用户
    $("input").click(function(){
        alert("点击触发的事件");
    });
    $("input").trigger("click");
    //简写形式
    $("input").click(function () {
        alert("点击触发的事件")
    }).trigger("click");
    //可以传递数据
    $("input").click(function (e,data1,data2) {
        alert(data1 + "," + data2);
    }).trigger("click",["123","456"]);
    //一个值直接传递，2个值及以上时用中括号括起来，但不能认为是数组，例如以下形式
    //输出1，456
    $("input").click(function(e,data1,data2){
        alert(data1.a + "," + data2[1]);
    }).trigger("click",[{"a":"1","b":"2"},["123","456"]]);
    //自定义事件触发
    $("input").bind("my",function(){
        alert("自定义的事件");
    }).trigger("my");
    //简写形式，在调用一次同名函数即可
    $("input").click(function(){
        alert("123");
    }).click();
</script>

动画效果

Ajax

load方法

load是局部方法，因为需要一个包含元素的jQuery对象作为前缀，适合做静态文件的异步获取，方法一般有3个参数，1：url（必须，请求的地址），2：data（可选，数据），3：callback（可选，回调函数）

获取文件

<!--index.html文件-->
<input type="button" value="异步加载数据" />
<div id="box"></div>
// demo.js文件
$('input').click(function () {
    $('#box').load('test.html');
});

点击按钮在class为box的div中加载test.html的文件内容，可以用加入类标识对test.html的内容进行进一步筛选

和服务器进行交互

Java识堂
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery入门&选择器
m12120426的博客
03-16 644
jQuery入门 jQuery是什么？ jQuery是一个快速、简介的JavaScript框架，它设计的宗旨是"write Less,Do More",即写更少的代码，做更多的事情。 在哪些情况下需要jQuery？ 1.中大型网站的开发 2.是一些前端框架的基础，比如说Easy、Bootstrap 使用jQuery的基本步骤： ①下载jQuery的库 ②将下载的js文件引入你的项目 ③开始编写代码 使用jQuery实现点击按钮获取文本框的值 代码如下： <!-- 引入外币js
JQuery 为动态生成input的控件添加事件
m0_37693130的博客
06-29 622
【代码】JQuery 为动态生成input的控件添加事件。
jQuery综合代码--(方便复习)
最新发布
业精于勤，荒于嬉
07-25 166
注意本文涉及到的jQuery的全部基础知识点配套专栏的jQuery和JSON里面的文章看跟好对多选框进行操作, 输出选中的多选框的个数并且把选中爱好的 名称显示 列二 根据图片完成要求 列三 根据给出的示意图，完成相应的功能 列四 使用 JQuery 实现动态添加用户效果 ​​ ​​​​ td> 5000 Delete Jerry jerry@sohu.com 8000 Delete
jquery常用知识点总结
qq_43405603的博客
09-07 206
$(function(){ //当登陆注册框关闭时，清空文本框 $('body').on('hidden.bs.modal','.modal',function(){ //console.log('fiuwehfuhewuo') $('input[type="text"]').val(''); $('input[type="password"]').val(''); $('input[type="che...
HttpServletRequest请求乱码问题解决方案
sqsfjsjlpf的博客
01-02 1648
一、HttpServletRequest介绍 　　HttpServletRequest对象代表客户端的请求，当客户端通过HTTP协议访问服务器时，HTTP请求头中的所有信息都封装在这个对象中，通过这个对象提供的方法，可以获得客户端请求的所有信息。 二、Request常用方法 2.1、获得客户机信息 　　getRequestURL方法返回客户端发出请求时的完整URL。　　getRequest...
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
jquery 学习笔记一
10-29
jquery是javascript的类库，提供了大量的javascript的类库和API，方便javascript开发。
jquery学习笔记
05-16
《jQuery学习笔记详解》 jQuery，作为一款广泛应用于Web开发的JavaScript库，以其简洁的API、强大的功能和广泛的社区支持，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...
关于使用＜input type=“text“ id=“username“ ＞＜/input＞，使用$(“#username“).val()无法取到vlaue值问题。
weixin_42141284的博客
03-16 1195
今天写demo时遇到一个问题，在使用jquery取id为username的文本框的值时，无法取到内容，详细情况如下： 从上面可以看出，整个body中只有一个id 为username，最终结果为用户名并没有取到，但密码取到了，最后，将id为username改一下，就取到输入的用户名值。 ...
如何用jquery获取<input id="test" name="test" type="text"/>中输入的值？
qq_37792273的博客
11-11 3338
这个问题包含两个方面：jquery选择器（即针对你指定的那个input元素）和获取内容（即获得输入的值），所以综合起来有如下代码可以实现 1 2 3 $("input#test").val();         // 推荐这种方式，因为id是唯一的 $("input[name='test']").val(); // 此时需要注意是否有同名的
jQuery为input赋值(调用函数)
qq_41644069的博客
11-07 7550
当我们为input赋值时，有时候的赋值为函数形式。以下示例为为input赋值为guid。 这里我们需要注意： ①使用原生js和使用jQuery赋值的区别，原生js：document.getElementById('testId').value=guid; ②使用jQuery赋值时，当使用input的id时，如何进行赋值：$('#testId').val(guid); ③使用jQuery赋值时，当使用input的name时，进行赋值：$('input[name="testName"]').val(gu
表单提交和超链接请求传递参数的几种方式
爬虫 的博客
06-27 1万+
表单提交和超链接请求传递参数的几种方式 这段时间在使用easy-ui的datagrid，他有自己提交表单的方式，所以就整理整理页面对参数的提交方式： 注：下面代码都已经过测试。 1. HTML提交表单 HTML提交表单简单易操作，依靠在标签对中的提交按钮进行请求发送和参数提交。其中form标签的post属性决定提交方式是get还是post。  jsp代码 f
Jquery获取input输入值的方式总结。
热门推荐
cwj1103
07-28 2万+
方法一、 function print(){ var a=myform.name.value; alert(a); } 这是获取网页input值的方法之一，给from一个名字然后在JavaScript的地方就可以用f
一个比较实用的jQuery例子
fuerbosi
07-10 92
1.要使用jQuery框架，要引入如下： &lt;script src="http://code.jquery.com/jquery-1.7.1.js"&gt;&lt;/script&gt; &lt;script&gt; 2. val函数，它表示名为userName的input标签的控件的值 var userName = $( 'input[name="userName"]...
jquery
wing123123的博客
08-11 153
做项目时，考虑到浏览器兼容问题，开始使用jquery来代替以前使用的JS代码.. 用jquery可以做出很cool很cool的JS效果，请参考http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html 使用jquery的优点有：JSP代码的页面内容保持了独立，不需要在JSP页面上写很多JS代码了，只要定义一个id即可。兼容各种...
jquery实现input输入框实时输入触发事件代码
Kill_paradise的博客
07-30 3934
jquery实现input输入框实时输入触发事件代码 代码如下: <input id="productName" name="productName" class="wid10" type="text" value="" /> 代码如下: //绑定商品名称联想 $('#productName').bind('input propertychange', function() {searchProductClassbyName();}); js/jquery 实时监听...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java识堂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值