JQuery（笔记）

企业开发 2022-03-24 07:12:34 阅读次数: 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>

猜你喜欢

转载自blog.csdn.net/weixin_45650003/article/details/120694676
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022