使用时必须使用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>
扫一扫
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
