作用简介：
jQuery 是一个 JavaScript 库，它极大地简化了 JavaScript 编程，极大简化了DOM操作及事件处理。它通过CSS选择器定位元素，并将这些元素封装在特定JavaScript对象中，然后，开发者就可以更改元素或者给元素添加事件监听器。jQuery能够处理的任何工作，都可以用既有的JavaScript代码来完成，但jQuery的优势在于能够很好地解决跨浏览器支持的问题，并统一语法。
只有在页面完全载入之后才能使用jQuery。因为jQuery需要知道DOM结构的所有节点，所以完整的DOM必须处于内存中。所以常见的写法是这样的：
$(function() {
$('#greeting').html('Hello World Martian');
});
jQuery()函数即$()
jQuery有一个jQuery()函数，简写为 $()，是jQuery中最重要的函数。
它通常接受CSS选择器作为唯一的参数，返回一个新的jQuery对象，该对象指向选择器所匹配到的对应页面元素。所以说，CSS选择器是jQuery的运行基础。
jQuery函数返回一个jQuery对象，这是一个特殊的JavaScript对象，包含了一个匹配选择器而筛选出来的DOM元素的数组。这个对象具有许多预先定义的方法，可以用来操作所选元素。
使用举例：$("#animals").hide();
jQuery对象方法返回的也是jQuery对象，这就意味着我们可以将各种jQuery方法无限制地以方法链的方式连接在一起。
常用的方法举例：
-
hide()和show()方法，隐藏和显示用户界面元素的操作就变得简单许多。还可以通过toggle()方法来轻松切换元素的可见性。 -
我们通过
html()方法来获取并设置特定元素的内容 -
val()方法用来获取和设置表单字段的值，工作方式与html()方法完全相同 -
attr()方法用来获取和设置元素属性。 -
append()方法在一个已有元素后添加一个新的子元素 -
prepend()方法跟append()方法的工作方式是一样的，只不过prepend()方法在已有元素之前添加新元素。 -
wrap()方法封装（用另一元素容纳）指定jQuery对象里的所选元素。 -
通过使用jQuery函数来选定元素，可以轻易地移除其所有的子元素：
$("#animals").empty(); -
或者移除元素自身：
$("#animals").remove(); -
筛选元素：
filter()、not()var list = $( 'li' ); // 选择所有的li元素
// 过滤出含有highlight类的li元素
var highlighted = list.filter( '.highlight );
// 过滤出不含有highlight类的li元素
var not_highlighted = list.not( '.highlight );
事件操作
在我们的jQuery事件处理方法中，可以通过this关键字访问所要操作的元素。
事件处理方面，对于页面已有的元素，可以如下这样添加事件，click 之外的事件也都有相应的jquery方法，名字上就是JS事件名去掉on：
$("img").click(function(event) {
event.preventDefault();
//js代码
});
而如果是动态添加的元素，添加事件需要通过 on 方法：
$("div").on('click','img', function(event) {
event.preventDefault();
//js代码
});
JS代码执行顺序与dom渲染呈现
如果我们在文档的<head>标签中加载JavaScript代码，JavaScript代码就会立即被执行，如何这些代码涉及到dom操作或事件交互处理，这时候由于我们要交互的元素还不可用，因为它们还未被浏览器渲染，所以会出现不理想的情况。
为了避免这种情况，JS提供了document.ready()方法，使用如下：
document.ready(function() {
alert("Hi! I am a popup that displays when the page loads");
});
同样的，jquery 也提供了 ready() 方法。下面两种方式是等效的，后一种是前者的简写形式：
$(document).ready(function() {
alert("Hi! I am a popup that displays when the page loads");
});
$(function() {
alert("Hi! I am a popup that displays when the page loads");
});
我们往往通过将外部JavaScript脚本文件的调用代码放在</body>闭标签之前，来完全替代使用document.ready()的方式，只要没有脚本代码异步改变DOM，就不用担心这么做是否有问题。
不过，在无法控制脚本的加载顺序，或者元素将被无序创建的情况下，使用document.ready() 或者jquery 的 $()才是正确的选择。
更新于：2023-4-1
标签：jQuery,function,元素,入门,JavaScript,JS,ready,方法 From： https://www.cnblogs.com/idasheng/p/17278898.html