2022-8-26 jq简单了解

  • 2022-8-26 jq简单了解已关闭评论
  • 28 次浏览
  • A+
所属分类:Web前端
摘要

jQuery 是一个轻量级的”写的少,做的多”的 JavaScript 库。
jQuery 库包含以下功能:


Query 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库。
jQuery 库包含以下功能:

HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities                JS库:别人写好的JS文件,我们拿来直接用             开发中,会引入很多的.js文件             JQuery.js------濒临淘汰,经典。                 css库,bootstrap,layui,easyui。             React.js-------             Angular.js-----             Vue.js---------简单。最主流 

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

基础语法: $(selector).action()

美元符号定义 jQuery 选择符(selector)"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作 

实例:

$(this).hide() - 隐藏当前元素  $("p").hide() - 隐藏所有 <p> 元素  $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素  $("#test").hide() - 隐藏 id="test" 的元素 

选择器

            基本选择器                 id选择器---返回值是固定的一个                 class选择器---返回值是一堆                 标签选择器---返回值是一堆                 *号选择器---返回值是所有标签             层级选择器                div p---div里的p,后代                div>p---直接子元素                 div+p---相邻             过滤选择器                 :first---获取第一个元素                 :last---获取最后一个元素                 :eq(index)---给定位置的元素                 :gt(index)---大于给定位置                 :lt(index)---小于给定位置                 :not(selector)---除了selector以外的所有选择器             内容选择器:                 :empty---匹配所有不包含子元素的选择器                 :parent---含有子元素的父元素             属性选择器:                 [name]---包含name属性的元素                 input[type=text]---文本框                 input[type!=text]---除文本框的其他 

2022-8-26 jq简单了解

Document

    <div id="container">         <p id="p123">123</p>     </div>      <!--          script标签:只可以做一件事情         要么是导入js文件,要么是写js代码      -->     <script src="js/jquery-1.9.1.js"></script>     <script>         $(() => {             /*                 appendTo():参数是一个JQuery元素,追加到xxx                 prepareTo():在之前追加              */             $("<p>546</p>").appendTo($("#container"));             $("<p>999</p>").prependTo($("#container"));             $("<p>888</p>").insertAfter($("#container"));             $("<p>777</p>").insertBefore($("#container"));              $("#p123").replaceWith($("<p>666</p>"));             // $("<span>000</span>").replaceAll($("p"));              // 在内部的后面追加             $("#container").append($("<p>100</p>"));             $("#container").prepend($("<p>200</p>"));              $("#container").after($("<p>5000</p>"));             $("#container").before($("<p>6000</p>"));             // 清空标签内的所有内容             // $("#container").empty();             $("p:gt(5)").remove();          })     </script> </body> 

Document

        <button id="checkAll">全选</button>     </div>       <script src="js/jquery-1.9.1.js"></script>     <script>         $(() => {             // $("#div1").text("<p>123</p>");             $("#username").val("666");             /*                 属性操作:                 html() ===== innerHTML                 text() ===== innerText                 val() ====== input.value                 val()函数:可以给文本框赋值,                     可以操作单选框,复选框,下拉菜单的选中状态             */            $("#checkAll").click(()=> {                 // $("#swimming").val("swimming");                 // 相当于setAttribute                 // getAttribute                 // alert($("input[type=checkbox]").attr("value","sss"));                 // alert($("input[type=checkbox]").attr("checked"));                 alert($("input[type=checkbox]").prop("checked",true));                 alert($("#sheng").prop("selected"));            })         })     </script> </body>