jQuery_01

简介: jQuery_01

1.jQuery中的和()使用

//点击按钮进行图片隐藏jQuery和js的区别
<head>
<script src="js/jquery-3.6.4.js"></script>
</head>
<body>
<button id="btn">jQuery</button>
<div id="oDiv1"></div>
<button id="btn2">原生js</button>
<div id=“oDiv2”></div>
<script>
//获取btn设置点击事件 隐藏oDiv1
//链式编程
//jQuery
$("#btn").click(function()){
$("#oDiv1").hide(3000);
});
//js
document.getElementById("btn2").onclick=function(){
document.getElementById("oDiv2").style.dispaly="none";
}
</script>
</body>

1.1.jQuery文件的结构

//沙箱结构,自执行函数

(function(){})()

(function(){}())

列:

(function(){
elert(123);
})()

1.2.任何使用$的地方都可以用jQuery替代


1.3.jQuery文件中对外提供了两个属性:$和jQuery


1.4.$这个符号可以当做函数使用,也可以当做对象使用


$.type(值) 等价于js中的typeof() //查看类型


()可以叫做jQuery的构造函数”;()可以叫做jQuery的构造函数”;(function(){}),(“选择器”),(“选择器”),(“标签”), $(DOM对象)

2.jQuary选择器的使用

<head>
<script src=“js/jQuery-3.6.4.js"></script>
<script>
//1.载入函数--如果代码写在body中,必须有
$(document).ready(function(){
alert(123);
});
//简写
$(function(){
alert(456);
});
</script>
</head>
<body>
<ul id="oUl">
            <li class="a">item1</li>
            <li>item2</li>
            <li>item3</li>
            <li class="a">item4</li>
            <li>item5</li>
            <p>haha</p>
            <span>hehe</span>
            <p>haha</p>
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <ul>
                    <li>xx1</li>
                    <li>xx2</li>
                    <li>xx3</li>
                    <li>xx4</li>
                </ul>
            </ol>
        </ul>
<table id="tab" border="1" width="100%">
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
<h2>表单选择器的使用</h2>
        <input checked type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女
<input checked type="checkbox" name="hobby" value="唱歌">唱歌
<input type="checkbox" name="hobby" value="跳舞">跳舞
<input type="checkbox" name="hobby" value="rap">rap
<input checked type="checkbox" name="hobby" value="喝水">喝水
<input type="checkbox" name="hobby" value="撸铁">撸铁
<script>
//基本选择器的使用
//基本语法:$("选择器的名称");===》返回结果标签对象
//id  选择器+ " # "
//class 类选择器+ " . "
//元素   元素选择器   直接编写标签名称即可
$(function(){
//css方法   设置标签的样式   以键值对的形式进行编写
//一个属性的设置
$("#oUl").css("background","red");
//多个属性
$("#oUl").css({"background":"red","color":"yellow"});
//类选择器
$(".a").css("background","red");
//元素选择器
$("li").css("background","red");
//通配符选择器
$("*").css("background","red");
//组合选择器
$(".a,p").css("background","red");
//层次选择器
//后代选择器
$("#oUl li").css("background","red");
//子代选择器
$("#oUl>li").css("background","red");
//过滤选择器
//获取oUl下的第一个li标签
$("#oUl>li:first").css("background","red");
//获取oUl下最后一个li标签
$("#oUl>li:last").css("background","red");
//eq(index) 根据标签的下标获取
$("#oUl>li:eq(2)").css("background","red");
//获取偶数下标的标签 even
$("#oUl>li:even").css("background","red");
//获取奇数下标的标签 odd
$("#oUl>li:odd").css("background","red");
//表格隔行换颜色
$("#tab>tbody>tr>li:even").css("background","red");
$("#tab>tbody>tr>li:odd").css("background","yellow");
//gt大于   lt小于
//获取oUl下的所li  求出索引大于2的li
$("#oUl>li:gt(2)").css("background","yellow");
//获取oUl下的所li  求出索引2,3,4
$("#oUl>li:gt(0):lt(4)").css("background","yellow");
//
});
</script>
//通过表单选择器  获取被选中的值
//同一行代码中 js与jQuery不能混合使用
console.log($("input:checked").val());
//获取被选中的复选框value值
console.log($("input:checkbox:checked"));
//i代表下标  n代表对象
$("input:checkbox:checked").each(function(i,n)){
console.log(i,n,$.type(n));
console.log($(this).val());
}
//$.each(遍历的数组或者对象,function(){});
<body>


目录
相关文章
|
7月前
|
JavaScript 前端开发
jQuery
jQuery 选择器是 jQuery 中的核心功能之一,它允许我们通过 CSS 选择器语法来选择 HTML 文档中的元素。jQuery 选择器比 CSS 选择器更加强大,因为它可以用于查找、筛选、选择和操作 HTML 元素,而且不需要了解浏览器的兼容性问题。
37 2
|
2月前
|
Web App开发 JavaScript 前端开发
什么是jQuery
什么是jQuery
29 0
|
7月前
|
JSON JavaScript 前端开发
关于jQuery
关于jQuery
36 2
|
7月前
|
JavaScript 前端开发
什么是jQuery?
什么是jQuery?
|
7月前
|
JavaScript UED 开发者
jQuery Growl
jQuery Growl 是一个基于 jQuery 的通知插件,它可以在网页上显示各种类型的通知,如成功、错误、警告等。Growl 插件基于 jQuery UI 主题,可以自定义通知的样式、位置和显
115 6
|
存储 JavaScript 前端开发
jQuery01
jQuery01
63 0
|
JavaScript CDN
|
JavaScript
jquery效果-20
jquery效果-20
98 0
jquery效果-20
|
JavaScript
jquery的使用-4
jquery的使用-4
92 0
jquery的使用-4
|
设计模式 JavaScript 前端开发
html+js+Jquery(四)
html+js+Jquery(四)
155 0
html+js+Jquery(四)