javaweb实训第二天上午——jQuery笔记

Posted 2021-05-23 dearQiHao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaweb实训第二天上午——jQuery笔记相关的知识，希望对你有一定的参考价值。

jQuery基础

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

alert(jQuery)

alert($)

alert($===jQuery)

</script>

1. 获取jQuery对象

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

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对象的相互转换

$(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节点

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

$(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/>

<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());

});

JQuery注册事件的四种方式

<body>

</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();

事件委托机制

</div>

$(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>

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)

</div>

$(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":"男"}'/>

/** 在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. 1. 操作样式：css()，addClass()，removeClass()

1. jQuery遍历

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

新的一种方式：

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

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

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

});

<ul>

<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

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

$(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=<

以上是关于javaweb实训第二天上午——jQuery笔记的主要内容，如果未能解决你的问题，请参考以下文章

javaweb实训第二天上午——jQuery基础

javaweb实训第五天上午——Spring基础

javaweb实训第四天上午——JDBC入门

javaweb实训第四天上午——MySQL基础

javaweb实训第四天上午——员工管理系统-JavaBean&EL&JSTL&MVC思想

javaweb实训第三天上午——Servlet

(c)2006-2024 SYSTEM All Rights Reserved IT常识