网站首页 > 技术文章正文

web前端Jquery学习笔记二（jquery前端开发实战）

nanyue 2024-09-11 05:25:56 技术文章 4 ℃

学习大纲

一、Jquery-DOM操作（二）

1.什么是DOM

DOM 全称 document object model (文档对象模型)，我们可以通过操作DOM来改变HTML页面的呈现效果。

2.属性操作

1.1JS高级知识操作属性

获取指定属性的值对象.getAttribute(属性名)

设置指定属性的值对象.setAttribute(属性名,属性值);

移除指定属性对象.removeAttribute(属性名);

1.2JQ动态操作属性

获取指定属性的值 $().attr(‘属性名’);

设置指定属性的值 $().attr(‘属性名’,’属性值’);

移除指定的属性 $().removeAttr(‘属性名’);

批量设置属性 $().attr(‘json对象’)

【优点】

?更加智能，一个参数代表获取，两个参数代表设置

?一次可以增加多个属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>Jquery-DOM操作之属性操作</title>
</head>
<body>
   <iframe src="http://www.baidu.com" width="500px" height="500px;" frameborder="0"></iframe>
   <div  id='div1'>批量增加多个属性</div>
   <input type="button" value="点我" id="btn1">
</body>
<script src="../jquery-1.8.2.js"></script>
<script>
   obj = document.getElementById('btn1');
   obj.onclick=function(){
       //获取连接
        alert($('iframe').attr('src'));
       //修改链接
       $('iframe').attr('src','http://www.taobao.com');
       //删除属性
       $('iframe').removeAttr('height');
   }
   $('#div1').attr({'data-id':'1','php9':'真是好'});
   
 
</script>
</html>

3.样式操作

第一天我们学习了一个样式操作，$().css 类似于JS中的对象.style.样式属性=样式值

1.1样式增加

语法:$(‘选择器’).addClass(‘样式名’)

作用:给选中的元素增加class样式属性

1.2样式删除

语法:$(‘选择器’).removeClass(‘样式名’);

作用:将选中的元素的class属性删除

1.3是否存在样式

语法：$(‘选择器’).hasClass(‘样式名称’);

作用:判断选中的元素中是否存在指定的样式

1.4样式切换

语法:$(‘选择器’).toggleClass();

作用:选中元素类属性的切换（就是在删除和增加直接切换）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>Jquery-DOM样式操作</title>
</head>
<style>
   .red{
       background: red;
   }
   .width{
       width: 100px;
   }
   .display{
       
       display: none;
   }
   </style>
<body>
   <div>动态增加样式red样式</div>
   <input type='button' id='btn1' value='增加'/>
     <input type='button' id='btn2' value='删除'/>
      <input type='button' id='btn3' value='判断red是否存在'/>
      <input type='button' id='btn4' value='切换样式'/>
</body>
<script src="../jquery-1.8.2.js"></script>
<script>
    obj = document.getElementById('btn1');
    obj2 = document.getElementById('btn2');
     obj3 = document.getElementById('btn3');
   obj4 = document.getElementById('btn4');
   obj.onclick=function(){
        $('div').addClass('red');
       $('div').addClass('width');
     
   }
    obj2.onclick=function(){
        $('div').removeClass('width');
     
   }
     obj3.onclick=function(){
        alert($('div').hasClass('red'));
     
   }
   obj4.onclick=function(){
       $('div').toggleClass('display');
     
   }
 
</script>
</html>

应用场景：一般在做隐藏显示切换使用

1.5样式-尺寸

?Width 和 height

语法:$(‘选择器’).width() ；$(‘选择器’).height();

作用: 获取选定元素样式中的width/height值

?innerWidth 和 innerHeight

语法:$(‘选择器’).innerWidth(); $(‘选择器’).innerHeight()

作用：获取指定元素的总宽度/高度

说明：innerWidth=width+appding

由于元素是盒模型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>Jquery-DOM尺寸操作</title>
</head>
<style>
   .div1{
       background: red;
       width: 200px;
       height: 50px;
       padding-left: 10px;
       padding-bottom:
   }    
</style>
<body>
   <div id='div1' class='div1'>设置宽度为200px高度为50px</div>
</body>
<script src="../jquery-1.8.2.js"></script>
<script>
   console.log($('#div1').width());
   console.log($('.div1').width());
   console.log($('.div1').height());
   console.log($('#div1').innerWidth());
   console.log($('#div1').innerHeight());
 
</script>
</html>

outerWidth和outerHeight

语法:$(‘选择器’).outerWidth()/$(‘选择器’).outerHeight()

作用：获取的元素的宽度包含边框的值

说明：width = width+panding+margin+border*2

1.6样式-位置

?Offset();

语法:$(‘选择器’).offset().top/left

作用:获取当前选中的元素距离顶部/左边的像素距离

说明:相对于body的距离

?Position();

语法:$(‘选择器’).position().top/left

作用:获取相对于上级元素的像素距离

说明:相当于父级元素。

scrollTop()/scrollLeft()

语法:$(‘选择器’).scrollTop();/$(‘选择器’).scrollLeft();

作用：获取元素中滚动条的垂直便宜距离

案例：回到顶部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>Jquery-位置操作</title>
</head>
<style>
   #box{
       width: 1000px;
       height: 2000px;
       margin: 50px auto;
       border: 1px solid #ccc;
       position: relative;
   }
   #main{
       width: 200px;
       height: 200px;
       background: #0ff;
       position: absolute;
       top:30px;
       left: 30px;
   }
   
</style>
<body>
<!--
  <h1>定位元素位置</h1>
   <hr/>
-->
   <div id='box'>
       <div id='main'>主题内容</div>
   </div>
   <div id='goTop'><a href="javascript:void(0);"> 返回到顶部</a></div>
   
</body>
<script src="../jquery-1.8.2.js"></script>
<script>
   obj = document.getElementById('goTop');
   obj.onclick = function(){
       
       alert($('body').scrollTop(0));
   }
</script>
</html>

5.文本操作

?JS中文本操作

对象.innerHtml 获取元素内容（包含html内容）

对象.innerText 获取元素内容（只包含文本）

对象.value 获取表单元素的值

?JQ中文本操作

$().html() 加参数设置内容，不加参数获取内容

$().text() 加参数设置内容，不加参数获取内容

$().val() 加参数设置值，不加参数获取值

6文档操作

通过Jquery可以实现节点的追加、删除、修改、复制等操作

1.1节点追加

?父子关系追加

Append() 和 prepend()

语法:$(‘选择器’).append(内容)

作用：向父节点最后增加内容最后一个子元素

语法；$(‘选择器’).prepend(内容)

作用:向父节点最前面增加内容第一个子元素

?兄弟关系追加

After()和before()

语法：$(‘选择器’).after(内容)

作用：增加内容到父级后面

语法:$(‘选择器’).before(内容)

作用:增加内容到父级的前面

1.2节点删除

语法:$(‘选择器到节点’).remove();

作用:从文档中删除该节点

1.3节点替换

语法:$(‘要替换的节点’)replaceWith(‘内容’)

作用：指定替换节点里面的内容

1.4节点复制

语法:$(‘要复制的节点’).clone()

作用：复制选中的节点

说明clone(true/false)

默认值是false，只是复制节点，不复制事件，

True 事件也复制

二、Jquery-事件

1.什么是事件

用户通过鼠标、键盘所做的动作就是事件

事件一单发生就要有事件处理这些动作，这里的事件处理称之为“事件驱动”，事件驱动通常是由函数来担任，常见的函数

Click/dbclick/mousedown/mouseup/mouseover/

Onkeyup

Onfocus

Onblur

Onsubmit 等

2.设置事件

?原生JS设置事件

Dom1级事件

对象.onclick=function(){}

Dom2级事件设置

对象.addEventListener(类型,处理,事件流)

对象.removeEventListener(‘类型’,’处理’,’事件流’);

IE8浏览器以下使用：

对象.attachEvent()

对象.detachEvent()

?Jquery设置事件

不需要考虑浏览器兼容性

语法：$(‘选择器’).事件类型（事件处理函数fn）

说明：事件类型：

3.事件绑定

语法:

$(‘选择器’).bind(‘事件类型’,事件函数fn) 绑定一种事件

$(‘选择器’).bind(‘事件类型1 事件类型2 ..’,事件处理函数fn) 一个元素绑定多个事件同一个处理操作

$(‘选择器’).bind(json对象) 一个元素绑定多个

4.加载事件

思考：为什么我将代码放到html的前面所有的事件都不生效了？

因为js程序的运行需要HTML和CSS代码的支持，但是程序是从上往下执行的，在加载html之前就执行了JS所以不会生效，那么这个时候应该怎么解决？

就要用到事件加载

【JS】中事件加载

Window.load=function(){}

【JQ】事件加载

$(document).ready(function(){

})

简化写法

$(function(){

})

5.案例-图片切换效果

?需求分析

凤凰网图片特效

图片切换效果，当鼠标移到相应的栏目显示该栏目下的图片

?实现步骤

1.栏目增加鼠标经过事件

首先引入jquery 核心库文件

获取li 标签下的index属性即可

2.根据栏目替换相应的栏目图片

?代码

<script src="../jquery-1.8.2.js"></script>
               <script>
                   $(function(){
                       $('.lb ul li').mouseover(function(){
                           //获取唯一标示
//                            index = $(this).attr('index');
                           //替换图片
//                            $('#changeimg').attr('src','style/img/lb'+index+'.jpg');
                           index = $('.lb ul li').index(this);
                           $('#changeimg').attr('src','style/img/lb'+index+'.jpg');
                           
                           
                       })
                   })
               </script>

三、Jquery-遍历操作

?each 遍历方法

语法:

$.each(数组/对象,function(){}) 遍历数组或者对象

$(‘选择器’).each(function(){}); 遍历选择器选中的元素对象

说明：参数1代表要遍历的数组或者是对象，参数二，匿名函数function(){}函数有两个形参一个是i一个是item 分别代表的是下标和值

案例1：遍历数组和对象

案例2：标签元素遍历

?parent和 parents

语法：

$(‘选择器’).parent() //匹配当前对象的父级元素（上一级）

$(‘选择器’).parents() //匹配当前对象的祖先元素（上N级）

通过对比可以发现，parents()是便利当前元素的所有父级一直往上找，找到顶为止，parent(),最近的父级元素

?next()和prev()

语法：

$(‘选择器’).next(); //匹配的是当前选中元素的兄弟元素（下一个）

$(‘选择器’).prev(); //匹配的是当前选中元素的兄弟元素（上一个）

四、案例-购物车

1.【全选和全不选】

?需求：

点击全选->勾选中所有商品

再次点击取消所有商品的选中

?分析需求：

1.给全选增加点击事件，并且点击时的状态【全选/全部选】

2.获取所有商品的input框当前的状态

3.将所有商品的input的状态修改成点击事件的那个input的状态

?代码：

<script type="text/javascript" src='../jquery-1.8.2.js'></script>
   <script>
   //绑定点击事件
   $('#allselect').click(function(){
       //获取当前是否被选中的状态
       statused = $(this).is(':checked');
       if(statused){
           //如果是全部选中则选中所有的商品
           //遍历所有input type 是checkbox
           $('.gwc_tb2 :checkbox').attr('checked',true);
       }else{
           //如果是false则是全部取消
           $('.gwc_tb2 :checkbox').attr('checked',false);
       }
   })
   </script>

2.【反选】

?需求：

点击复选框反选->没有勾选的商品勾选，已经勾选的商品取消勾选

?分析需求：

1.给反选增加点击事件（不需要获取状态）

2.获取所有商品的当前状态（勾选或未勾选）

3.修改每个商品的状态（循环修改）

?代码：

//反选,增加点击事件

$('#fanselect').click(function(){

//获取所有的商品checkbox的对象集合

obj = $('.gwc_tb2 :checkbox');

//获取一个商品的checkbox的选中状态

// console.log(obj.eq(0).is(':checked'));

//获取有多少个checkbox

length = obj.length;

//循环改变

for(i=0;i<length;i++){

//判断当前状态，如果是勾选改为不勾选，如果是不勾选改为勾选

if(obj.eq(i).is(':checked')){

obj.eq(i).attr('checked',false);

}else{

obj.eq(i).attr('checked',true);

}

})

?优化版：

//反选,增加点击事件

$('#fanselect').click(function(){

//使用遍历方式

$('.gwc_tb2 :checkbox').each(function(){

if($(this).is(':checked')){

$(this).attr('checked',false);

}else{

$(this).attr('checked',true);

}

})

3.【增加商品】

?需求：

点击增加商品->然后增加商品到购物车列表

?分析需求：

1.给商品按钮增加点击事件

2.组合html字符串

3.将字符串追加到表格中

?代码：

//增加商品动态事件

$('#addGoods').click(function(){

//字符串拼接

Htmlstr = '<tr>';

Htmlstr +='<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td>';

Htmlstr+='<td class="tb2_td2"><a href="#"><img src="images/img2.jpg"/></a></td><td class="tb2_td3"><a href="#">产品标题</a></td><td class="tb1_td4">一件</td><td class="tb1_td5"><input id="min2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />';

Htmlstr+='<input id="text_box2" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" /><input id="add2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" /></td>';

Htmlstr+='<td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td><td class="tb1_td7"><a href="javascript:void(0);" onclick="delgoods(this)">删除</a></td>';

Htmlstr+='</tr>'

$('.gwc_tb2 tbody').append(Htmlstr);

})

4.【删除商品】

?需求：

点击删除按钮，删除购物车商品信息

?分析需求：

1.给删除绑定点击事件

问题：绑定节点使用什么选择器？

答：使用类选择器不能使用ID选择器，ID只能选中一个元素

2.删除当前操作的节点

由于删除在td节点中，我们直接使用remove能不能删除整行呢？

不可以，我们要删除td的父节点

?代码：

//删除商品节点

function delgoods(obj){

//使用parents();

$(obj).parents('tr').remove();

}

五、Jquery-AJAX

1.什么是AJAX

所谓的ajax 就是（asynchronous javascript and xml）的简写，即异步的js 和XML技术的应用，浏览器端与服务器端通讯不需要刷新页面的技术。

2.$.get

使用Jquery中的$.get可以向服务器发送get方式的ajax请求

?语法

$.get(‘url’,’data’,fn,dataType);

说明：url请求地址、data请求时发送的数据【可以是字符串，可以是json对象】，fu：请求成功后的回调函数，dataType：数据类型json、xml、html、text 类型（预定服务器返回的数据类型）

?举例

$('#btn1').click(function(){

$.get('dom.php',{'name':'ss','age':'11'},function(data){

alert(data);

},'json');

})

3.$.post

使用Jquery $.post方法可以发送post方式的ajax请求

?语法：

$.post(‘url’,’data’,fn,’dataTpye’);

说明：同上

4.$.ajax

?语法

$.ajax({//json,对象

Url://地址,

Data://传递给服务器的数据

Type:’get/post’ //发送类型

dataType:’json’,//返回的数据处理类型

Success:function(){}//ajax请求成功后的执行的函数，

Error:function(e){}// ajax请求失败后执行的函数

Async:true/fals //true异步，同步false,默认是true

})

?案例

$('#btn3').click(function(){
       $.ajax({
           url:'dom.php',
           data:{'username':'php9'},
           type:'post',
           dataType:'json',
           success:function(data){
               console.log(data);
           },
           error:function(e){
               console.log(e.status);
               if(e.status!=200){
                   alert('服务器繁忙.........');
               }
           }
       })

【PHP】

<?php
$username = $_POST['username'];
$preg = '/^[a-zA-Z][a-zA-Z0-9]+$/';
if(!preg_match($preg,$username)){
 echo json_encode(array('status'=>$username,'info'=>'用户名必须是英文或者英文数子组合'));  
}
echo  json_encode(array('status'=>$username,'info'=>'注册成功'));

5.$.get/$.post/$.ajax区别

$.ajax就是将原始的javascript ajax进行了封装，通过这个方法能实现所有的ajax操作

$.get和$.post 就是封装的$.ajax

6.跨域【重点】

1.1什么是跨域

所谓的跨域就是从一个域名向另外的一个域名请求数据

1.2需求

Aa.com 向 bb.com 发送ajax请求

1.3通过JQ实现跨域

<script src="jquery-1.8.2.js"></script>
<script>
   $('#btn1').click(function(){
       $.ajax({
           url:'http://bb.com/a.php',
           dataType:'jsonp',
           jsonp:'backfun',
           data:{'username':'aa','password':'123'},
           success:function(data){
               alert(data.msg);
           },
           error:function(e){
               console.log(e);
           }
       })
   })
</script>
【http://bb.com/a.php】
$name =  $_GET['backfun'];
$data = json_encode(array('status'=>'1','msg'=>'注册成功！'));
echo $name.'('.$data.')';

上一篇：六种Spark练习来统治一切（spark功能）
下一篇： ASP.NET Core WebAPI中使用JWT Bearer认证和授权

网站首页 > 技术文章 正文

web前端Jquery学习笔记二（jquery前端开发实战）

学习大纲

一、Jquery-DOM操作（二）

1.什么是DOM

2.属性操作

1.1JS高级知识操作属性

1.2JQ动态操作属性

3.样式操作

1.1样式增加

1.2样式删除

1.3是否存在样式

1.4样式切换

1.5样式-尺寸

1.6样式-位置

案例：回到顶部

5.文本操作

6文档操作

1.1节点追加

1.2节点删除

1.3节点替换

1.4节点复制

二、Jquery-事件

1.什么是事件

2.设置事件

3.事件绑定

4.加载事件

5.案例-图片切换效果

三、Jquery-遍历操作

四、案例-购物车

1.【全选和全不选】

2.【反选】

3.【增加商品】

4.【删除商品】

五、Jquery-AJAX

1.什么是AJAX

2.$.get

3.$.post

4.$.ajax

5.$.get/$.post/$.ajax区别

6.跨域【重点】

1.1什么是跨域

1.2需求

1.3通过JQ实现跨域

猜你喜欢

网站首页 > 技术文章正文