JavaWeb基础-1.jQuery

最新推荐文章于 2022-02-06 21:05:35 发布

VIP文章盖大大

最新推荐文章于 2022-02-06 21:05:35 发布

阅读量74

点赞数

分类专栏： JavaWeb基础文章标签： javaweb

本文链接：https://blog.csdn.net/u014215131/article/details/114164982

版权

1. jQuery介绍

是JavaScript和Query，辅助JavaScript开发的js类库

2. jQuery核心函数

$是jQuery的核心函数，$()就是调用$这个函数
传入参数为函数时，表示页面加载完成后，相当于window.οnlοad=function(){}
传入参数为HTML字符串时，会帮我们创建这些HTML标签对象
传入参数为选择器字符串时，$("#id属性值") 等于 id选择器，根据id查询标签对象；$(“标签名” )等于标签名选择器，根据指定的标签名查询标签对象
传入参数为DOM对象时，会把这个DOM对象转换为jQuery对象

3. jQuery对象和DOM对象

3.1 jQuery对象和DOM对象使用区别

jQuery对象是DOM对象的数组＋jQuery提供的一系列功能函数
jQuery对象不能使用DOM对象的属性和方法
DOM对象也不能使用jQuery对象的属性和方法

3.2 DOM对象和jQuery对象转化

$(DOM对象)就可以转成jQuery对象
jQuery对象[小标]取出相应的DOM对象

4. jQuery选择器

4.1 基本选择器

#id
element
.class
*

4.2 层级选择器

ancestor descendant 祖先元素下所有的后代元素
parent > child 直接子元素
prev + next 紧接在prev元素后的next元素
prev ~ siblings prev元素之后所有的元素

4.3 过滤选择器

4.3.1 基本过滤器

:first 获取第一个元素
:last 获取最后的元素
:not(selector) 取反
:even 匹配索引值为偶数的元素
:odd 索引值为奇数的元素，从0开始
:eq(index) 匹配一个给定索引值的元素
gt(index) 大于给定索引值的元素
lt(index) 小于给定索引值的元素
:header h1-h6
:animated 正在执行动画效果的元素

4.3.2 内容过滤器

:contains(text) 匹配包含给定文本的元素
:empty 所有不包含子元素或者文本的空元素
:parent 非空的
:has(selector) 匹配含有选择器所匹配的元素的元素

4.3.3 属性过滤器

[attribute] 匹配包含给定属性的元素
[attribute=value] 属性是某个值的元素
[attribute!=value] 不含有指定属性或属性不等于特定值的元素
[attribute^=value] 给定的属性以某些值开始的元素
[attribute$=value] 结尾的
[attribute*=value] 包含的

4.3.4 表单过滤器

:input 匹配所有表单，很少用
:text 匹配素有的单行文本框
:password 所有密码框
:radio 单选
:checkbox 复选框
:submit 提交按钮
:reset 重置按钮
:buttom 按钮
:hidden 不可见的元素或type为hidden的元素

4.3.5 表单对象属性过滤器

:enabled 匹配所有可用元素
:disabled 不可用
:checked 被选中的（单选、复选框）
:selected 选中的option元素

5. jQuery元素筛选

方法	作用	功能
eq()	获取给定索引的元素	跟:eq一样
first()	获取第一个元素	跟:first一样
last()	获取最后一个元素	:last一样
filter(eq)	过滤，留下匹配元素
is()	判断是否匹配给定的选择器，有一个匹配返回true
has(exp)	返回包含有匹配选择器的元素的元素	:has
not(exp)	删除匹配选择器的元素	:not
children(exp)	返回匹配给定选择器的子元素	parent>children
find(exp)	返回匹配给定选择器的后代元素	祖先后代
next()	返回当前元素的下一个兄弟元素	prev+next
nextAll()	当前元素的同辈元素	prev~siblings
nextUntil()	当前元素到指定匹配元素为止
parent()	返回父元素
prev(exp)	当前元素的上一个兄弟元素
prevAll()	返回当前元素所有的兄弟元素
siblings(exp)	返回所有兄弟元素
add()	把add匹配的选择器元素添加到当前jquery对象中

6. jQuery的属性操作

html() 可以设置和获取起始标签和结束标签中的内容，跟DOM属性innerHTML一样
text() 可以设置和获取文本，跟DOM属性innerText一样
val() 可以设置和获取表单项的value值，跟DOM属性value一样
attr() 可以设置和获取属性的值，不推荐操作checked,readOnly,selected,disabled。还可以操作非标准的属性，比如自定义属性abc,bcd…
prop() 对于一些属性，返回undefined时，attr()不推荐的使用prop()

6.1 练习：全选、全不选，反选

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
    
            $("#checkedAllBtn").click(function () {
    
                $(":checkbox").prop("checked", true);
            });
            $("#checkedNoBtn").click(function () {
    
                $(":checkbox").prop("checked", false);
            });
            $("#checkedRevBtn").click(function () {
    
                $(":checkbox[name='items']").each(function () {
    
                    this.checked = !this.checked;
                });
                var allCount = $(":checkbox[name='items']").length;
                var checkCount = $(":checkbox[name='items']:checked").length;

                $("#checkedAllBox").prop("checked", allCount == checkCount);
            });
            $("#sendBtn").click(
                function () {
    
                    $(":checkbox[name='items']:checked").each(function () {
    
                        alert(this.value);
                    });
                }
            );

            $("#checkedAllBox").click(function () {
    

                $(":checkbox[name='items']").prop("checked", this.checked);
            });
            $(":checkbox[name='items']").click(function () {
    
                var allCount = $(":checkbox[name='items']").length;
                var checkCount = $(":checkbox[name='items']:checked").length;

                $("#checkedAllBox").prop("checked", allCount == checkCount);
            });
        });
    </script>
</head>
<body>

<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全　选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id

最低0.47元/天解锁文章

盖大大

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb基础-1.jQuery

1. HTML1.1 书写规范<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <t
复制链接

扫一扫