登录
当前位置： 首页 > 工具软件 > jQuery Collapse > 使用案例 >

jquery

姚骁
2023-12-01

1、JQuery操作html的值

①、html()===>JS中的innerHTML:

②、text()====>JS中的innerText:

③、val()=====>获取输入元素的值:

2、jquery绑定html元素的事件

①、jqObj.事件名称(function(){});

$('#id1').click(function(){}

3、通过jquery对象操作html属性

获取：jqObj.attr(“属性名”);

设置：

①、jqObj.attr(“属性名”，‘属性值’);

②、jqObj.attr(“属性名”，function(){});

③、jqObj.attr(json);

4、jquery对象与dom对象转化

①、dom转成jquery对象：在dom对象外加上 $（domObj）即可

②、jqObj转化成dom对象： jqObj.get(0) \ jqObj[0]即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="../comm/jquery-2.1.4.js"></script>
		<script type="text/javascript">
			// dom对象能干啥？
			// var domObj=document.getElementById("userid");
			// ①:修改元素的css样式,
			// ②:动态操作html元素的属性,
			// ③:完成对html的动态操作(添加和删除)
			// 文档准备就绪
			$(document).ready(function(){
				
				$('#id1').click(function(){
					// ①:获取被操作的div元素的jquery对象
					var jqObj=$('#div1');
				// ②:获取div的值,并打印到浏览器的控制台
					var txt=jqObj.html();
					console.log(txt);
					console.log(jqObj.text());
					console.log($('#userid').val());
				});
				$('#id1').dblclick(function(){
					alert('test');
				});
				$('#id1').mouseenter(function(){
					alert('enter event');
				});
				
				
				// ①:修改元素的css样式：
				// ②:动态操作html元素的属性,
				// ③:完成对html的动态操作(添加和删除)
				
				$('#id2').click(function(){
					// $('#userid').val("ok吗");
					// $('#div1').html('哈哈 你是坏蛋');
					$('#userid').val(function(){
						return 'abcde';
					});
				});
				$('#id3').click(function(){
					$('img').attr('src','../images/a0.jpg');
				});
				$('img').mouseleave(function(){
					//this：一定是dom对象
					// console.log(this.attr('src'));×
					$(this).attr('src','../images/a2.jpg');
					console.log($('#div1').get(0).innerHTML);
					console.log($('#div1')[0].innerHTML);
				});
				$('#id4').click(function(){
					// console.log($('#div2').attr('id','ssssss'));
					// $('#div2').attr('id','ssssss');
					// $('#div2').attr('id',function(){
					// 	return 'abcde';
					// });
					var json={'id':'abc','width':'300px','height':'400px'};
					$('#div2').attr(json);
				});
				$('#id5').click(function(){
					for(var i=0;i<$('li').length;i++){
					//  var dom=$('li')[i];
					// 	console.log($(dom).html());
					// }
					$('li').each(function(index,ele){
						console.log(ele.innerHTML +'   =  '+ index+'   =  '+$(ele).html());
					});
				});
			});
		</script>
		<title></title>
	</head>
	<body>
		<button id="id1">获取对应的html元素的jq对象</button>
		<button id="id2">设置值</button>
		<button id="id3">设置属性</button>
		<button id="id4">获取属性</button>
		<button id="id5">........</button>
		
		<div id="div2">div2的值</div>
		<ul>
			<li>li1的值</li>
			<li>li2的值</li>
			<li>li3的值</li>
			<li>li4的值</li>
			<li>li5的值</li>
		</ul>
		
		<hr>
		<div id="div1">div1<span>的</span>值</div>
		<input type="text" id="userid" placeholder="用户编号"/>
		<!-- <img src="../images/a1.jpg"/> -->
	</body>
</html>

通过jquery对象完成html元素的操作

①、设置|获取html元素的值 html() text() val();

②、操作html元素的属性 attr()方法

​ Ⅰ 、设置单一属性的值 attr(属性名，属性值)

​ Ⅱ、通过回调方法设置属性的值 attr(属性名，function(){});

​ Ⅲ、通过json设置多个属性的值 attr(json);

③、通过jquery(jq) 操作html元素的css样式

④、动态完成html元素的添加和删除

⑤、完成对html元素事件的操作

实验：在页面中添加一个table，然后通过jquery动态的向table添加tr元素，内容自拟。动态删除tr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="comm/jquery-2.1.4.js"></script>
    <script type="text/javascript">
        $(function(){
            var a=1;
            $('button#btn1').click(function(){
                $('<tr></tr>').append('<td>张飞'+a+++'</td>').append('<td>40</td>').append('<td>五国</td>').appendTo($('table'));
                // $('table').append(tr);
            });
            $('button#btn2').click(function(){
                // remove  empty
                $('#tbl1 tr:last').remove();
            });
        });
    </script>
</head>
<body>
    <button id="btn1">添加一行</button>
    <button id="btn2">删除一行</button>
    <table border="1px" id='tbl1'>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>30</td>
            <td>三国</td>
        </tr>
        <tr>
            <td>关羽</td>
            <td>30</td>
            <td>四国</td>
        </tr>
    </table>
    <hr>
    <table border="1px" id='tbl2'>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        <tr>
            <td>刘备</td>
            <td>30</td>
            <td>三国</td>
        </tr>
        <tr>
            <td>关羽</td>
            <td>30</td>
            <td>四国</td>
        </tr>
    </table>
</body>
</html>

5、json

Javascript的对象表示法，是数据交换的一个产物。在B/S结构中，经常将数据封装成JSON格式然后在A一端传递到B的一端

语法：

“key”:“value”; 在js中，json对象必须用{}括起来。

var json={“userid”:“rock”,“password”:“123456”,…,“keyn”:“valuen”};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="comm/jquery-2.1.4.js"></script>
    <script type="text/javascript">
        // json的第一种表达方式
        var obj={"userid":"rock","password":"123456","address":"辽宁大连"};
        console.log(obj.password);
        console.log(obj.address);
        
        // json的第二种表达方式
        var obj1={"userid":"rock","password":"123456","address":"辽宁大连","fullname":{
            "firstname":"刘",
            "lastname":"备"
        }};
        console.log(obj1.fullname.firstname);
        console.log(obj1.fullname.lastname);
        
        

        </script>
</head>
<body>
    <table border="1px">
        <tr>
            <td>新闻编号</td>
            <td>新闻标题</td>
            <td>新闻内容</td>
        </tr>
        
    </table>
    <script type="text/javascript">
    // json的第三种表达方式
    var newsJson=[{
            "newsid":"N0001",
            "title":"中国辽宁大连下冰雹了",
            "body":"是多少度发的说法撒都法师法"
        },{
            "newsid":"N0002",
            "title":"中国辽宁沈阳下冰雹了",
            "body":"是多少度发的说法撒都法师法"
        },{
            "newsid":"N0003",
            "title":"中国辽宁鞍山下冰雹了",
            "body":"是多少度发的说法撒都法师法"
        }];
        
        // {"userid":"rock","password":"123456","address":"辽宁大连","fullname":{
        //     "firstname":"刘",
        //     "lastname":"备"
        // }};
        // for(var i=0;i<obj2.length;i++){
        //    var json1=obj2[i];
        //    console.log(json1.newsid+"="+json1.body);
        // }
        // 将被遍历的对象放在each方法的第一个参数
       
        $.each(newsJson,function(index,element){   //element === json
            // console.log(typeof element);
            // 将newsJson中的所有数据封装成tr元素后添加到table中
            var trObj=$('<tr></tr>');
            $.each(element,function(key,value){   //
              $('<td></td>').append(value).appendTo(trObj);
            });
            $('table').append(trObj);
        });
    </script>
</body>
</html>

6、前课回顾

①、操作html元素的值 ：html() text() val()

②、操作html元素的属性：attr()方法

​ 获取：attr(属性名);

​ 设置：attr(属性，属性值)

​ attr(属性名，function(){});

​ attr(json);

③、操作html元素的css样式

④、动态完成html元素的操作（添加：append prepend before after() appendTo()。删除：empty(),remove（））

⑤、响应html元素的事件

json：javascript对象表示法，用于数据交换。

①、{key:value,…}

②、{key:{}，key:{}}

③、[{},{},{}]

jquery对象和dom对象转换

①、dom转成jquery对象：在dom对象前加 $ var jqueryObj=$(dom);

②、jquery转成dom对象：jqueryObj.get(0) jqueryObj[0];

7、jquery 表单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ke88It32-1629969168452)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210601100945896.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .useridtxt{
            color:red;
        }
    </style>
    <script type="text/javascript" src="comm/jquery-2.1.4.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn-register').click(function () {
                // 步骤1：获取文本框中的内容
                var userid=$('#userid').val();//就是文本中的内容
                // 步骤2：判断这个内容是否符合要求
                var reg=/^[a-zA-Z0-9]{6,10}$/;
                if(!reg.test(userid)){
                    // $('#useridtxt').html('非法，推荐[aaa123]').css('color','red');
                    $('#useridtxt').html('非法，推荐[aaa123]').addClass('useridtxt');
                    return false;
                }
            });
            $('#btn-test').click(function () {
                console.log($('input[name="sex"]:checked').val());
                $.each($('input[type="checkbox"]:checked'),function(index,ele){
                    console.log($(ele).val());
                });

                console.log($('select>option:selected').val());

                return false;
            });
        });
    </script>
</head>
<body>
    <div>
        <form method="get">
            <div>
                userid:<input type="text" id="userid" placeholder="登录账号......">
                <span id="useridtxt">[账号必须是6-10位数字和大小写字母的组合]</span>
            </div>
            <div>
                password:<input type="text" id="password" placeholder="登录密码......">
            </div>
            <div>
                password:<input type="text" id="repassword" placeholder="确认密码......">
            </div>
            <div>
                性别: <input type="radio" name="sex" value="男" checked="checked">男
                      <input type="radio" name="sex" value="女">女
            </div>
            <div>
                个人爱好:
                    <input type="checkbox" name="hobby" value="打游戏" checked="checked">打游戏
                    <input type="checkbox" name="hobby" value="篮球">篮球
                    <input type="checkbox" name="hobby" value="踢毽子">踢毽子
            </div>
            <div>
                学位
                <select name="degree">
                    <option value="博士">博士</option>
                    <option value="硕士">硕士</option>
                    <option value="学士">学士</option>
                    <option value="专科">专科</option>
                </select>
            </div>
            <div>
                <button id="btn-register">【注册】</button>
                <button id="btn-test">【测试】</button>
            </div>
        </form>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #tbl-news
        {
            font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
            width:100%;
            border-collapse:collapse;
        }

        #tbl-news td, #tbl-news th
        {
            font-size:1em;
            border:1px solid #98bf21;
            padding:3px 7px 2px 7px;
        }

        #tbl-news th
        {
            font-size:1.1em;
            text-align:left;
            padding-top:5px;
            padding-bottom:4px;
            background-color:#A7C942;
            color:#ffffff;
        }

        #tbl-news tr.alt td
        {
            color:#000000;
            background-color:#EAF2D3;
        }
    </style>

    <script type="text/javascript" src="comm/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="comm/news.js"></script>
    <script type="text/javascript">
        $(function(){
             $.each(news,function(index,element){
                 var tr=$('<tr></tr>').append($('<td></td>').append($('<input class="allnews" type="checkbox" value="'+element.newsid+'">')));
                 $.each(element,function(key,value){
                    if(key=='title'){
                        $('<td class="alt"></td>').append(value).appendTo(tr);
                    }
                    else{
                        $('<td></td>').append(value).appendTo(tr);
                    }
                });
                 $('#tbl-news').append(tr);
             });
             $('#controlchk').click(function () {
                 // ①、判断当前复选框是否是选中状态
                 // prop是jquery中提供的操作单一属性值的方法  和  attr一致   value="134454352435"
                 var a=$(this).prop("checked");
                 console.log(a);
                 // ②、将行中的复选框的值设置和#controlchk框的值相同
                 $('.allnews').prop('checked',a);
             });
             $('#id1').click(function(){
                 $('.allnews').prop('checked',function(i,val){
                    return !val;
                 });
             });
            $('#id2').click(function(){
               // ①、获取选中的复选框的value属性值
                var ids='';
                $.each($('.allnews:checked'),function(index,e){
                    ids+=$(e).val()+',';
                });
                console.log(ids.substr(0,ids.length-1));
               // ②、封装成json格式
                var json={'newsids':ids.substr(0,ids.length-1)};
            });
            $('a').mouseenter(function(){//mouseenter  =  mouseover 一样
                $(this).css({'cursor':'pointer','color':'#0011FF'});
            });
            $('.alt').dblclick(function () {
                var v=$(this).text();
                $(this).empty();
                var inputText=$('<input type="text" value="'+v+'">').css({"border":"0","border-bottom":"1 solid black"});
                $(this).append(inputText);
                inputText.select();
                inputText.blur(function () {
                    var midv=inputText.val();
                    $(this).empty();
                    inputText.parent().html(midv);
                });
                inputText.keypress(function (event) {
                    var curKey = event.which;
                    if (curKey == 13) {
                        inputText.blur();
                        return false;
                    }
                });
            });
            $('button').click(function(){
                console.log(111);
            });
            $('button').on('click',function () {
                console.log(2222);
            })
            $('button').bind('mouseenter',function(){
                console.log(3333);
            })
            var abc='<button οnclick="myClick();">sssssss</button>';
        });
        function myClick(){
            console.log("4444");
        }
        function  check() {
            return false;
        }
        $('form#regForm').on('submit',function () {
            
        })
    </script>
</head>
<body>
    <form method="get" action="MyServer" onsubmit="return check();" id="regForm">
        <input type="submit" value="注册">
    </form>
    <button>test</button>
    <table id="tbl-news">
        <tr>
            <th>
                <input type="checkbox" id="controlchk">
                <a id="id1">反选</a>
                <a id="id2">删除</a>
            </th>
            <th>新闻编号</th>
            <th>新闻标题</th>
            <th>新闻内容</th>
            <th>新闻发布者</th>
        </tr>
    </table>
</body>
</html>

Web前端知识：（网页三剑客）

1、HTML ：

2、CSS ：

3、JavaScript ：是一个面向对象的弱类型脚本语言

①、数据类型：弱类型的脚本语言，所谓的弱类型就是在定义变量时，无需指明当前变量的具体类型（字符串、数字型、布尔型、undefined、数组型、null、对象）

​ var age=10;// age是缓存

​ 序列化：new User(‘rock’,‘老张’);

②、控制语句：for if switch while do…while

③、运算符：算数，条件，逻辑运算符，条件运算符，位运算

④、DOM对象：文档对象模型，所白了要操作html元素，必须先创建dom对象

​ getElementById():根据html元素的id属性值创建dom对象（一个对象）

​ getElementsByName();（一个dom的集合（array））

​ getEl…

⑤、DOM对象常见的应用场景

Ⅰ 、对html元素的属性操作

Ⅱ、对htm元素的值进行操作

Ⅲ、完成html元素的css样式操作

Ⅳ、动态操作html元素

Ⅴ、对html元素的事件进行响应

⑥、BOM对象：浏览器对象模型

⑦、js中的内置对象

String：字符串对象，和java差不多，java中的String提供的功能在js中几乎都有对应的方法

Date：系统的日期和时间。new Date();

Math：提供了数学计算的相关功能

RegExp:

​ var reg=/^ 表达式 $/；

​ []：一个字符 [0-6]

​ {}：字符的个数 [a-z]{5} [a-z]{5,} [a-z]{5,8}

​ -：

~~~ javascript

var reg=/^1[3-9][0-9]{9}$/;
– \d{19}
~~~

Array：可以理解为java中的数组

​ Java：Stack

​ for(var i=0;i<array.length;i++){} //jquery.each（）方法

数据库：数据库管理系统，是一个应用软件，专门用于完成大量数据管理的软件。DBMS。采用了关系模型完成数据管理的DBMS，叫R-DBMS

E-R图：

①、要件：

5个

长方形 ： 实体

椭圆 ： 属性

菱形：关系

无限线：关联实体与属性 以及实体与实体

比例：1:1 1：N M：N

SQL：是一个工业标准，所有。。。。。

DDL：用于管理数据库对象，create alter drop

DML：insert update delete

DQL：select


seLect * from emp;
select * from dept;

drop table test1;
create table test1(
       tid varchar2(20) ,
       tname varchar2(20),
       tage number,
       ttxt varchar2(100) not null,
       xid number, 
       constraint pk_test1_001 primary key(tid),-- 主键约束
       constraint uk_test1_002 unique (tname),-- 唯一值约束
       constraint ck_test1_003 check (tage>0 and tage<150),--检查约束
       constraint fk_test1_004 foreign key (xid) references xtest1(xid)
);

create table xtest1(
       xid number primary key ,
       xname varchar2(30) not null
);

-- DML
insert into 表名 values（）-- 不能用
insert into 表名（列名列表） values（）
delete from 表名 where 条件
update 表名 set 列名=value, ,,,  where 条件
-- DQL
select 列名列表 from 表名
select 列名列表 from 表名 where 条件
非空检索not null  | is Not null  
单条件检索   where   列名=值
多条件检索   where   列名=值  and|or  列名=值
排序检索     order by  ASC（默认）|DESC
分组检索     group by  列名  （基于列中的值是否相等作为一个分组的依据）
聚合操作     max  min  sum  avg  count
             select count(订单编号) from 订单  group by 用户编号  （一个用户产生了多少个订单）            
             select avg(salary) from emp group by deptno;
区间检索     列名 between 1000 and 10000  列名>1000 and 列名<10000
in检索       列名 in (1,2,3)   列名=1  or  列名=2 or 列名=3
-- 多表
等值连接      ：列中的值相等作为链接条件
         select a.empno,a.ename ,b.dname from emp a ,dept b where a.deptno=b.deptno;
内连接        ：列中的值相等作为链接条件
         select empno,ename ,dname from emp a [inner] join dept b on a.deptno=b.deptno;  
自连接        ：建立在以上两种基础之上
         select a.ename,b.ename from emp a join emp b on a.mgr=b.empno;
子查询        select * from emp where sal>(select avg(sal) from emp)
左外连接      select a.*,b.* from emp a left join dept b on a.deptno=b.deptno;             
              select a.*,b.* from emp a,dept b where a.deptno=b.deptno(+); 
右外连接      select a.*,b.* from emp a right join dept b on a.deptno=b.deptno;  
              select a.*,b.* from emp a,dept b where a.deptno(+)=b.deptno;             
交叉连接      select a.*,b.* from emp a cross join dept b;

-- 函数
数学函数      abs() 绝对值....
聚合函数      sum()....
字符串函数    upper()....
转化函数      to_date() convert()
其他函数      nvl()   nvl2()  case when than decode sum over

--  伪列   rowid  rownum

om emp a join emp b on a.mgr=b.empno;
子查询 select * from emp where sal>(select avg(sal) from emp)
左外连接 select a.,b. from emp a left join dept b on a.deptno=b.deptno;
select a.,b. from emp a,dept b where a.deptno=b.deptno(+);
右外连接 select a.,b. from emp a right join dept b on a.deptno=b.deptno;
select a.,b. from emp a,dept b where a.deptno(+)=b.deptno;
交叉连接 select a.,b. from emp a cross join dept b;

– 函数
数学函数 abs() 绝对值…
聚合函数 sum()…
字符串函数 upper()…
转化函数 to_date() convert()
其他函数 nvl() nvl2() case when than decode sum over

– 伪列 rowid rownum
 类似资料：

相关阅读

jQuery的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？jQuery是如何链式调用的？谈一下Jquery中的bind(),live(),delegate(),on()的区别？你有看过JQuery的源码吗？说下它的实现原理是什么？jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

相关文章

jQuery Mobile 实例jQuery Mobile 滚屏事件jQuery Mobile 触摸事件jQuery Mobile 事件jQuery Mobile 主题

相关问答

在asp中使用Jquery向表中添加行和删除行。网编辑时文件上载字段的jQuery验证获取当前slick幻灯片的IMG（vanilla JS或jQuery）jQuery滚动到可滚动div循环中元素的顶部jQuery ajax请求被阻止，因为跨源

相关文档

jQuery UI 基础教程jQuery EasyUI 基础教程jQuery Mobile 教程You Don't Need jQuery 中文版jQuery 入门教程
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.