jquery

简介: jquery

11. jqurey 是什么? jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。jQuery 极大地简化了 JavaScript 编程,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

2. jqurey的 特性 :具有独特的链式语法和短小清晰的多功能接口;

具有高效灵活的css选择器,并且可对CSS选择器进行扩展;

拥有便捷的插件扩展机制和丰富的插件。

jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

3.下面给大家介绍一下选择器的使用

       1.//选择器的使用  

           //基本语法:  $("选择器的名称");===》返回结果标签对象//  id   选择器中+

           //  id   选择器中+  #

           //  class  类选择器  + .

           // 元素     元素选择器   直接编写标签名称即可

引入jquery库

<!-- 载入函数 -->
    <script src="js/jquery-3.6.4.js"></script>
    <script>
      //1.载入函数--如果代码写在head中 必须要有
      // $(document).ready(function(){
      //  alert(123)
      // });
      // //简写
      // $(function(){
      //  alert(456);
      // });

body主题

<body>
    <!-- &gt;  &lt;-->
    <h2>基本选择器的使用</h2>
    <ul id="oUl">
      <li class="a">item1</li>
      <li>item2</li>
      <li>item3</li>
      <li class="a">item4</li>
      <li>item5</li>
      <ol>
        <li>刘鑫1</li>
        <li>刘鑫2</li>
        <li>刘鑫3</li>
        <li>刘鑫4</li>
        <ul>
          <li>刘智1</li>
          <li>刘智2</li>
          <li>刘智3</li>
          <li>刘智4</li>
        </ul>
      </ol>
    </ul>
    <p>haha</p>
    <span>hehe</span>
    <p>haha</p>
    <table id="tab" border="1" width ="100%">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <!--  -->
      <h2>表单选择器的使用</h2>
      <input checked type="radio" name = "sex" value = "男">男
      <input type="radio" name = "sex" value = "女">女
      <hr>
      <input checked type="checkbox" name = "hobby" value = "唱歌">唱歌
      <input type="checkbox" name = "hobby" value = "跳舞">跳舞
      <input checked type="checkbox" name = "hobby" value = "RAP">RAP
      <input type="checkbox" name = "hobby" value = "撸铁">撸铁
      <input checked type="checkbox" name = "hobby" value = "听歌">听歌
    </table>
  </body>

2.各类选择器的介绍与实践

//类选择器
        // $(".a").css("color","red");
        //元素选择器
        // $("li").css("color","yellow")
        //通配符选择器
        // $("*").css("background","yellow");
        //组合选择器
        // $(".a,p").css("color","yellow")
        //后代选择器
        // $("#oUl li").css("color","green");
        // 子代选择器
        // $("#oUl>li").css("color","green")
        //过滤选择器
        //获取oUl下的第一个li标签
         // $("#oUl>li:first").css("color","green");
         //最后一个
         //$("#oUl>li:last").css("color","green");
         // eq(index)  根据标签的下标获取
         // $("#oUl>li:eq(2)").css("color","red");
         //even 获取偶数下标的标签
         // $("#oUl>li:even").css("color","red");
         //odd 获取奇数下标的标签
          // $("#oUl>li:odd").css("color","blue");
          //表格隔行换颜色
          $("#tab>tbody>tr:even").css("background","red");
          $("#tab>tbody>tr:odd").css("background","yellow");
         //   gt  lt
         //获取oUl下的所有li  求出索引大于2的li
        // $("#oUl>li:gt(2)").css("color","red");
         //下标小于4
         // $("#oUl>li:lt(3)").css("color","red");
         //获取2   3    4
         //区间标签获取   优先:先小于 后大于。
        //$("#oUl>li:lt(4):gt(0)").css("color","red");
         //通过表单选择器  获取被选中的值
         console.log($("input:checked").val());
         //同一行代码中  js与jQUery不能混合使用
         //被选中的复选框的vlaue值
        console.log( $("input:checkbox:checked"));
        //i 代表下标   n:对象
        $("input:checkbox:checked").each(function(i,n){
          console.log(i,n,$.type(n));
          console.log($(this).val());
        });
         // $.each(遍历的数组或者对象,function(){});
      });

jquery大纲:

制作不易,望多鼓励。

目录
相关文章
|
3月前
|
JavaScript 前端开发
JQuery 什么是JQuery?
JQuery 什么是JQuery?
46 0
|
7月前
|
JavaScript 前端开发
认识jQuery
认识jQuery
|
8月前
|
JavaScript UED 开发者
jQuery Growl
jQuery Growl 是一个基于 jQuery 的通知插件,它可以在网页上显示各种类型的通知,如成功、错误、警告等。Growl 插件基于 jQuery UI 主题,可以自定义通知的样式、位置和显
125 6
|
JavaScript 前端开发 程序员
|
SQL JavaScript 前端开发
初识jQuery
初识jQuery
116 0
|
JSON 前端开发 JavaScript
|
XML JSON JavaScript
|
JavaScript 前端开发
jQuery 效果
jQuery 效果
130 0
|
JavaScript 前端开发 程序员
jQuery的介绍
jQuery是对JavaScript的封装
137 0
|
前端开发 JavaScript