From 63214200185d8f2953e8a198bcd55a735d1e99a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=91=A8=E5=AF=8C?= <2744975513@qq.com> Date: Thu, 14 Dec 2023 13:05:01 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../20231213jquery.md" | 348 ++++++++++++++++++ 1 file changed, 348 insertions(+) create mode 100644 "17 \345\221\250\345\257\214/20231213jquery.md" diff --git "a/17 \345\221\250\345\257\214/20231213jquery.md" "b/17 \345\221\250\345\257\214/20231213jquery.md" new file mode 100644 index 0000000..cccba22 --- /dev/null +++ "b/17 \345\221\250\345\257\214/20231213jquery.md" @@ -0,0 +1,348 @@ +# 笔记 + +### 元素选择器：$("元素名") + + alert($("h1").html()); + + id选择器：$("#id值") + + alert($("#p1").html()); + + 类选择器：$(".类名") + + alert($(".s1").html()); + +### 并集选择器：$("选择器1,选择器2") + + alert($("#p1,#p2").length); // 选中id值为p1或p2的元素 + +### 交集选择器：$("选择器1选择器2选择器n") + + alert($("p#p2").html()); // 表示选中id值为p2的p标签 + +### 全局选择器：$("ul *") + + alert($("*").length); + + $('.content *').css('background', 'red'); 选择页面中class为content的div下所有元素，设置其背景为红色。 + +### 层次选择器 + + -相邻选择器（只选择后面的那个元素）：$("选择器1+选择器2") + + -同辈选择器（只选择后面的那些元素）:$("选择器1~选择器2") + + -后代选择器：$("选择器1 选择器2") + + -子代选择器：$("选择器1>选择器2") + +### 相邻选择器 + + alert($("#l2+li").html()); 选中紧挨着id属性值为l2的li元素 + + alert($(".l1~li").length); 选中紧挨着后面的li元素 + + alert($("ul>li").length); 选中ul的子代元素 + +### 属性选择器 + + ("[属性名]")：选中所有带有该属性的元素alert(("[属性名]")：选中所有带有该属性的元素�����(("[class]").length); // 选中所有带有class属性的元素 + + $("[属性名='属性值']")：选中属性值等于该属性值的元素 + + $("[属性名!='属性值']")：选中属性值不等于该属性值的元素 + + $("[属性名^='属性值']")：选中以该属性名开头的元素 + + ("[属性名("[属性名='属性值']")：选中以该属性值结尾的元素 + + $("[属性名*='属性值']")：选中包含该属性值的元素 + + alert($("[id^='p']").length); // 选中id属性以p开头的元素 + + alert($("[id*='s']").length); // 选中id属性包含s的元素 + +### 过滤选择器 顺序由0开始 + + nth-child(自然数) + + :first：最开头那一个（即0） + + :last:最后那一个 + + :even：偶数(索引的奇偶) + + :odd：奇数 + + :eq(index)：第index个 + + :gt(index)：大于第index个的全部元素 + + :lt(index)：小于第index个的全部元素 + + :not：除了什么以外的全部元素 + + alert($("ul>li:first").html()); // 选择ul的所有li后代中的第一个 + + alert($("ul>li:last").html()); // 选择ul的所有li后代中的第一个 + + alert($("ul>li:even").length); // 选择ul的所有li后代中的偶数元素 + + alert($("ul>li:eq(2)").html()); // 选择ul的所有li后代中的第二个，从0开始 + + alert($("li:not(ul>li:eq(2))").length); // 选择ul的所有li中等于第三个以外的元素 + +### jQuery事件 + + 1.以on开头，比如鼠标单击事件onclick，onchange,onready,onblur,oninput, + + javascript事件一般通过注册事件句柄实现绑定 + + 2.js事件通常是一个函数，通过事件驱动执行，js函数内部可以使用jquery方式进行选中元素 + + 3.位置：js事件函数写在标签内，ready()外 + + 定义onclick事件函数 + + function jsClick(){ + + alert("js鼠标单击事件..."); + + 使用jquery选中选中其它元素 + + $("#myText").css("background-color","red"); + + } + +### 2.jQuery事件 + + jquery事件： + + 1.没有on，直接以js事件去掉相应的on即可 + + 2.位置：ready()内 + + ready(function){ + + $("jquery选择器").事件类型(function(){ + + 事件体... + + }) + + } + + */ + + $(document).ready(function(){ + + 鼠标单击事件 + + $("#myButton").click(function(){ + + $("#myText").css("background-color","red"); + + }) + + })// ready()结束标记 + +### 3.常见的jQuery事件 + + 鼠标事件 + + -click：鼠标单击 + + -- dblclick 双击 + + -mouseover：鼠标进入（进入子元素也会触发） + + -mouseout：鼠标离开（离开子元素也会触发） + + -focus：元素获得焦点 + + -blur：元素失去焦点 + + 键盘事件 + + -keydown：键盘按下事件，从上到下的过程 + + -keyup：松开键盘 + + -keypress：键盘被按到最底部 + + 绑定事件 + + 1.形式 addEventLister("事件名",函数) + + $("jquery选择器").bind("事件名",函数) + + 好处：更加通用 + + 2.多组事件绑定： + + $("jquery选择器").bind({"事件名":函数，"事件名":函数，"事件名":函数，}) + +### 作业 + +```js +function render() { + $.ajax({ + url: 'https://hmajax.itheima.net/api/books', + type: 'get', + data: { + creator, + }, + success: (result) => { + const data = result.data; + $('tbody').html( + data.map((item, index) => { + const {id, bookname, author, publisher} = item; + return ` + ${index + 1} + ${bookname} + ${author} + ${publisher} + + 删除 + 编辑 + + ` + }).join('')) + }, + error: error => { + console.log(error) + } + }) + render() +} + + +const addModal = $('.add-modal')[0]; +const newAddModal = new bootstrap.Modal(addModal) +//添加里的保存单机事件 +$('.add-btn').on('click', () => { + const form = $('.add-form')[0]; + const book = serialize(form, {hash: true, empty: true}); + $.ajax({ + url: 'https://hmajax.itheima.net/api/books', + type: 'post', + data: { + creator, + ...book + }, + success: () => { + form.reset(); + newAddModal.hide(); + render(); + }, + error: (error) => { + console.log(error) + } + } + ) + +}) +//删除单机事件 +$('tbody ').on('click', '.del', function () { + const id = $(this).parent().data('id'); + if (!confirm('是否要删除')) { + return 0; + } else { + $.ajax({ + url: 'https://hmajax.itheima.net/api/books/' + id, + type: 'delete', + success: () => { + render(); + }, + error: (error) => { + console.log(error); + } + }) + } +}).on('click', '.edit', function () { + const id = $(this).parent().data('id'); + const editModal = $('.edit-modal'); + const newModal = new bootstrap.Modal(editModal); + newModal.show(); + const form = $('.edit-form')[0]; + $.ajax({ + url: 'https://hmajax.itheima.net/api/books/' + id, + type: 'get', + success: (result) => { + const {bookname, author, publisher} = result.data + $('.bookname')[1].value = bookname; + $('.author')[1].value = author; + $('.publisher')[1].value = publisher; + }, + error: (error) => { + console.log(error) + } + }) + $('.edit-btn').bind('click', () => { + const book = serialize(form, {hash: true, empty: true}); + console.log(book) + $.ajax({ + url: "https://hmajax.itheima.net/api/books/" + id, + type: 'put', + data: { + creator, + ...book, + }, + success: () => { + newModal.hide(); + render(); + }, + error: (error) => { + console.log(error) + } + }) + }) +}) + +function getSliderData(index) { + let newIndex = index % sliderData.length; + let a = sliderData[newIndex % sliderData.length]; + $('.slider-wrapper img')[0].src = a.url; + $('.slider-footer p')[0].innerHTML = a.title; + $('.slider-footer')[0].style.backgroundColor = a.color; + $('.slider-indicator .active')[0].classList.remove('active'); + $('.slider-indicator li')[newIndex].classList.add('active'); +} + +let index = 0; + +let interval = setInterval(function () { + getSliderData(index); + index++; +}, 1000) +function prev() { + index--; + if (index <= 0) { + index = sliderData.length + } + getSliderData(index); +} + +function next() { + index++; + getSliderData(index); +} + + +$('.toggle').on('click', '.prev', function () { + prev(); +}).on('click', '.next', function () { + next(); +}) + +$('tbody').ready( + $('.slider').mouseenter(function (){ + console.log(123) + clearInterval(interval); +}).mouseleave(function (){ + interval=setInterval(function () { + index++; + getSliderData(index); + }, 1000) + })); +``` -- Gitee