web端 jquery的使用及详解
1.什么是Jquery?jquery是一个javaScript函数库jquery是一个轻量级的“写的少 做的多” 的javaScript库为什么使用jquery目前网络上有大量的开源js框架，但是jquery是目前最流行的js框架，而且提供大量的很多大公司都在使用Jqueryjquery是否适用于所有的浏览器？jquery团体知道js在不同浏览器中存在着
·
1.什么是Jquery?
jquery是一个javaScript函数库
jquery是一个轻量级的“写的少 做的多” 的javaScript库
为什么使用jquery
目前网络上有大量的开源js框架，但是jquery是目前最流行的js框架，而且提供大量的
很多大公司都在使用Jquery
jquery是否适用于所有的浏览器？
jquery团体知道js在不同浏览器中存在着大量的兼容性问题，目前jquery兼容所有浏览器，包括
interinet Explorer 6!
3.jquery语法
jquery语法是通过选取HTML元素，并对选取元素执行某些操作‘
基础语法：$(selector).action()
实例：
$(this).hide() --- 隐藏当前元素
$("p").hide() ---- 隐藏所有段落
$("p .test").hide() --- 隐藏所有 calss=“text”的段落
$("#test").hide() -- 隐藏所有 id="test"的元素
4.jquery选择器
选择器允许您对html元素组或单个元素进行操作
选择器基于元素的id 类 类型 属性 属性值等 查找html元素，它基于已经存在的css选择器，
jquery中所有选择器都以美元符号开头：$()
元素选择器
jquery元素选择器基于元素名选取元素
在页面中选取所有<p>元素：
$("p")
实例
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
#id 选择器
jquery #id选择器通过html元素的id属性选取指定的元素
页面中元素ID应该是唯一的，所以您要在页面中选取唯一的元素需要通过 id 选择器
$("#test")
实例
当用户点击按钮后，有 id="test" 属性的元素将被隐藏：
实例
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
class选择器
jquery类选择器可以通过指定的class查找元素
语法： $(".test")
实例
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
5.什么是事件
页面对不同访问者的相应叫做事件
事件处理程序指的是当html中发生某些事件时调用的方法
实例：
在元素上移动鼠标
选取单选按钮
点击元素
常用的jquery事件方法
$(document).ready()： 方法允许我们在文档完全加载完之后执行函数
click() :当按钮点击事件被触发时候回调用一个函数，该元素在用户点击
html元素时执行
实例
$("p").click(function(){
$(this).hide();
});
dblclick()：当双击元素时，会发生dblclick事件
实例
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()： 当鼠标指针穿过元素时 ，会发生mouseenter()事件
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mouseleave（）：当鼠标指针离开元素时，会发生mouseleave事件
实例
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件
实例
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
mouseup() ：当元素在松开鼠标按钮时，会发生mouseup事件
实例
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
hover(): 用于模拟光标悬停事件
当鼠标移动到元素上时，会触发指定的第一个函数（mouseenter）
当鼠标移出这个元素时，会触发指定的第二个函数（mouseleave）
实例
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
focus（）: 当元素获得焦点时，繁盛focus事件，
当鼠标点击选中元素或通过tab键定位到元素时,该元素就会获得焦点，
focus（）方法触发focus事件,
实例
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
blur()：当元素失去焦点时，发生blur事件
实例
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
6.jquery效果
1） 隐藏显示
jquery hide(） 和 show()
通过jquery，您可以使用hide()和show()方法来隐藏显示html元素
实例
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
jquery toggle()
通过jquery 您可以使用 toggle()方法来切换hide()和show()方法
显示被隐藏元素 并隐藏显示元素
实例
$("button").click(function(){
$("p").toggle();
});
7.jquery获取
获得内容
text(): 设置或返回所选元素的文本内容
html()：设置或返回所选
val(): 设置或返回表单字段的值
实例
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
实例
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
获取属性 attr()
attr() 方法是用于获取属性值的
实例
$("button").click(function(){
alert($("#w3s").attr("href"));
});
设置内容和属性
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
实例
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
设置属性attr（）
jquery attr()方法也用于设置/改变属性值
实例
$("button").click(function(){
$("#w3s").attr("href","//www.w3cschool.cn/jquery");
});
8.jquery 添加元素
添加新的html内容
我们将学习用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素内部的结尾插入指定内容
- prepend() - 在被选元素内部的开头插入指定内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
append()方法： 在被选中的元素结尾插入内容
实例
$("p").append("Some appended text.");
jquery prepend()方法 ： 在被选中元素的开头插入内容
实例
$("p").prepend("Some prepended text.");
jquery after(）和 before（)方法
jquery alter（）方法在被选元素后插入内容
juqery before()方法在被选元素之前插入内容
实例
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
9.jquery删除元素
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
jquery remove(）方法： 删除被选元素及其子元素
实例
$("#div1").remove();
jquery empty（）方法
juqery empty()方法删除被选元素的子元素
实例
$("#div1").empty();
过滤被删除的元素
remove()方法可以接受一个参数，允许你对被删元素进行过滤
实例
$("p").remove(".italic");
10.jquery css类
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
addclass(）方法
如何向不同的元素添加class属性， 当然在添加类时。你也可以选取多个元素
实例
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
removeClass(）方法
如何在不同的元素中删除指定得class的属性
实例
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
toggleClass（）方法
如何使用jquery toggleClass()方法，该方法对被选元素进行添加/删除类的切换
实例
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
jquery css（）方法
设置或返回一个样式或多个样式属性
实例
$("p").css("background-color");
实例
$("p").css("background-color","yellow");
实例
$("p").css({"background-color":"yellow","font-size":"200%"});
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)