jquery初学者
Interactive front-end web development starts with Javascript, and jQuery offers you a simple way to achieve a lot of common javascript tasks. With this article, I’ll hope to teach you the fundamentals of jQuery!
交互式前端Web开发始于Javascript，而jQuery为您提供了一种完成许多常见javascript任务的简单方法。 通过本文，我希望可以教给您jQuery的基础知识！
什么是jQuery？ (What is jQuery?)
jQuery is a JavaScript file that you include in your web pages, and it will let you find elements using CSS-style selectors, and then you can do some things to them using jQuery methods.
jQuery是一个包含在网页中JavaScript文件，它将使您可以使用CSS样式的选择器查找元素，然后可以使用jQuery方法对其进行某些操作。
<body>
<div id="page">
<h1 id="header">Header</h1>
</div><script src="jquery-1.0.js"></script><script> $('#header').on('click', function() {
$(this).hide();
});</script></body>This simple jQuery code selects the header with the header’s ID and adds an eventListener; if someone clicks this header, it will hide.
这个简单的jQuery代码选择带有标题ID的标题，并添加一个eventListener； 如果有人单击此标题，它将隐藏。
In jQuery we use $() as a shortcut for the JQuery() function.
在jQuery中，我们使用$()作为JQuery()函数的快捷方式。
检查页面是否准备就绪 (Checking if a page is ready)
jQuery has a ready() function to check if your page is ready to work with.
jQuery具有ready()函数来检查您的页面是否准备就绪。
$(document).ready(function(){
//IF READY THIS WILL BE EXECUTED});获取元素内容 (Getting the element content)
In jQuery we use the .HTML() and .text() methods to retrieve and update content of those elements.
在jQuery中，我们使用.HTML()和.text()方法来检索和更新这些元素的内容。
.HTML()
.HTML()
This method is used to retrieve only the HTML from an element. For example:
此方法仅用于从元素中检索HTML。 例如：
$('ul').html();This will return everything inside the ul tag in HTML.
这将返回HTML中ul标记内的所有内容。
.text()
。文本()
This method is used to retrieve the text from an element, For Example:
此方法用于从元素中检索文本，例如：
$('ul').text();If you want to get the contents of a form, so for example, an (<input>) tag, you should use (.val()).
如果要获取表单的内容，例如(<input>)标记，则应使用(.val())。
各种JQuery函数 (Various JQuery functions)
To manipulate elements on your website jQuery offers you a lot of functions/methods to change your site. Below you’ll find a list,
为了操纵您网站上的元素，jQuery为您提供了许多更改网站的功能/方法。 您会在下面找到一个列表，
- .append() | To append two string together .append()| 将两个字符串附加在一起
- .remove() | To remove the selected element from the page .remove()| 从页面中删除所选元素
- .replaceWith() | Replace one element with another .replaceWith()| 用另一个替换一个元素
- .hide() | To hide an element on your page .hide()| 隐藏页面上的元素
- .removeClass() | To remove a class from an element .removeClass()| 从元素中删除类
- .addClass() | To add a class to an element .addClass()| 向元素添加类
- .css() | To set a css property within JQuery .css()| 在JQuery中设置CSS属性
//GET ITvar backgroundColor = $('li').css('background-color');//SET IT$('li').css('background-color', 'blue');“每个”功能 (‘Each’ function)
With jQuery you can recreate the functionality of a loop on a section of elements by using the ‘.each()’ method. So let say you have a group of items, and you want to update them all at once. You can use a loop (.each()).
使用jQuery，您可以使用'.each()'方法在元素的一部分上重新创建循环的功能。 因此，假设您有一组项目，并且想一次更新它们。 您可以使用循环(.each())。
$('li').each(function() {
var id_list = this.id;
console.log(id_list
});This will log the id list out to the console.
这会将ID列表注销到控制台。
大事记 (Events)
In jQuery, the .on() method is used to handle all the events. Here you’ll find an example on how to use the .on() method.
在jQuery中，.on()方法用于处理所有事件。 在这里，您将找到有关如何使用.on()方法的示例。
$('li').on('click', function() {
$(this).addClass('newClass');
});The ‘click’ is the onClick event and will be triggered when this ‘li’ element gets clicked on.
“ click”是onClick事件，将在单击“ li”元素时触发。
jQuery events
jQuery事件
- Click (Mouse) 单击(鼠标)
- DblClick (Mouse) DblClick(鼠标)
- Hover (Mouse) 悬停(鼠标)
- Input (keyboard) 输入(键盘)
- Keypress (keyboard) 按键(键盘)
- Submit (Form) 提交表格)
- Ready (Document) 准备就绪(文档)
- Scroll (Browser) 滚动(浏览器)
- Resize (Browser) 调整大小(浏览器)
An example that hides the list when you hover over it
将鼠标悬停在列表上时将其隐藏的示例
$(function() {
var list = '';
var $listItems = $('li'); $listItems.on('hover', function() {
list = this.list;
$listItems.hide();
});});特效 (Effects)
Effects can enhance your website with transitions, animations, and movements. A few examples:
效果可以通过过渡，动画和移动来增强您的网站。 一些例子：
- fadeIn() 淡入()
- fadeOut() 消退()
- slideUp() 向上滑动()
- slideDown 滑下
- delay() 延迟()
$(function) {
$('h2').hide().slideDown();
});The animate() method
animate()方法
You can animate your properties by adding animation in CSS by Jquery. The structure of this method is as follows:
您可以通过Jquery在CSS中添加动画来为属性设置动画。 该方法的结构如下：
.animate({
[speed][easing][complete]
});Let's make it work:
让它工作：
$(function) {
$('li').on('click', function() {
$(this).animate({
opacity: 0.0,
paddingLeft: '+=50'
}, 300, function() {
$(this).remove();
});
});
});This block of code will let the text fade out and remove it from the website. By changing the CSS parameters of the opacity.
此代码块将使文本淡出并将其从网站中删除。 通过更改CSS参数的不透明度。
筛选器 (Filters)
Once you have a selection of elements you can filter some of them out to use them. How do we filter specific elements out of a list? The method .filter() will do the job.
一旦选择了元素，就可以过滤掉其中一些元素以使用它们。 我们如何从列表中过滤特定元素？ .filter()方法将完成此工作。
var $list = $('li');
var $newlist = $list.filter('.className').hide();结论 (Conclusion)
I hope you’re still reading until now if you do, great! Because I hope I was able to teach you the fundamentals of jQuery!
如果您愿意的话，我希望您仍然可以阅读，直到现在！ 因为我希望我能够教你jQuery的基础知识！
翻译自: https://levelup.gitconnected.com/the-ultimate-jquery-guide-for-beginners-in-2020-ecb2f81a31a3
jquery初学者
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
