jquery的简单用法一

最新推荐文章于 2023-08-12 10:47:33 发布

自学AI的鲨鱼儿

最新推荐文章于 2023-08-12 10:47:33 发布

阅读量2.2k

点赞数 3

分类专栏： # 学习简单的web 文章标签： web

本文链接：https://blog.csdn.net/qq_16555103/article/details/85299658

版权

学习简单的web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、js 中字符串可以与数字进行加减预算（原理：将数字转化为字符串进行拼接操作）

一、javascript的基本知识：

1、js 与 jquery的关系：

jquery 只是 js 方便操作 html节点的库。

2、DOM对象、DOM节点、jquery对象概念：

（1）DOM对象：

通过js的语法将 html标签转化为树状节点的对象叫做 DOM对象。

var objDOM=document.getElementsByTagName("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 代码最后解析
           $("div.content").css("color","red");   // 更改 类名为 content的div 的 文本颜色。
           $("div.content").css({"color":"red","font-size":"30px"});  // 同时赋值多组更改--------注意 “  ”不要忘记。
           $("div.content").css({"color":"red","border":"3px solid red"}); // 一个属性更改多个值时用 空格 隔开。
           $("div.content").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（）的区别

它只能获取一个属性值

 //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 选择器：

             //并集选择器
			$(".action,.choice,.last").css("font-size","30px");
			// 交集选择器
			$("p.action").css("font-size","30px");
			//全局选择器
			$("*").css({"margin":0,"padding":0})
			//层次选择器
			  //后代选择器
			$(".all li").css("color","white");
			  //子选择器
			$(".all > li").css("color","white");
			  //相邻元素选择器
			$(".choice+ul").css("color","red");
			  //同辈元素选择器
			$(".choice~ul").css("color","red");

2、属性选择器：

通过标签的属性，一定要与 css 中的属性区分开

实例：

3、基本过滤选择器：

1、索引为偶数或奇数的元素：

2、根据索引的值选取元素

3、去除某个选择器：

4、通过元素显示状态来选取元素：

5、选择器中转义字符 \ 的应用：

五、jquery中的事件：

注意： js 事件中执行的是匿名函数的内部，因此不要忘记写 function( ){ }

1、常见鼠标事件：

$("li").mouseover(function(){
    $(this).addClass("active")
    var this_index=$(this).index()  // index()  index方法,查找当前元素的下标
	$(".content > div:eq("+this_index+")").addClass("show") 
        // 因为this_index 这个变量在双引号中无法解析,所以使用拼接的形式
}).mouseout(function(){
    $(this).removeClass('active')
	var this_index=$(this).index()// 或者使用 .eq() 方法  例 $("li:eq(1)") 等同于 $("li").eq(1)
	$(".content > div").eq(this_index).removeClass("show")
})

2、键盘事件：

------------------ 动态展示 表单的 值
$("[name=username]").keyup(function(){
    var value=$(this).val() //使用 val() 方法  val() 用于获取 表单元素的value值
	console.log(value)
	$("p").html(value)
})

（2）键盘事件中的keycode：

$(function(){
    $("[name=username]").keyup(function(event){
				// event.keyCode 按下按键的时候每个按键对应的code ,
    console.log(event.keyCode)
    if(event.keyCode==27){
		$("[name=username]").val("")
	}else if(event.keyCode==13){
	    alert("确认要提交吗?")
	}
    })
})

3、表单事件------ 焦点事件：

$(function(){
			//focus 获取焦点事件  blur 失去焦点事件
    $("input").focus(function(){
    $(this).next().css("display","inline")
}).blur(function(){
    $(this).next().css("display",'none')
})
})

4、悬浮事件：hover -------- 用法与 mouseover不同：

区别与 mouseover 的用法：

5、绑定事件与阻止事件冒泡：on

// 使用 on 可以为 新添加的元素也绑定事件  $("要绑定元素的上级(一般为父级)").on("事件","触发事件的元素",function(){})
			$("body").on("mouseover","li",function(event){
				console.log(123)
				$(this).css("background","#ddd")
				event.stopPropagation() //阻止事件冒泡 
			}).on("mouseout","li",function(){
				$(this).css("background","none")
			})

六、jquery的动画效果：

注意：以下特效都是控制元素显示与隐藏的动画

1、显示与隐藏元素------- show() 、 hide()

show（）、hide（）里面可以添加参数

2、切换元素的可见状态：toggle（）

toggle（）参数与 show（）相同

3、根据透明度淡入淡出显示与隐藏元素：

4、根据元素宽度改变显示与隐藏元素：

七、js中的正则表示式、. test() 的用法：

正则表达式： https://blog.csdn.net/qq_16555103/article/details/84064565

注意：js 中正则表达式需要在两端加 / /

(1) 正则中test的用法：

function passWord_func(){
		var passWord_match=/^[a-zA-Z0-9]{4,10}$/;    // 正则表达式两端 加 / /
		var passWord=$("[name=passWord]").val();
		if(passWord_match.test(passWord)){        
			$("[name=passWord]").next().html("√").addClass("pass")
			return true
		}else{
			$("[name=passWord]").next().html("×").addClass("error")
			return false
		}

七、部分数据流后台交互 ajax ：

注意：区分表单 form 提交与 ajax 加载的区别，form 提交需要整个网页刷新，而 ajax 是局部数据流交互，不需要刷新整个网页。

特点：通常ajax 是jquery 的内置方法，因此使用 ajax 前需要引入jquery库。

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

<script type="text/javascript">
$("div.button").children().click(function(){
    alert("是否确认加载数据")
               //  ajax 执行的 参数 , url type dataType 通常是必须有的
    $.ajax(           --------------  $ 相当于 jquery ,即调用 jquery中的方法
          {           --------------- 传入的数据 是一个 js的对象,不过 key 不需要加 " "
            url:"./json数据文件/man_money.json",     ---------- 交互后台请求的地址
            type:"get",                             ---------- 请求方式
            data:{},                                ---------- 请求时传入后台的参数
            dataType:"json",                         ---------- 接收后台返回数据后的处理方式,普通文本用 "text"
            success:function(data){      ------------ 请求成功后 执行函数 , data是 后台返回的形参 
                server_data=data;
                console.log(server_data);
		      }
           )
	})
</script>

自学AI的鲨鱼儿

关注

3
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
jquery的简单用法一

1、js 中字符串可以与数字进行加减预算（原理：将数字转化为字符串进行拼接操作）一、javascript的基本知识： 1、js 与 jquery的关系： jquery 只是 js 方便操作 html节点的库。 2、DOM对象、DOM节点、jquery对象概念：（1）DOM对象： ...
复制链接

扫一扫