目录
jQuery的入门及了解：
使用时必须使用script标签引入jQuery！
推荐在头部引入，当然body也可以：
代码如下：
了解js与jQuery的加载函数：
一般使用简写的写法！
<!-- 原生态JS代码实现点击弹窗 --> <script type="text/javascript"> //加载函数(两种方法)： // 1.window.onload = function(){} // 2.window.addEventListener('load',function(){}); window.onload = function() { //获取按钮 var btn1 = document.getElementById('btn1'); //设置按钮的事件 btn1.onclick = function() { alert(123); } } </script><!-- jQuery代码实现点击弹窗 --> <script type="text/javascript"> //加载函数: // 1.标准写法$(document).ready(function(){}); // 2.简写写法$(function(){}) $(function() { //获取按钮设置的点击事件 //这种编写代码的方式称为链式写法--自执行函数结构 $("#btn2").click(function() { alert(123) }); }); </script>
了解js的函数与jQuery的自执行函数：
普通函数必须手动的调用：
但是自执行函数会自动调用：
<script type="text/javascript"> //普通函数 function add() { alert(123) } //需要手动调用 // add(); //自执行函数的定义： //闭合函数需要在后面加一队圆括号才能自执行 //闭合函数 (function() { alert('123'); }) // 自执行函数 (function() { alert('wbb'); }())
$与$()的比较和js与jQuery的的判断：
注意：jQuery=$
但是js!=jQuery
// $与$()的作用 // $这个符号是在jQuery库中定义 属于jQuery // $有点类似于原生态js的window对象 // 在jQuery中，$作为了window对象中的一个属性(对象属性) // 若调用了jQuery文件后执行以下代码可以在后台控制台看到"$"这个符号 console.log(window); // window.jQuery = window.$ = jQuery; // $等价于jQuery // $有点类似于Java的类 each isFunction // $()相当于类的构造方法 // 判断$的类型 console.log($.type($)); //function console.log(Object.prototype.toString.call($)); //Object function // $()括号中可以根据需求传入制定的参数 // 根据参数不同，则意思也不同 // 1.参数为匿名函数时，意思：加载函数($function(){}); // 2.参数为字符串时，有两层意思： // 2.1获取页面的元素（选择器） $("#id") $(".class") // 2.2创建标签 $("<a></a>"); // 3.参数为DOM对象（js对象）意思：转换--下一节介绍 var b1 = document.getElementById('btn1'); var $b1 = $("#btn1"); console.log(b1 === $b1); //flash console.log(b1 == $b1); //flash
jQuery中一些选择器的使用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* *{margin: 0px;padding: 0px;} */ </style> <!-- jQuery --> <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 选择器 // jQuery中的选择器就是一个标记，为了快速获取指定的标签 // jQuery中常见选择器： ID选择器 class选择器 element选择器 // 子代选择器 后代选择器 相邻兄弟选择器 分组选择器... // 加载函数 $(function() { // ID选择器的使用 // 需求：找到id为ul1的标签设置color字体颜色 // jQuery的样式设置 通过css方法进行设置即可 // 一个属性设置 // $("#ul1").css("color","red"); // 多个属性的设置 通过json格式进行 // {"属性":"属性值","属性":"属性值"} $("#ul1").css({ "background":"red", "color":"yellow" }); // 类选择器 一组元素 $(".sb").css("background","red"); // 元素选择器 一组元素 $("li").css("background","red"); // 通配符选择器 * $("*").css("background","red"); // 群组选择器 可以同时设置多个标签的样式 $("#ul1,.oBox").css("background","red"); // 设置ul下的子li的字体颜色 $("#ul1>li").css("color","red"); // 所有后代 $("#ul1 li").css("color","red"); // 过滤选择器的使用 // :first 获取第一个节点 $("#ul1>li:first").css("background","red"); :last 获取最后一个节点 $("#ul1>li:last").css("background","red"); // 获取指定的节点 下标 $("#ul1>li:eq(2)").css("background","yellow"); // even 奇数 过滤下标为偶数，位置为奇数的标签 $("#ul1>li:even").css("background","yellow"); // odd 偶数 过滤下标为奇数，位置为偶数的标签 $("#ul1>li:odd").css("background","yellow"); // gt() 大于 不包括自己 $("#ul1>li:gt(2)").css("background","yellow"); // lt() 小于不包括自己 $("#ul1>li:lt(2)").css("background","yellow"); // 区间设置背景颜色 // 设置item2 item3 item4 背景 1 2 3 // 注意事项：如果gt和lt混合使用，并且gt在前，那么获取后元素的下标胡i重新编号。 $("#ul1>li:gt(0):lt(3)").css("background","yellow"); // lt在前 $("#ul1>li:lt(4):gt(0)").css("background","yellow"); // 案例：隔行换颜色 // $("table>tbody>tr:gt(0):even").css("background","red") $("table tr:gt(0):even").css("background", "red"); $("table tr:gt(0):odd").css("background", "yellow"); // 找到包含YANGWENGUANG内容的li标签设置背景 $("#ul1>li:contains('YANGWENGUANG')").css("background","yellow") // 表单选择器 $(":input").css("background","red"); $("form>input:input").css("background","red"); // 获取普通文本 $("form>input:input:text").css("background","red"); // 单选 console.log($("#demo1>input:radio")); // 获取选中 console.log($("#demo1>input:radio:checked")); // 获取value console.log($("#demo1>input:radio:checked").val()); // 复选框 console.log($("#demo2>input:checkbox")); // 获取选中的复选框 console.log($("#demo2>input:checkbox:checked")); // each方法 // $("#demo2>input:checkbox:checked").each(function(){ console.log($(this).val()); }); // var checkboxs = $("#demo2>input:checkbox:checked"); // i 下标 // k 元素 $.each(checkboxs,function(i,k){ // console.log(i,k); console.log($(k).val()) }); }); </script> </head> <body> <script type="text/javascript"> // console.log(window) </script> <ul id="ul1"> <li>item1</li> <p>hehe</p> <li class="sb">item2</li> <li>item3</li> <span>heihei</span> <li>item4 YANGWENGUANG</li> <li class="sb">item5</li> <p>lvelve</p> <ol> <li>abc1</li> <li>abc2</li> <li>abc3</li> <li>abc4</li> <li>abc5</li> </ol> </ul> <hr> <div class="oBox"> 我是div </div> <hr> <h4>表格隔行换颜色</h4> <table border="1" width="100%" height="400"> <tr style="background-color: gray;"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <hr> <h4>表单选择器</h4> <form action=""> <input type="text"> <input type="password"> <input type="radio"> <input type="checkbox"> <input type="file"> <input type="text"> <input type="submit"> <input type="reset"> <input type="password"> <input type="image"> <select name="" id=""> <option value =""></option> </select> <textarea rows="12" cols="4"></textarea> </form> <input type="text"> <hr> <div id="demo1" style="width: 200px;height: 200px;border: 1px solid red;"> <input checked="checked" type="radio" name = "sex" value = "男">男 <input type="radio" name = "sex" value = "女">女 <input type="text"> </div> <hr> <div id="demo2" style="width: 200px;height: 200px;border: 1px solid red;"> <input type="checkbox" value = "杨文广">杨文广 <input checked = "checked" type="checkbox" value = "李小鹏">李小鹏 <input type="checkbox" value = "沪青棒">沪青棒 <input checked = "checked" type="checkbox" value = "写开进">写开进 <input checked = "checked" type="checkbox" value = "等延康">等延康 <input type="text"> </div> </body> </html>
130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
