Jquery框架学习笔记

最新推荐文章于 2023-06-22 21:38:06 发布
最新推荐文章于 2023-06-22 21:38:06 发布
阅读量378 收藏 2
点赞数 2
分类专栏： 前端 文章标签： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dj741/article/details/79747264
版权

Jquery框架

Jquery引言

Jquery是什么

Jquery是一个javascript的框架

Jquery的优势

  • 简化javascript编程
  • Jquery能够屏蔽浏览器的差异
  • Jquery简化了Ajax的开发 $.ajax();
  • Jquery提供了丰富的UI组件与功能插件

其他JS框架

EasyUI、Dojo、ext.js、react.js、angular.js

第一个Jquery程序的开发

搭建Jquery的开发环境

声明引入jquery库
不带min.js 没有经过压缩，源代码不混淆的js文件，适用于学习，能够看到源代码。
带min.js 经过压缩，源代码混淆的js文件，适用于生产环境，看不到源代码。
功能完全一致

<script type="text/javascript" scr="${pageContext.request.contextPath}/js/jquery-1.8.0.min.js">
    <script type="text/javascript">
        function text1() {
            //javascript方式
            /*
            var div = document.getElementById("box");
            alert(div.innerHTML);
            */
            //jquery方式
            alert($("#box").text());
        }
    </script>
</script>

<body>
    <div id="box">
        hibiscidai
    </div>
</body>

Jquery语法的特点

  • 简介明了
  • 支持链式调用

特殊函数

  • text() 获得内幕标签的文本信息
  • css() 修改具体的标签样式

DOM对象与Jquery对象

针对于js获取对象：

var div = document.getElementByID("div");

针对于jquery获取对象：

var div = $("#div");
  • 基于上述的两种方式，都可以获取div标签对象
  • 上面通过js方式获得的div标签对象，称之为DOM对象
  • 下面通过jquery方式获得的div标签对象，称之为jquery对象
  • 只有jquery对象才可以调用jquery方法
  • jquery对象中封装了DOM对象

Juqery对象的获取

选择器

基本选择器

id选择器

$("#id") 获得的是一个jquery对象
例见 ##搭建Jquery的开发环境

类选择器

针对于class=“xxx”

function text() {
    $(".box").css("display","none");
}
<div class="box">
    hibaiscidai
</div>
<div class="box">
    dj741
</div>
<div class="box">
    dai
</div>
标签选择器

选择HTML标签对象

function text() {
    $("div,h1").css("display","none");
}
<div class="box">
    hibaiscidai
</div>
<div class="box">
    dj741
</div>
<div class="box">
    dai
</div>
全选择器

把HTML页面所有的标签全部选择

层次选择器

后代选择器

形如select select

function text() {
    $("#outer li").css("display","none");
}
<ul id="outer">
    <li>hibisicidai1</li>
    <li>hibisicidai2</li>
    <ul>
        <li>hibisicidai3</li>
        <li>hibisicidai4</li>
    </ul>
</ul>

此时同时选择<ul id="outer">标签内所有的对象

儿子选择器

形如select1>select2

function text() {
    $("#outer>li").css("display","none");
}
<ul id="outer">
    <li>hibisicidai1</li>
    <li>hibisicidai2</li>
    <ul>
        <li>hibisicidai3</li>
        <li>hibisicidai4</li>
    </ul>
</ul>

此时选择了前两个li标签（对应下标1、2）

第一个兄弟选择器

形如select1+select2

function text() {
    $("t+li").css("display","none");
}
<ul id="outer">
    <li>hibisicidai1</li>
    <li>hibisicidai2</li>
    <li id="t">hibisicidai3</li>
    <li>hibisicidai4</li>
</ul>

此时选择了li id="t"与其后一个li标签（对应下标3、4）

后续所有兄弟

形如select~select2

function text() {
    $("t~li").css("display","none");
}
<ul id="outer">
    <li>hibisicidai1</li>
    <li>hibisicidai2</li>
    <li id="t">hibisicidai3</li>
    <li>hibisicidai4</li>
    <li>hibisicidai5</li>
</ul>

此时选择了li id="t"及其后所有li标签（对应下标3、4、5）

过滤选择器

目的：对一组jquery对象进行再次筛选，表示获得状态

基本过滤选择器
function text() {
    $("XXXX").css("display","none");
}
<ul id="outer">
    <li>hibisicidai1</li>
    <li>hibisicidai2</li>
    <li id="t">hibisicidai3</li>
    <li>hibisicidai4</li>
    <li>hibisicidai5</li>
</ul>
:first | 第一个

XXXX –> li:first

$("li:first").css("display","none");

获取到：1

:last | 最后一个

XXXX –> li:last

$("li:last").css("display","none");

获取到：5

:not(select) | 不选择

XXXX –> li:not(#t)

$("li:not(#t)").css("display","none");

获取到：1、2、4、5（除3）

:even | 获得所有的偶数内容(下标从0开始)

XXXX –> li:even

$("li:even").css("display","none");

获取到：1、3、5（对应下标0、2、4）

:odd | 获得所有奇数内容

XXXX –> li:odd

$("li:odd").css("display","none");

获取到：2、4（对应下标1、3）

:eq(index) | 获取对应下标的内容

XXXX –> li:eq(1)

$("li:eq(1)").css("display","none");

获取到：2（对应下标1）

:gt(index) | 获得大于某一个下标的内容

XXXX –> li:gt(1)

$("li:gt(1)").css("display","none");

获取到：3、4、5（对应下标2、3、4）

:lt(index) | 获得小于某一个下标的内容

XXXX –> li:lt(2)

$("li:lt(2)").css("display","none");

获取到：1、2（对应下标0、1）

内容过滤器
function text() {
    $("XXXX").css("display","none");
}
<div id="box">
    hibiscidai1
</div>
<div>
</div>
<div>
    <p>123456</p>
</div>
<div>
    hibsicidai2
</div>
:contains(text)

获得某些包含特殊文本的内容的标签
XXXX –> div:contains(hibiscidai1)
获取到第一个div

:empty

获得内部没有内容的标签
XXXX –> div:empty
获取到第二个div

:has(选择器)

筛选包含某个选择器的标签
XXXX –> div:has(p)
获取到第三个div

:parent

选择器选取所有是其他元素的父元素且包含文本节点的元素

<ul><li>小黑</li></ul>
<ul></ul>

XXXX –> ul:parent
选取所有带有子元素且包含文本的 <ul> 元素：

可见选择器
:visible

选中样式为显示的标签对象
XXXX –> ul:visible

:hidden

选中样式为隐式的标签对象
XXXX –> ul:hidden

属性过滤器
function text() {
    $("XXXX").css("display","none");
}
<div id="box">
    hibisicidai1
</div>
<div id="pox">
    hibiscidai2
</div>
<div id="cox">
    hibiscidai3
</div>
<div>
    hibiscidai4
</div>
  • 作用
    选择的是含有某些属性的标签对象
    -[attribute]
    XXXX –> div[id]
    选择所有有id属性的div标签对象(获取到1/2/3)
  • [attribute=value]
    XXXX –> div[id=pox]
    (获取到2)
  • [attribute!=value]
    XXXX –> div[id!=pox]
    (获取到1/3/4)
表单属性过滤器
function text1() {
    if ($("input[type=checkbox]:checked").length==0) {
        alert("请选择要删除的科目");
    }
}
function text2() {
    alert($("#city option:selected").text());
}
java <input type="checkbox" value="java" /><br />
python <input type="checkbox" value="python" /><br />
php <input type="checkbox" value="php" />
<input type="button" value="删除" onclick="test1()" />

<select id="city" onchange="text2()" >
    <option>北京</option>
    <option>上海</option>
    <option>郑州</option>
</select>
:checked

获得所有被选中的checkbox

:selected

获得当前被选中的option

表单选择器
:text
:password
:radio
:checkbox
:submit
:button
:hidden
:file
:reset

DOM对象和Jquery对象的转换

DOM对象—>jquery对象

  • 语法:$(DOM对象)
function text1() {
    //javascript标签对象获取方式
    var div = document.getElementById("box");
    //DOM对象转换为Jquery对象
    alert($(div).text());
}

jquery—>DOM对象

  • 语法:Jquery.get(index)
$("div").get(1).innerHTML="hibscidai";

一组Jquery对象(遍历)

遍历

function text1() {
    $("div").each(function (index) {
        //this 当前元素的DOM对象
        //idex 代表当前元素的下标
        alert($(this).text());
        alert(index);
    });
}
<div id="box">
    hibisicidai1
</div>
<div id="pox">
    hibiscidai2
</div>
<div id="aox">
    hibiscidai3
</div>
<div id="cox">
    hibiscidai4
</div>
<input type="button" value="click" onclick="test1()" />

长度

$("div").length
$("div").size()

获取某一个Jquery对象eq(idx)

$("div").eq(1).text()

Jquery中核心的方法

修改HTML标签属性的方法

修改属性

  • 语法
    jquery对象.prop(“属性的名字”,”属性的值”);

获得属性的值

  • 语法
    jquery对象.prop(“属性的名字”)；

设置多个属性的值

  • 语法
    jquery对象.prop(“属性的名字”，属性的值).prop(“属性的名字”，”属性的值”)

Jquery.prop{
“属性名”：”属性值”，
“属性名”：”属性值”，
}

function text1() {
    //修改div标签的属性
    $("#box").prop("title","xiaobai");
    //获取属性的值
    alert($("#box").prop("title"));
    //修改多个属性的值(链式调用)
    $("#box").prop("title","xiaobai").prop("id","cox");
    //json方式
    $("#box").prop({
        "title":"xiaobai",
        "id","cox"
    });
}

修改标签的样式属性

修改样式

jquery对象.css(“css属性”，属性值)；

获取样式的值

jquery对象.css(“css属性”)

设置多个css样式

  1. jquery对象.css(“css属性”，属性值).css(“css属性”，”属性值”)
  2. jquery对象.css({
    “css属性”：”属性值”,
    “css属性”：”属性值”,
    })
function text1() {
    //修改css样式的属性
    $("#box").css("width","200px");
    $("#box").css("height","200px");
    //修改多个样式
    $("#box").css("width","200px").css("height","200px");
    $("#box").css({
        "width":"200px";
        "height":"200px";
    });
    //获取样式的值
    alert($("#box").css("width"));
}

延迟

Jquery.hide(毫秒) 以动画的形式隐藏
Jquery.show(毫秒) 以动画的形式显示

//隐藏div
$("#box").hide(2000);
//显示div
$("#box").show(2000);

修改样式类型

语法
Jquery对象.removeClass();//删除样式类型
Jquery对象.addClass();//添加样式类型

function test1() {
    //获取第二个div的标签对象
    //删除原有样式类型
    $("#box").removeClass();
    //添加原有样式类型
    $("#box").addClass("box");
}

注：jquery.removeClass()没有指定参数，则jquery把这个标签的所有样式删除

text函数

用于获取或者设置标签内部文本信息
- 语法
jquery对象.text();//获取文本内容
jquery对象.text("");//修改文本内容
- 注意
只针对于文本内容，忽略HTML标签

HTML函数

用于获取或者设置标签内部的HTML标签
- 语法
jquery对象.html();//获取html标签内容
jquery对象.html(“标签”);//修改html标签内容

function test1() {
    //获取HTML标签
    //alert($("#box").html());
    //修改HTML标签
    $("#box").html("I  <font color=red >  &hearts;  </font>  you");
}

Val函数

用于获取或者设置表单标签中value属性内容

function test1() {
    //获取表单中的value值
    // alert($("#t").val());
    //修改表单中的value值
    $("#t").val("xiaohuahua");
}

Jquery中的事件处理

JS中事件处理的两种方法

JS中事件处理的两种方法
JavaScript编程式的事件处理

//页面加载完成之后触发事件
window.onload = function() {
    //获取对应的标签对象
    var input = document.getElementByID("box");
    //为对应的标签对象添加事件
    input.onclick = function() {
        //js代码
    }
}

前台控件代码

<input type="button" id="box" />

Jquery中通过编程的方式加入事件处理

Jquery中通过编程的方式加入事件处理
Jquery中编程式的事件处理

//页面加载完成后触发事件
$(function() {
    //获取标签对象，添加对应事件
    $("#box").click(function() {
        //Jquery代码
    });
});

前台控件

<input type="button" id="box" />

注意细节

this关键字

<script type="text/javascript">
    //页面加载完成后触发事件
    $(function() {
        $().click(function() {
            //this，实质是DOM对象，代表当前操作标签对象
            console.info(this);
            console.info($(this));
        });
    });
</script>

event

<script type="text/javascript">
    //页面加载完成后触发事件
    $(function() {
        $("#box").click(function(event) {
            //event是一个Jquery对象
            console.info(event);
            //event.target是一个DOM对象
            console.info(event.target);
        });
    });
</script>

复合事件

toggle();

复合多个单机操作

toggle(fun1, fun2)

Hover()

复合mouseover , mouseout

Hover(fun1, fun2)

事件处理的完整写法（了解）

事件处理的完整写法
简化事件的写法

$(function() {
    $("#box").click(function() {
        //Jquery代码
    });

    $("#box").mouseover(function() {
        //Jquery代码
    });
});

完整事件处理的写法

$(function() {
    $("#box").on("click", function() {
        //Jquery代码
    });
    $("#box").on("mouseover", function() {
        //Jquery代码
    });
});

特殊事件（了解）

one 函数，保证一个事件只执行一次

Jquery中的DOM编程

Jquery中的DOM编程

Jquery创建的HTML标签

创建标签

var div = $("<div>hibiscidai</div>");

决定放置位置

$("#input").click(function() {
    //创建div标签对象
    var div = $("<div>hibiscidai</div>");
    //父亲角度
    $("#body").append(div);//把新创建的div标签，放置在最后一个孩子处
    $("#body").prepend(div);//把新创建的div标签，放置在第一个孩子处
    //兄弟角度
    $("#input").after(div);
    $("#input").before(div);
});

Jquery删除现有标签

清空标签的内部信息

$("#box").empty();

删除标签

$("#box").remove();

Jquery替换

//创建input标签
var input = $("<input type='text' value='xiaohei' />");
//替换原有标签
$("#box").repalceWith(input);

克隆 clone()

clone() 不复制事件
clone(true) 复制事件

$("#box").click(function() {
    alert("xxxxxxxx");
});
$("#input").click(function() {
    //克隆div标签
    var div = $("#box").clone(true);
    //放置在body标签的最后孩子处
    $("#body").append(div);
});

一组关系方法

一组关系方法

案例：级联菜单

级联菜单

<script type="text/javascript">
    $(function(){
    //准备数据
    var data = {
        bj:['海淀','朝阳','丰台'],
        tj:['河东','河西','南开'],
        zz:['金水','二七','顺义'],
    };

    //获取北京对应的区
    var sections =data['bj'];

    //获取第二个select标签对象
    var sectio n = $("#section");
    for(var  i = 0; i < sections.length; i++){
        //创建option
        var option = $("<option>"+sections[i]+"</option>");
        //把创建好的option放入第二个select标签中
        section.append(option);         
    };

    //给一个select标签添加change事件
    $("#city").change(function(){
        //清空原有标签内部的信息
        section.empty();
        //获取用户选中的城市值
        var city = $("#city option:selected").val(); 
        //获取该城市所对应的区
        var sections = data[city];
        for(var i = 0; i < sections.length; i++){
            //创建option标签对象 
            var option = $("<option>"+sections[i]+"</option>");
            //把option标签对象放入第二个select标签中
            section.append(option);
        }
    });     
});
</script>

前台表单控件

city
<select id="city" >
    <option value="bj">北京</option>
    <option value="tj">天津</option>
    <option value="zz">郑州</option>
</select>
section
<select id="section">
</select>

事件委派

产生原因：通过最基本的方法，动态创建标签对象时，并不能添加原有的事件
解决方案：

<script type="text/javascript">
    $(function() {
        $(":checkbox").click(function() {
            alert("xxxxxx");
        });

        //解决新创建的标签对象没有对应的事件
        $(":checkbox").live("click", function() {
            alert("xxxxxx");
        });

        $("#input").click(function() {
            //创建勾选框
            var c = $("<input type='checkbox' />");
            //获取body标签对象
            $("#body").append(c);
        });
    });
</script>
最佳陌生人
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
✿✿✿JavaScript --- jQuery框架一
naoguoteng的博客
12-31 1009
1.jQuery的介绍和在线学习网址以及下载网址5.jQuery如何达到获取原生的DOM对象6.jQuery选择器(1)常见选择器(2)高级选择器以及方法(4)过滤选择器7.常用到的方法(1)html()和 text()方法(2)attr()和 removeAttr()(3)元素样式操作方法和其他方法8(1)创建节点(2)插入节点(3)包裹节点(4)其他节点操作9.jQuery基础事件相关(1) 基础事件(3)解绑事件(4)简写事件(5)复合事件(6)事件对象event(7)事件之冒泡和默认行为以及行为
jQuery框架
qq_57167753的博客
04-05 2261
let stuArr = [{'sid':1,'sname':'闫凯','ssex':'1','score':0},{},{}];在jQuery中将HTML中事件都封装成了一系统的事件方法。三、如何在HTML页面中使用jQuery框架。还需要在HTML页面中导入相应的js文件。jQuery是一个封装了JS脚本的框架。在jQuery中封装了一系列的方法。.min.js 这是压缩的版本。也就是说是已经写好的JS代码。核心方法： jquery();四、jQuery的核心方法。五、jQuery中事件方法。
前端 jQuery框架
wk3510的博客
07-29 4174
bootstrap帮我们写好了一个css文件里面定义好了很多的css样式100%;}我们在使用的时候只需要在html中写标签添加响应的class即可学习有哪些class会有什么效果jquery我们使用原生的js，需要实现很多的页面动态效果，所有的效果都需要我们自己手动写逻辑jquery就是使用js代码帮我们写好了很多的动态特效，我们需要使用的时候只需要调用其写好的函数即可。............
jQuery前端框架 - 一小时了解与使用
m0_52336378的博客
06-22 954
jQuery简介：jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库在我们开始学习之前，有几个问题希望大家明白1.什么是jQuery？jQuery是JS写的插件库，说白了，就是一个JS文件。jQuery 极大地简化了JS编程。所以jQuery 相对JS来说，学习起来会很容易。
JQuery框架总结
weixin_49076273的博客
05-23 1844
一、JQuery对象的引用 1.jq的下载地址：https://jquery.com/download/ 点击Download the uncompressed, development jQuery 版本号 进入js文件后，按ctrl+s保存到电脑中 2.DOM(Document Object Model)，即文档对象模型; DOM最顶层是Window对象，Window对象下面是Document（文档对象）、Navigator(浏览器对象)、Screen（屏幕对象）、History（浏览历史对象）、Loc
jQuery学习笔记精心整理
最新发布
02-23
学习jQuery其实还是在学DOM。 (3). 极简化: jQuery是对传统DOM操作的终极简化。jQuery是对DOM的每一步操作都进行了终极的简化。但是，步骤并没有减少。 (4). 函数库: jQuery中一切都是函数，没有属性。 2. 为什么:...
jquery学习笔记
04-04
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript...
Jquery学习笔记Jquery学习笔记
10-29
Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录，本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个javascript框架，...
Ajax 框架学习笔记
10-30
在本篇学习笔记中，我们将重点探讨XMLHttpRequest对象的三个关键属性以及一个基本的Ajax源码示例。 1. XMLHttpRequest对象的属性： - onreadystatechange：这是一个事件处理函数，当XMLHttpRequest对象的...
jQuery验证框架学习笔记.pdf
03-12
jQuery验证框架学习笔记.pdfjQuery验证框架学习笔记.pdfjQuery验证框架学习笔记.pdf
一个非常好用的jQuery框架，中文文档+源码+DEMO
05-07
jQuery LigerUI 是基于jQuery的一系列UI控件组合，简单而又强大，致力于快速打造Web前端界面解决方案。 因为是前端控件，跟服务器无关，可以适合.net,jsp,php等等web服务器环境。目前全部插件的打包压缩JS只有100K左右,很轻巧。使用插件式的开发模式，以“简单”为原则的设计，每个插件尽量独立，并可依赖拓展。
jquery框架 是学习jquery最常用的一种
03-29
最常用的js框架 eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7(1D 1u.6=="R"){1u.R=1u.R;v 6=q(a,c){7(1u==l)u 1q 6(a,c);a=a||12;7(6.1p(a))u 1q 6(12)[6.D.27?"27":"2P"](a);7(1D a=="20"){v m=/^[^<]*(<(.|\\s)+>)[^>]*$/.2M(a);7(m)a=6.41([m[1]]);I u 1q 6(c).2p(a)}u
JavaWeb的实验室预约管理系统
11-22
基于JavaWeb的实验室预约管理系统，包含MySQL数据库+JavaWeb源码，具体参考：https://blog.csdn.net/m0_46153949/article/details/109956309
jquery 框架分析
12-27
jquery 源码框架解析
jQuery学习框架
01-23
本内容主要为JQuery框架及相应组件的使用，主要包括Ajax的使用，验证框架和文件上传
JQuery框架
每日小新
09-25 452
????JQuery框架 简单说：就是对JS的封装，简化，提高了开发效率 一、JQuery选择器 1、- 基础选择器 前提引入JQuery框架： <script src="…/…/js/jquery-3.6.0.js"></script> body》》》 <body> <ul id="u1" class="u1"> <li id="li1"> <ul value="ssss">
JQuery框架简介
课堂总结
03-21 8550
1.1jQuery简介 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画...
jquery框架
aigo_2021的博客
05-13 682
JQuery是一个快速的、轻量级的javaScript库 ，JQuery是用javascript编写的，对js的操作进行了封装。 JQuery的优点： 1. 使html代码和js代码完全分离。 2. 跨浏览器。 3. 轻量级。 4. 提供了大量的选择器，可以选择对象 jquery的使用 1. 在html文件中，引入jquery库（路径） <script src="jquery-3.2.1.js"></script> 2. 在一段代码块中，写jquery代码 &
easyUI笔记11
08-08
jQuery EasyUI是一个基于jQuery框架的插件，集成了多种用户界面插件，可以帮助快速搭建出美观、易用的前端界面。 在开始使用jQuery EasyUI之前，首先需要下载并导入相关的文件。可以通过官方网站...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值