JQuery（笔记）

于 2021-10-10 23:35:00 发布
阅读量435 收藏 7
点赞数
分类专栏： JQurey 前端 笔记 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45650003/article/details/120694676
版权
笔记 同时被 3 个专栏收录
6 篇文章 57 订阅
订阅专栏
前端
4 篇文章 0 订阅
订阅专栏
JQurey
1 篇文章 0 订阅
订阅专栏

1.jQuery定义

jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more

2.为什么使用jQuery?

(1)js实现隔行换色

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script type="text/javascript">
    window.onload = function(){
        var trs = document.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
            if(i%2==0){
            trs[i].style.background = "red";
            }
        }
    }
    </script>
  </head>
  
  <body>
        <form action="">
            <table>
                <tr><td>序号</td><td>订单号</td><td>商品名称</td><td>价格</td></tr>
                <tr><td>1</td><td>32</td><td>53</td><td>价35</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
            </table>
        </form>
  </body>
</html>

(2)jQuery实现隔行换色

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("tr:even").css("background","red");
        });
    </script>
  </head>
  
  <body>
        <form action="">
            <table>
                <tr><td>序号</td><td>订单号</td><td>商品名称</td><td>价格</td></tr>
                <tr><td>1</td><td>32</td><td>53</td><td>价35</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
            </table>
        </form>
  </body>
</html>

3.jQuery语法结构

$(selector).action() ; 
​
工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

4.引入jQuery类库

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

5.jQuery-HelloWorld-实现弹出提示框

<script>
     $(function() {
        alert("我欲奔赴沙场征战jQuery，势必攻克之！");
    });
</script>

6.jQuery应用实战

6.1addClass( )添加样式

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8"/>
    <style type="text/css">
        .h{
            background:red
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
     $(function(){
        //$("tr:even").addClass("h");
    });
    </script>
  </head>
​
  <body >
        <form action="" >
            <table >
                <tr><td>序号</td><td>订单号</td><td>商品名称</td><td>价格</td></tr>
                <tr><td>1</td><td>32</td><td>53</td><td>价35</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
            </table>
        </form>
  </body>
</html>

6.2css( )设置样式

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
     $(function(){
         $("tr:even").css("background","red");
    });
    </script>
  </head>
​
  <body >
        <form action="" >
            <table >
                <tr><td>序号</td><td>订单号</td><td>商品名称</td><td>价格</td></tr>
                <tr><td>1</td><td>32</td><td>53</td><td>价35</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
            </table>
        </form>
  </body>
     
</html>
​

6.3show( )、hide( )元素显示和隐藏

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").hide();
  });
  $(".btn2").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>

6.4next()链式操作

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
​
<body>
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
​
<script>
$('li.third-item').next().css('background-color', 'red');
</script>
​
</body>
</html>
解析：通过next()方法显示的是当前位置的下一个
​

6.5css({})隐式迭代

 $(function() {
        $("li").css({"font-weight":"bold","color":"red"});
 });
 解析：<因为前面li是一个隐形的数组，所以可以设置多个样式>

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
</script>
</head>
​
<body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>为 p 元素设置多个样式</button>
</body>
</html>

6.6 DOM对象和jQuery对象的转化

(1)DOM对象转为jQuery对象

var txtName =document.getElementById("txtName"); //DOM对象
var $txtName =$(txtName);                        //DOM对象转化为jQuery对象
​

(2)jQuery对象转为DOM对象

第一种方式:

var $txtName =$ ("#txtName"); //jQuery对象
var txtName =$txtName[0];     //DOM对象

第二种方式:

var $txtName =$("#txtName");  //jQuery对象
var txtName =$txtName.get(0); //DOM对象

案例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <style type="text/css">
        .h{
            background:red
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
     $(function(){
         var a = $("table").css("background","red");
         //var b = document.getElementById("tr");
         alert(a instanceof jQuery);
    });
    </script>
  </head>
​
  <body >
        <form action="" >
            <table >
                <tr><td>序号</td><td>订单号</td><td>商品名称</td><td>价格</td></tr>
                <tr><td>1</td><td>32</td><td>53</td><td>价35</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
            </table>
        </form>
  </body>
</html>

7.扩展-初始化函数-$(document).ready()与window.onload的区别

window.onload$(document).ready()
执行时机flash、视频等）才能执行网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数同一页面不能同时编写多个同一页面能同时编写多个
简化写法无$(function(){ //执行代码}) ;

案例：

<html>
  <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        //window.onload = function(){
             //$("tr:eq(1)").css("background","red");
        //}
        //window.onload = function(){alert(1);}
        //window.onload = function(){alert(2);}
        $(function(){alert(3);});
        $(function(){alert(4);});
    </script>
  </head>
​
  <body >
        <form action="" >
            <table >
                <tr><td>序号</td><td>订单号</td><td>商品名称</td><td>价格</td></tr>
                <tr><td>1</td><td>32</td><td>53</td><td>价35</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
            </table>
        </form>
  </body>
     
</html>

​​

案例2：同一页面能同时编写多个*

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

​​

  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

  <script type="text/javascript">

$(function(){

alert(1);

});

$(function(){

alert(2);

});

</script>

</style>

</head>

<body>

​​​

    

​

<tr><td>序号</td><td>订单号</td><td>商品名称</td><td>价格</td></tr>

<tr><td>1</td><td>32</td><td>53</td><td>价35</td></tr>

<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>

<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>

<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>

<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>

<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>

<tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>

</table>

</form>

</body>

</html>

代码贩子、
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JQuery笔记
01-09
JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记
jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】
11-01
jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】
jquery-1.11.1.min.js_javascript_security_
09-29
jquery 1.11.1 minified version for javascript developers
jquery 笔记 事件
10-28
写js已经有很久了，但是对js的详细了解还是很肤浅的，这几天在看jquery，在其中有一些新的发现和体会，记录下来
jQuery笔记
01-14
学习jQuery解决选择器和事件方法 jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 函数库。 1.2.jQuery的优势  可以简化JavaScript代码  可以像css那样获取元素  可以修改css来控制页面效果  可以兼容常用的浏览器 1.3.jQuery版本支持 jQuery分为很多版本, 还分为未压缩版和压缩版, 根据需要选择对应的版本进行下载! 1.x 支持常用的浏览器和IE6+ 2.x 支持常用的浏览器和IE9+ 3.x 支持常用的浏览器和IE9+ 注意: jQuery不兼容老版本. 因为jQuery升级除了会做一些内部优化之外, 还会删除以前的一些代码, 比如删除一些方法. 或者是添加一些新的方法。所以在升级之后， 以前的代码可能会无法执行。
jquery-1.11.1.min.js文件（下拉选带搜索）
qq_39822451的博客
11-30 4246
/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */ ! function (a, b) { "object" == typeof module &amp;&amp; "object" == typeof module.exports ? module.exports = a...
解决：jquery-1.11.1.js引入到SpringMVC遇到的问题
androidcw的博客
09-24 299
今天在做SpringMVC架构时，遇到的问题，记录一下，在做web项目时，也曾遇见过，下面直接进入正题。 报出No Mapping for GET的错误，我发现对于静态页面（*.html/jsp，dispatcher servlet处理不了，会报No mapping for GET/url的错误。下意识的去寻找SpringMVC 配置，结果发现静态资源里没引入jquery,导致一直报错，这里提供一个常用的解决办法，解决方法如下： 在次运行程序，问题就解决了。 参考：https://blog.csdn.
jquery.1.11.1.js 和 jquery.1.11.1.min.js
04-14
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
js jquery-1.11.1.min.js jquery.validate.min.js
07-02
js插件 jquery-1.11.1.min.js jquery.validate.min.js
jquery-1.11.1.min.js文件
11-09
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 [1]
jQuery1.11.1.min.js和jquery2.1.1.js.zip
07-09
本次提供的有：jquery-1.11.1.js、jquery-1.11.1.min.js、jquery-2.1.1.js和jquery-2.1.1.min.js。 说明： 1、文件名中包含min字样的为压缩版。2、压缩版本适于实际应用，未压缩版本适于开发调试过程。 3、2.x版本和1.x版本有着相同的API，但2.x版本不再支持IE6、IE7和IE8。 4、当前IE6、7、8的用户还是很多的，所以一般实际应用还是选择1.x版本的多。
jquery-1.11.1.js和jquery-1.11.1.min.js
12-06
jquery1.11.1.js和jquery.1.11.1min.js下载,有需要的可以自行下载，亲测安全有效，放心使用。
jqery-1.11.1.min.js和jquery-1.11.1.js
06-27
jqery-1.11.1.min.js和jquery-1.11.1.js 前端开发需要的js包
jquery-1.11.1.min.js
12-24
绝对放心，快捷方便，保准百分之一百的无毒，接下来不知道说什么了，
jquery-1.11.0.min.js
08-27
jquery-1.11.0.min.js
jquery笔记
01-24
jquery笔记，多年前端开发积累。
jquery-1.11.2.min.js
02-22
jquery-1.11.2.min.js
jquery-1.11.1.js
03-27
最新版jQuery1.11.1插件，随便在官网上找到的，没办法
jQuery学习笔记——事件
最新发布
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要绑定事件的元素，`event` 表示要绑定的事件类型，比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。 2. 多个事件绑定 我们可以通过 `on()` 方法来同时绑定多个事件： ``` $(selector).on({ event1: function(){ // 事件处理程序1 }, event2: function(){ // 事件处理程序2 } }) ``` 这样，当 `event1` 或 `event2` 中任意一个事件触发时，对应的处理程序都会被执行。 3. 解除事件 如果需要解除某个元素的事件处理程序，可以使用 `off()` 方法： ``` $(selector).off(event); ``` 其中，`event` 表示要解除的事件类型。如果不指定事件类型，则会解除该元素上所有的事件处理程序。 4. 事件委托 在 jQuery 中，我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上，而不是绑定到子元素上，然后通过事件冒泡来判断是哪个子元素触发了该事件。这样，当子元素数量较多时，只需要绑定一次事件，就可以监听到所有子元素的事件。 ``` $(selector).on(event, childSelector, function(){ // 事件处理程序 }) ``` 其中，`selector` 表示父元素，`event` 表示要绑定的事件类型，`childSelector` 表示要委托的子元素的选择器，事件处理程序则是在子元素触发事件时要执行的代码块。 以上是 jQuery 中事件的一些基本操作，希望对你有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

代码贩子、

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

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

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

打赏作者

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

抵扣说明：

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

余额充值