jquery的简单⽤法⼀
1、js 中 字符串 可以 与数字 进⾏加减 预算(原理:将数字转化为字符串进⾏拼接操作)
⼀、javascript的基本知识:
1、js 与 jquery的关系:
jquery 只是 js ⽅便操作 html节点的 库。
2、DOM对象、DOM节点、jquery对象概念:
(1)DOM对象:
通过js的语法将 html标签转化为 树状 节点的对象 叫做 DOM对象。
var ElementsByTagName("p"); // 变量 objDOM 就是⼀个 DOM 对象
(2)jquery 对象:
通过jquery的语法 将 html标签转化 ⽣成的 对象。
var objJquery=$("[class=content1]:odd");
3、jquery 的数据类型、条件循环语句:
jquery只是java的⼀个库,因此使⽤时⾸先需要引⼊库:
<head>
<script type="text/javascript" src="jquery的存储路径"></script> // 导⼊jquery 库
<script type="text/javascript"> // jquery 内嵌式代码
var a=1; // js代码句末⽤;结尾
var b="2";
alert(a); // 警报弹出窗⼝
alert(b);
</script>
</head>
(1)弹出警报窗⼝:alert()
var a=1;
alert(a);
(2)控制台显⽰:console.log( )
var tag="aaa";
console.log(tag);
(3)js的bool值:true false ---------- ⾸字母不⼤写
(4)js数据类型:array 数组
var array_1=[1,2,3,"1","b"];
(5)js数据类型:JSON对象(类似python的字典):
var tag={'name':'liu','age':18};
console.log(tag.age,tag['age']); ------------- 两种⽅式均可取值,第⼆种⽅法 key 需要加 “ ”
(6)js 的条件判断:
if(条件){
}esle if(条件){
}else{
}
(7)js 的循环结构:
for(初始值;条件;步距){
}
for(var a=1;a<9;a++){
alert(111);
}
⼆、jquery 控制css:
1、jquery的外链式:
<head>
<script type="text/javascript" src="jquery的存储路径"></script> // 导⼊jquery 库
<script type="text/javascript" src="js的储存路径"></script> // jquery 外链式代码(注意⽤的是 src 不是 href ) </head>
2、jquery 代码的解析顺序设置:
3、jquery的语法结构:
$("input[type=text]").css("background","red");
$("input[type=text]").addClass("content"); // content 是css中定义的⼀个类名。
4、jquery控制 css 样式:
jquery的⽅法⽀持连写:
$("h2").css("background-color","#CCFFFF").next().css("display","block"); // 语法⽀持连写
(1).css⽅法 : ---------- 设置 css 属性值 或 取 css 属性值
1):为元素设置CSS样式的值
<head>
<script type="text/javascript" src="jquery的存储路径"></script> // 导⼊jquery 库
<script type="text/javascript"> // jquery 内嵌式代码
$(function(){ // 设置 jquery 代码最后解析
$("t").css("color","red"); // 更改类名为 content的div 的⽂本颜⾊。
$("t").css({"color":"red","font-size":"30px"}); // 同时赋值多组更改--------注意 “ ”不要忘记。
$("t").css({"color":"red","border":"3px solid red"}); // ⼀个属性更改多个值时⽤空格隔开。
$("t").css("color"); ------- 如果后⾯不加属性值的时候表⽰取值
})
</script>
</head>
2):取标签的 css 的属性的值:
⼀定要注意 与 attr()、 prop() 的区别 ;区分 标签 css 属性 与 标签属性。
三、jquery中常见的内置⽅法:
(1).eq()、.children()、.partent()、.partents():
① .eq() :
eq()⾥⾯是 索引值 ,从0开始:
$("li").eq(2).css("display"); ------- 等于
$("li").lt(2).css("display"); ------- ⼩于
$("li").gt(2).css("display"); ------- ⼤于
② .children() 、 .parent()
.children() -------------- 标签所有⼦元素 ,不包含 ⼦孙级;.parent() -------------- 标签的⽗元素 (1个)
.parents() ------------- 标签所有的⽗元素
$("li").children().eq(2).css("display");
(2).next() ⽅法:获得元素其后紧邻的同辈元素
$("h2").css("background-color","#CCFFFF").next().css("display","block"); // 语法⽀持连写
(3).addClass():
注意:注意addClass()是添加CSS 类属性,attr() 是获取和设置 标签的属性。
作⽤ :添加 某类名的css样式/属性 -------------------------- 实际 上 添加了⼀个类属性。
特点:动态添加某个 类的css样式到指定 标签中,它的执⾏顺序是按照 添加后 css的权重 来执⾏的,依次类样式的 最好放在css样式的后⾯。
<script type="text/javascript">
$(function(){
$(".add").click(function(){
// addClass 给选中的元素添加class 可添加多个,使⽤空格隔开
$(".content").addClass("pro_mode pro_mode1 pro_mode2 pro_mode3");
})
</script>
(4) .removeClass():清除类名的css样式/属性
<script type="text/javascript">
$(function(){
$(".remove").click(function(){
// removeClass 给选中的元素移除class 可移除多个, 留空移除全部
$(".content").removeClass("pro_mode1 pro_mode2 pro_mode3");
$(".content").removeClass(); ---------------- 留空移除全部
})
})
</script>
(5) .click(function(){ }) 点击事件
<script type="text/javascript">
$(function(){
$(".remove").click(function(){ ---------------- 点击事件
$(".content").removeClass(); ---------------- 留空移除全部
})
})
</script>
(6)取标签的内容:.html() ------------ 取标签内容或者赋值标签内容
$(".nowSize").html(1111) ----------- 将 1111 赋值给该标签内容中
$(".nowSize").html() ----------- 获得此标签的内容
(7)根据属性名获取和设置标签的属性值:.attr()
注意 .attr() 与 prop()的区别
jquery在一个元素后追加标签它只能获取⼀个属性值
//attr ⽅法,获取或者设置标签的属性
console.log($("li").attr("data-value")) //获取元素属性名为"data-value" 的⼀个属性值(只获取⼀个)
$("li").attr("data-value","12345"); // 修改属性值 ----------- 修改所有
$("input").attr("type","checkbox")
(8)prop()查看与设置表单(<input>)的选中状态
⽤途:常⽤于获取设置选中状态,结果为bool值 ---------------- 例如 :单选 或多选 表单时 判断选中 状态
代码:
// prop 获取设置选中状态
$("input").prop("checked",true); //设置都选中
console.log($("input").prop("checked")) 获取元素是否被选中,如果选中为true 否为false
1、设置选中状态
($("input").prop("checked",true) ----------------- 改变按钮的选中状态
2、将按钮改变为不可点击:
$(".btn_next").attr("disabled","disabled")
(9)删除标签的属性:removeAttr()
// removeAttr 移除元素的某⼀些属性
$("li").removeAttr("data-value"); // 删除所有
四、jquery选择器:
1、普通的css 选择器:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论