diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-23-\344\272\213\344\273\266/.keep" "b/47\346\233\276\345\276\267\346\243\256/2022-11-23-\344\272\213\344\273\266/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-23-\344\272\213\344\273\266/\346\233\276\345\276\267\346\243\256/\344\275\234\344\270\232/\344\275\234\344\270\232.html" "b/47\346\233\276\345\276\267\346\243\256/2022-11-23-\344\272\213\344\273\266/\346\233\276\345\276\267\346\243\256/\344\275\234\344\270\232/\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..356162bb21fc5d6c81756f2687001a86e99a5b8e --- /dev/null +++ "b/47\346\233\276\345\276\267\346\243\256/2022-11-23-\344\272\213\344\273\266/\346\233\276\345\276\267\346\243\256/\344\275\234\344\270\232/\344\275\234\344\270\232.html" @@ -0,0 +1,30 @@ + + + + + + + Document + + +
+ +
+ + + \ No newline at end of file diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-23-\344\272\213\344\273\266/\346\233\276\345\276\267\346\243\256/\347\254\224\350\256\260/\344\272\213\344\273\266.md" "b/47\346\233\276\345\276\267\346\243\256/2022-11-23-\344\272\213\344\273\266/\346\233\276\345\276\267\346\243\256/\347\254\224\350\256\260/\344\272\213\344\273\266.md" new file mode 100644 index 0000000000000000000000000000000000000000..7edf826ba47de800ec59ead0f7061102e4b46eff --- /dev/null +++ "b/47\346\233\276\345\276\267\346\243\256/2022-11-23-\344\272\213\344\273\266/\346\233\276\345\276\267\346\243\256/\347\254\224\350\256\260/\344\272\213\344\273\266.md" @@ -0,0 +1,51 @@ +## 事件 + +onclick相对function优先级更高,两个同时存在只显示onclick里的内容 + +//DOM 0:当有多个同类型事件触发时,只会触发一次 + +var btn=document.queryselector('button'); + +//点击 + +`function aler(){` + +​ `btn.onclick=function(){` + +​ `alert('全是帅哥');` //优先级更高 + +​ `btn.onclick=function(){` + +​ `alert('全是学霸');` + +`}` + +`}` + +`}` + + + +//DOM 2:当有多个同类型事件触发时,会依次触发,兼容性较差 + +`var btn=document.queryselector('button');` //选中按钮 + +//addEventLisetener('事件类型',' '); + +`btn.addEventLisetener('click','fn');` + +`function fn(){` + +​ `alert('2班');` + +`}` + +`btn.addEventLisetener('click',function(){` + +​ `alert('3班');` + +`});` + +//事件取消 + +`btn.removeEventListener('click',fn);` \ No newline at end of file diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-24-jQuery/.keep" "b/47\346\233\276\345\276\267\346\243\256/2022-11-24-jQuery/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-24-jQuery/\344\275\234\344\270\232.html" "b/47\346\233\276\345\276\267\346\243\256/2022-11-24-jQuery/\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..e84d6c6dbc4d18c28e350b373a8cdc5fe3cebda7 --- /dev/null +++ "b/47\346\233\276\345\276\267\346\243\256/2022-11-24-jQuery/\344\275\234\344\270\232.html" @@ -0,0 +1,39 @@ + + + + + + + + Document + + + +
+ 狗 + 猫 + 鼠 +
+

+ + + + \ No newline at end of file diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-24-jQuery/\347\254\224\350\256\260.md" "b/47\346\233\276\345\276\267\346\243\256/2022-11-24-jQuery/\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..6b3717632fa019c1789fc4b878e25db60f88a22a --- /dev/null +++ "b/47\346\233\276\345\276\267\346\243\256/2022-11-24-jQuery/\347\254\224\350\256\260.md" @@ -0,0 +1,93 @@ +# jQuery + +jQuery是一个javaScript库极大的简化了JavaScript编程 + +#### jQuery语法 + +jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作 + +基础语法: + +`$(selectot).action()` + +美元符号定义jQuery + +选择符(selectot)“查询”和“查找”HTML元素 + +jQuery的action()执行对元素的操作 + +`$(this),hide()` //隐藏当前元素 + +`$("p").hide()` //隐藏所有

元素 + +`$("p.test").hide()` //隐藏所有class="test"的元素: + +`$("p")` + +用户点击按钮后,所有

元素隐藏: + +`$(function(){` + +​ `$("button").click(function(){` + +​ `$("p").hide();` + +`});` + +`});` + +##### #id选择器 + +通过id选取元素语法: + +$("#test") + +用户点击按钮后有id="test"属性的元素将被隐藏 + +`$(function(){` + +​ `$("button").click(function(){` + +​ `$("test").hide();` + +`});` + +`});` + +##### class选择器 + +通过class选择: + +`$(".test")` + +用户点击按钮所有的class="test"属性的元素都隐藏: + +`$(function(){` + +​ `$("button").click(function(){` + +​ `$(".test").hide();` + +`});` + +`});` \ No newline at end of file diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-25-jQuery\351\200\211\346\213\251\345\231\250/.keep" "b/47\346\233\276\345\276\267\346\243\256/2022-11-25-jQuery\351\200\211\346\213\251\345\231\250/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-25-jQuery\351\200\211\346\213\251\345\231\250/\344\275\234\344\270\232.html" "b/47\346\233\276\345\276\267\346\243\256/2022-11-25-jQuery\351\200\211\346\213\251\345\231\250/\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..513b9350cf1619ce940d7e9a24385009dfef024e --- /dev/null +++ "b/47\346\233\276\345\276\267\346\243\256/2022-11-25-jQuery\351\200\211\346\213\251\345\231\250/\344\275\234\344\270\232.html" @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + +
第一行第一行
第二行第二行
第三行第三行
第四行第四行
第五行第五行
+ + \ No newline at end of file diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-25-jQuery\351\200\211\346\213\251\345\231\250/\347\254\224\350\256\260.md" "b/47\346\233\276\345\276\267\346\243\256/2022-11-25-jQuery\351\200\211\346\213\251\345\231\250/\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..6b3717632fa019c1789fc4b878e25db60f88a22a --- /dev/null +++ "b/47\346\233\276\345\276\267\346\243\256/2022-11-25-jQuery\351\200\211\346\213\251\345\231\250/\347\254\224\350\256\260.md" @@ -0,0 +1,93 @@ +# jQuery + +jQuery是一个javaScript库极大的简化了JavaScript编程 + +#### jQuery语法 + +jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作 + +基础语法: + +`$(selectot).action()` + +美元符号定义jQuery + +选择符(selectot)“查询”和“查找”HTML元素 + +jQuery的action()执行对元素的操作 + +`$(this),hide()` //隐藏当前元素 + +`$("p").hide()` //隐藏所有

元素 + +`$("p.test").hide()` //隐藏所有class="test"的元素: + +`$("p")` + +用户点击按钮后,所有

元素隐藏: + +`$(function(){` + +​ `$("button").click(function(){` + +​ `$("p").hide();` + +`});` + +`});` + +##### #id选择器 + +通过id选取元素语法: + +$("#test") + +用户点击按钮后有id="test"属性的元素将被隐藏 + +`$(function(){` + +​ `$("button").click(function(){` + +​ `$("test").hide();` + +`});` + +`});` + +##### class选择器 + +通过class选择: + +`$(".test")` + +用户点击按钮所有的class="test"属性的元素都隐藏: + +`$(function(){` + +​ `$("button").click(function(){` + +​ `$(".test").hide();` + +`});` + +`});` \ No newline at end of file diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-28-jQuery\344\272\213\344\273\266/.keep" "b/47\346\233\276\345\276\267\346\243\256/2022-11-28-jQuery\344\272\213\344\273\266/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-28-jQuery\344\272\213\344\273\266/\344\275\234\344\270\232.html" "b/47\346\233\276\345\276\267\346\243\256/2022-11-28-jQuery\344\272\213\344\273\266/\344\275\234\344\270\232.html" new file mode 100644 index 0000000000000000000000000000000000000000..402ebd2b70278104f2b3e3f8af7ddb05f96deeb8 --- /dev/null +++ "b/47\346\233\276\345\276\267\346\243\256/2022-11-28-jQuery\344\272\213\344\273\266/\344\275\234\344\270\232.html" @@ -0,0 +1,90 @@ + + + + + + + + Document + + + + +

+ 0 + 1 + 2 + 3 + +
+
+
+
+ +
+
+
+ 用户名:
+ 密 码:
+ 确认密码:
+
+
+ + + + \ No newline at end of file diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-28-jQuery\344\272\213\344\273\266/\347\254\224\350\256\260.md" "b/47\346\233\276\345\276\267\346\243\256/2022-11-28-jQuery\344\272\213\344\273\266/\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..e2f316a3e856c0b93474b329ea63aff99b256882 --- /dev/null +++ "b/47\346\233\276\345\276\267\346\243\256/2022-11-28-jQuery\344\272\213\344\273\266/\347\254\224\350\256\260.md" @@ -0,0 +1,125 @@ +# jQuery事件 + +在事件中经常使用术语“触发” + +#### jQuery事件方法语法 + +页面中指定一个点击事件: + +`$("p").click();` + +定义了点击后触发事件,可以通过一个事件函数实现: + +`$("p").click(function(){` + +​ `//动作触发后执行的代码` + +`})` + +#### 常用的 jQuery 事件方法 + +##### click() + +click() 方法是当按钮点击事件被触发时会调用一个函数 + +当点击事件在某个

元素上触发时,隐藏当前的

元素: + +`$("p").click(function(){` + +​ `$(this).hide();` + +`});` + +##### dblclick() + +当双击元素时,会发生 dblclick 事件。 + +dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数: + +`$("p").dblclick(functipn(){` + +​ `$(this).hide();` + +`});` + +##### mouseenter() + +当鼠标指针穿过元素时,会发生 mouseenter 事件。 + +mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数: + +`$("#p1").mouseenter(function(){` + +​ `aletr('你的鼠标移到了id='p1'的元素上')` + +`})` + +##### mouseleave() + +当鼠标指针离开元素时,会发生 mouseleave 事件。 + +mouseleave() 方法触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数: + +`$("#p1").mouseleave(function(){` + +​ `alert("再见,您的鼠标离开了该段落。");` + +`});` + +##### mousedown() + +当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。 + +mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数: + +`$("#p1").mousedown(function(){` + + `alert("鼠标在该段落上按下!");` + + `});` + +##### mouseup() + +当在元素上松开鼠标按钮时,会发生 mouseup 事件。 + +mouseup() 方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数: + +`$("#p1").mouseup(function(){` + +​ `alert("鼠标在段落上松开。");` + +`});` + +##### hover() + +hover()方法用于模拟光标悬停事件。 + +当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。 + +`$("#p1").hover(` + +`function(){` + +​ `alert("你进入了 p1!");` + + `},` + +`function(){` + +​ `alert("拜拜! 现在你离开了 p1!");` + +​ `} );` + +##### focus() + +当元素获得焦点时,发生 focus 事件。 + +当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。 + +focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数: + +`$("input").focus(function(){` + +​ `$(this).css("background-color","#cccccc");` + + `});` \ No newline at end of file