博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
javaweb实训第二天上午——jQuery笔记
阅读量：2070 次
发布时间：2019-04-29

本文共 11674 字，大约阅读时间需要 38 分钟。

jQuery基础

  1. JQuery的认识
    1. JS框架概述
    2. JQuery优势
    3. 和原生JS比较
  2. JQuery的基本使用
    1. jQuery库引入

<script type="text/javascript" src="js/jquery-2.1.3.js"></script>

<script type="text/javascript">

alert(jQuery)

alert($)

alert($===jQuery)

</script>
    1. 获取jQuery对象

<script type="text/javascript" src="jquery/jquery-2.1.3.min.js"></script>

<script type="text/javascript">

//当页面内容渲染完毕之后，再执行匿名函数中的内容

window.onload = function(){

//获取dom节点

var mydiv = document.getElementById("mydiv");

console.debug(mydiv);

 

//获取jquery对象(根据id获取jquery对象)

var mydiv = $("#mydiv");

console.debug(mydiv);//

}

</script>

</head>

<body>

<div id="mydiv">这是我的div</div>

</body>
    1. $(function(){  内容  })和window.onload的区别

window.onload = function(){

alert(3);

}

$(document).ready(function(){

alert(2);

});

$(function(){

//简写方式

alert(1);

});

window.onload与$(function)：

相同点： 它们都是用来加载页面的 

不同点： window.onload是页面内容渲染完毕之后，执行匿名函数中的内容,而$(function)是页面结构加载完毕之后，执行匿名函数中的内容，所以在性能方面来说$(function)的性能要高于window.onload所以以后推荐使用$(function)

    1. jQuery对象和dom对象的相互转换

<script type="text/javascript" src="jquery/jquery-2.1.3.min.js"></script>

<script type="text/javascript">

$(function(){

//根据id获取jquery对象

var mydiv = $("#mydiv");

/*把jQuery对象转为dom节点：

1.var dom = jQuery对象.get(0);

2.var dom = jQuery对象[0]  推荐使用(简写)

*/

var dom = mydiv[0];

console.debug("dom对象:"+dom)

/*

     把dom节点转为jQuery对象:

1.var jqy = $(dom节点)

*/

var jqy = $(dom);

console.debug("jQuery对象:"+jqy)

});

</script>

</head>

<body>

<div id="mydiv">这是我的div</div>

</body>
    1. jQuery基本选择器

参考jQuery文档哟：选择器是为了选中HTML页面中的dom节点，而得到Jquery对象 ，通过Jquery对象去操作dom节点

  1. #id       id选择器       根据id获取jQuery对象(单个)
  2. element   元素选择器     根据标签名获取jQuery对象(多个)
  3. .class    类型选择器      根据类型名获取jQuery对象(多个)  
  4. selector1,selector2,selectorN      组合选择器  根据多个选择器组合在一起，选中多个

<script type="text/javascript">

$(function(){

//1.根据id获取jQuery对象

var mydiv = $("#mydiv");

console.debug(mydiv);

//2.根据元素匹配多个jQuery对象

var divs = $("div");

console.debug(divs);

//3.根据类型匹配多个jQuery对象

var hobbies = $(".hobbies");

console.debug(hobbies);

//4.组合选择器匹配多个jQuery对象

var elements = $("#mydiv,input,a");

console.debug(elements);

});

</script>

</head>

<body>

<div id="mydiv">这是我的div</div><br/>

<input type="text" name="username" class="hobbies"><br/>

<input type="text" name="password" class="hobbies"><br/>

<input type="text" name="age" class="hobbies"><br/>

<a href="javascript:void(0)" class="hobbies">超链接</a><br/>

<div>这是div2</div>

</body>
    1. jQuery的for循环

场景：例如有多个input按钮，获取每个按钮的value值

第一种：传统的遍历方式：var $objs = $("input:button");

for(var i = 0 ; i < $obj.length ; i++){

console.debug(  $obj[i])  );//注意$obj[i]是一个dom对象

}

第二种：jQuery提供的each函数

//$obj：jquery集合对象，index遍历元素的下标（从0开始），obj表示每一个节点

$obj.each(function(index , obj){

alert($(obj).val());

});

 

  1. JQuery注册事件的四种方式

<body>

<input type="button" value="注册事件方式1" id="btn1">

<input type="button" value="注册事件方式2" id="btn2">

<input type="button" value="注册事件方式3" id="btn3">

<input type="button" value="注册事件方式4" id="btn4">

</body>
    1. 注册事件方式1

/* jquery注册事件方式1语法格式：

jquery对象.事件名(function(){

}) */

//注册事件方式1

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

alert("注册事件方式1");

});
    1. 注册事件方式2

/* jquery注册事件方式2语法格式：

jquery对象.bind("事件名",function(){

}) */

//注册事件方式2

$("#btn2").bind("click",function(){

alert("注册事件方式2");

})
    1. 注册事件方式3[推荐]支持事件委托机制

/* jquery注册事件方式3语法格式:（老师推荐使用，因为兼容性最好，功能最强大---因为支持事件冒泡）

jquery对象.on("事件名",[选择器],function(){

}) */

//注册事件方式3

$("#btn3").on("click",function(){

alert("注册事件方式3");

})
    1. 注册事件方式4

/* jquery注册事件方式4语法格式：

jquery对象.one("事件名",function(){

});特点：一次生效之后，自动注销事件 */

//注册事件方式4

$("#btn4").one("click",function(){

alert("生效一次之后，自动注销事件");

})
    1. 注销事件[推荐]

/* 注销事件的语法格式：jquery对象.off(); */

//注销事件

$("#btn1").off();
  1. 事件委托机制

<input type="button" value="动态添加按钮" id="btn">

<div id="filediv">

<input type="button" code="button" value="按钮"><br/>

</div>

 

<script type="text/javascript">

$(function(){

$("#btn").on("click",function(){

$("#filediv").append('<input type="button" code="button" value="按钮"><br/>');

})

/* $("input[code]").on("click",function(){

alert("注册成功!");

})

这种注册方式，只会在加载结构的时候，满足条件的才会注册事件，动态追加的，就没法注册成功

怎么解决呢？答：我们可以使用事件委托机制*/

//事件委托机制，注册给filediv 通过他委托给input[code]

$("#filediv").on("click","input[code]",function(){

alert("注册成功!!");

})

});

</script>
  1. JQuery中的方法[练习]
    1. jQuery操作html/文本/value属性值

html()，text()，val()

<div id="mydiv"><h1>这是我的div</h1></div>

 

var text = $("#mydiv").text();//获取文本，仅仅获取文本

console.debug(text);

$("#mydiv").text("<h2>我只会当纯文本进行展示哦</h2>");//设置文本
    1. jQuery操作元素或节点的方法

添加：append()，appendTo()，prepend()，after()，before()

删除：remove()，empty()

复制：clone(true)

<input type="button" value="动态添加按钮" id="btn">

<div id="filediv">

<input type="button" code="button" value="按钮"><br/>

</div>

 

<script type="text/javascript">

$(function(){

/*Jquery对象.clone()  浅克隆仅仅克隆标签 Jquery对象.clone(true)  浅克隆标签及事件  */

$("#btn").on("click",function(){

//拷贝按钮

$("input[code]:first").clone(true).appendTo($("#filediv"))

})

//为标签input[code]标签绑定事件

$("input[code]").on("click",function(){

alert(1);

})

});

</script>
    1. jQuery操作dom的属性和样式
      1. 操作属性：JQuery对象.attr()，removeAttr(),data()

jQuery中获取属性的值有2种方式:

1.一种是attr获取属性对应的值,获取到的值都是字符串

语法格式:  jQuery.attr("属性名")

2.一种是data获取属性对应的值,获取到的值,会转为对应的类型

语法格式:   jQuery.data("xxx")  使用data获取属性值     你的属性   data-xxx,你属性名必须是以data-开始的属性

比如:<input type="text" data-username="zhangsan" id="username"/>

我想获取data-username属性对应的值     jQuery对象.data("username")

<input type="text" id="username" data-age="22"  data-sex="true" 

data-email="12@qq.com"

data-person='{"name":"王天霸","age":33,"sex":"男"}'/>

 

<input type="button" id="addAttribute"  value="添加属性" /><br />

<input type="button" id="editAttribute"  value="修改属性" /><br />

<input type="button" id="removeAttribute"  value="删除属性" /><br />

<input type="text" id="username" /> 

 

<script type="text/javascript">

/** 在jQuery中添加属性，修改属性使用的函数,attr("属性名",属性值)//当没有这个属性名的时候，我就是添加属性，

 * 当我有这个属性名的时候，则是修改属性*/

$(function(){

//添加属性对应的按钮

$("#addAttribute").on("click",function(){

//添加属性

$("#username").attr("abc","def");

});

//修改属性对应的按钮

$("#editAttribute").on("click",function(){

$("#username").attr("abc","你被修改了");

});

//删除属性对应的按钮

$("#removeAttribute").on("click",function(){

//删除指定的属性

$("#username").removeAttr("abc");

});

});

</script>
      1. 操作样式：css()，addClass()，removeClass()

 

 

    1. jQuery遍历

场景：例如有多个input按钮，获取每个按钮的value值

新的一种方式：

//$obj：jquery集合对象，index遍历元素的下标（从0开始），obj表示每一个节点

$obj.each(function(index , obj){

alert(      $(obj).val()      );

});

<ul>

<li>李寻欢</li>

<li>方世玉</li>

<li>雷老虎</li>

<li>大朗吃药了</li>

</ul>

$(function(){

/* 需求：打印li标签中所有的值 */

//获取到所有的li元素标签

var lis = $("ul li");

console.debug(lis);

/*jQuery循环迭代的语法格式：

$.each(数组/多个值,function(i,o){

i:循环次数的索引

o:列表中的具体元素

});

*/

$.each(lis,function(i,o){

console.debug(o.innerHTML);

})

});
    1. jQuery发异步请求

$.get("url",data,callback,type);

$.post("url",data,callback,type);

url：表示请求

data：请求参数，格式{key1:value1,key2:value2}

callback：回调函数function(data){}，其他data表示服务器返回的数据

type：指定服务器返回数据的类型，如果是字符串，基本值用text，如果是对象，或者集合用json

  1. jQuery练习题
    1. 练习题1

$(function() {

//小题目1: 点击按钮获取被选中的input标签

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

var inputs = $("input[name=hobbies]:checked");

console.debug(inputs);

});

//小题目2:点击按钮隐藏p标签

$("p").click(function(){

var p = $(this);//点击那个p标签，this就代表那个p标签: 并转换成jQuery对象，方便我们调用jQuery中的方法

p.hide(1000);//调用函数隐藏，被点击的p标签

});

//小题目3：表格中的行，按照偶数行，和奇数行，分别给给字体，和行背景添加颜色

$("table tr:even").css({

"color":"yellow","background":"blue"});

$("table tr:odd").css({

"color":"green","background":"pink"});

});

 

    1. 练习题2

$(function(){

//一行代码

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

//选中select1 下面的option标签，但凡是被选中的，追加到$("#select2")

$("#select1 option:selected").appendTo( $("#select2") )

});

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

//选中select1 下面的所有option标签，追加到$("#select2")

$("#select1 option").appendTo( $("#select2") )

});

});
    1. 练习题3

<script type="text/javascript">

$(function(){

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

//全选

$("input[name='hobbies']").prop("checked",true)

});

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

//全不选

$("input[name='hobbies']").prop("checked",false)

});

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

//反选

var inpus = $("input[name='hobbies']");

    $.each(inpus,function(i,o){

     if(o.checked==true){

     o.checked=false

     }else{

     o.checked=true;

     }

    });

});

});

 

function checkChange(src){

//全选/全不选

var res = src.checked;

$("input[name='hobbies']").prop("checked",res)

}

</script>

 

    1. 练习题4

$(function() {

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

$("#select").val("2号")//设置下拉框的值为2号，所以2号的option被选中

});

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

$("#selectMultiple").val(["2号","5号"])

})

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

$("input[name=checkbox]").val(["复选2","复选4"])

})

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

//$("input[name=radio]").val(["单选2"]);//方式1：这里注意，即便是单选，也要用数组才行

$("input[value=单选2]").prop("checked",true);//方式2:prop 对于单选框，复选框等属性的操作

})

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

//打印所有被选中的

var ches = $(":checked")

$.each(ches,function(i,o){

console.debug(o)

})

})

});

</script>

 

    1. 练习题5

<script language="javascript">

$(function(){

//添加功能实现

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

var username = $("#username").val()

var email = $("#email").val()

var tel = $("#tel").val()

$("#userTbody").append("<tr>"

+"<td>"+username+"</td>"

+"<td>"+email+"</td>"

+"<td>"+tel+"</td>"

+"<td><a href='javascript:void(0);' οnclick='remove(this)'>删除</a></td>"

+"</tr>")

})

$("#btn_removeAll").click(function(src){

$("#userTbody").empty();                                                                                                                   

})

});

//jquery删除函数：JQuery对象.remove()删除元素自己，  JQuery对象.empty()删除元素text

function remove(src){

//src 是传入得的标签

//$(src).parent().parent().remove();//比较局限，如果a标签外部还有标签，就傻逼了

$(src).closest("tr").remove();//a标签往外找，直到找到tr为止

}

</script>

 

  1. JSON格式数据
    1. JSON格式数据概述

<script type="text/javascript">

//1.创建json对象

var person = {

"name":"王天霸","age":22,"dept":{
"id":1,"name":"开发部"}};

console.debug(person);

console.debug(person.name,person.age,person.dept,person.dept.id,person.dept.name);

//2.创建JSON数组

var persons = [

{

"name":"王天霸","age":22,"dept":{
"id":1,"name":"开发部"}},

{

"name":"西门吹雪","age":23,"dept":{
"id":2,"name":"公关部"}}

]

console.debug(persons);

console.debug(persons[1].name,persons[1].dept.name);

//注意：标准json格式，key 都是""引起来的，如果你的value是字符串，必须用引号引起来

</script>
    1. JSON格式字符串转JSON对象

<script type="text/javascript">

/*JSON字符串转JSON对象有3种方式：

1.使用eval转          eval("("+jsonStr+")");    你的json字符串不是标准的我也能转

2.使用JSON.parse(jsonStr);       我只能转标准的json字符串

3.使用jquery的方式转        $.parseJSON(jsonStr);  它是基于第二种的实现，只能转标准的json字符串

(推荐使用它)

何为标准json字符串呢？答： key必须用"" 引起来       value只要是字符串，必须用""引起来*/

var jsonStr = '{name:"王天霸","age":22}';

console.debug(jsonStr);

 

var jsonObj = eval("("+jsonStr+")");

console.debug(jsonObj);

 

jsonObj = JSON.parse(jsonStr);

console.debug(jsonObj);

 

jsonObj = $.parseJSON(jsonStr);

console.debug(jsonObj);

</script>
    1. 对象操作三部曲【创建JS对象方式】

1.创建对象                                                  

1.1  使用  new Xxx()创建对象

1.2 使用JSON创建对象

2.设置属性                                                  

1.1 普通设置       对象.属性名=值

1.2 动态设置值   对象["属性名"]=值

3.删除属性                                                  

delete 对象.属性名  或者  delete 对象["属性名"]

    1. SpringMVC返回JSON格式数据
      1. 搭建SpringMVC环境
      2. 导入JSON包
      3. @ResponseBody 返回JSON格式数据
        1. 字符串
        2. 对象
        3. map
        4. 集合
  2. 省市二级联动

省份:<select id="province">

<option value="-1">请选择</option>

</select>

市: <select id="city">

<option value="-1">请选择</option>

</select>
  1. part1: 二级联动后台准备
    1. 前台页面
    2. 发布项目
    3. 准备mvc环境：tomcat环境
    4. 准备模拟数据
  2. part2:发送Ajax加载省份
  3. part3:根据省份发送Ajax加载市

<script type="text/javascript">

/*jQuery的ajax请求语法格式：

   $.get(url,[param],[callback],[dataType])

url: 访问后台的url地址

param: 请求参数    是以json对象传递参数的

callback：回调函数，后台相应的数据都是放到回调函数中的

dataType: 后台返回的数据格式

  xml, html, script, json, text, _default。(默认返回的格式就是JSON对象)*/

 $(function(){

 function loadProvince(){

//1.提供加载省份的函数

 $.get("/city/getProvince",function(result){

 /* result:后台响应过来的数据 */ //循环迭代所有的省份

  $.each(result,function(i,o){

  $("#province").append("<option value='"+o.id+"'>"+o.name+"</option>");

  });

 });

 }

loadProvince(); //2.调用省份的方法

$("#province").on("change",function(){

//3.当省份的值发生改变的时候，我就触发该函数

 var provinceId = $(this).val(); //获取省份id  this:代表是当前下拉列表的dom节点

   $("#city").empty();//5.先清空下拉列表

   if(provinceId==-1){

//6.代表是请选择

   $("#city").append("<option value='-1'>请选择</option>");

   return;//结束程序

   }

 //4.根据省份id 发送Ajax获取市

   var param = {

"provinceId":provinceId};

   $.get("/city/getCitysByProvinceId",param,function(result){

//通过省份id获取对应的市

  $.each(result,function(i,o){

//循环迭代所有的市

  $("#city").append("<option value='"+o.id+"'>"+o.name+"</option>");

  })

   });

 });

 })

</script>

 

转载地址：http://zrcmf.baihongyu.com/

你可能感兴趣的文章
Linux下查看根目录各文件内存占用情况
查看>>
A星算法详解(个人认为最详细,最通俗易懂的一个版本)
查看>>
利用栈实现DFS
查看>>
逆序对的数量(递归+归并思想)
查看>>
数的范围(二分查找上下界)
查看>>
算法导论阅读顺序
查看>>
Windows程序设计:直线绘制
查看>>
linux之CentOS下文件解压方式
查看>>
Django字段的创建并连接MYSQL
查看>>
div标签布局的使用
查看>>
HTML中表格的使用
查看>>
(模板 重要)Tarjan算法解决LCA问题(PAT 1151 LCA in a Binary Tree)
查看>>
(PAT 1154) Vertex Coloring (图的广度优先遍历)
查看>>
(PAT 1115) Counting Nodes in a BST (二叉查找树-统计指定层元素个数)
查看>>
(PAT 1143) Lowest Common Ancestor (二叉查找树的LCA)
查看>>
(PAT 1061) Dating (字符串处理)
查看>>
(PAT 1118) Birds in Forest (并查集)
查看>>
数据结构 拓扑排序
查看>>
(PAT 1040) Longest Symmetric String (DP-最长回文子串)
查看>>
(PAT 1145) Hashing - Average Search Time (哈希表冲突处理)
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-05-17 22:22:12   当前IP: 3.145.64.126   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我