jquery

简至大道

于 2021-08-26 17:13:15 发布

阅读量1.4k

点赞数 2

分类专栏：前端文章标签： jquery javascript html

又见面了，惊不惊喜，意不意外

本文链接：https://blog.csdn.net/zxyhj/article/details/119936065

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

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

简至大道

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery

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(“属性名”，‘属性值’).
复制链接

扫一扫

专栏目录