JQuery

Q:jQuery 如何获取/选择元素

• 按 ID 选择元素

$( "#myId" );

• 按类名选择元素

$( "#myClass" );

• 按属性选择元素

//选择name属性等于first的input元素
$( "input[name='first_name']" );

• 按复合 CSS 选择器选择元素

$( "#contents ul.people li" );

• 按逗号分隔的选择器列表

$( "div.myClass, ul.people" );

• 按伪选择器

//选择网页中第一个a元素
$( "a.external:first" );
//选择表格的奇数行
$( "tr:odd" );
 
// 选择表单中的input元素
$( "#myForm :input" );
//选择可见的div元素
$( "div:visible" );
 
//选择除前三个以外的所有div元素.
$( "div:gt(2)" );
 
// 选择所有当前处于动画状态的div元素
$( "div:animated" );

Q:如何判断选择中是否有元素可用

```
if ( $( "div.foo" ).length ) {
	...
}
```

Q:jQuery 的链式操作是怎样的

如果您在选择上调用一个方法并且该方法返回一个 jQuery 对象，您可以继续在该对象上调用 jQuery 方法而无需暂停分号,这种做法成为链式操作

//找到div元素-->选择其中的h3元素-->选择第三个元素-->将内容改为h3
$('div').find('h3').eq(2).html('Hello');

Q:jQuery 如何操作元素

• 获取和设置元素信息

.html() – 获取或设置 HTML 内容。
.text()– 获取或设置文本内容；HTML 将被剥离。
.attr() – 获取或设置所提供属性的值。
.width() – 获取或设置选择中第一个元素的宽度（以像素为单位）为整数。
.height() – 以整数形式获取或设置选择中第一个元素的高度（以像素为单位）。
.position()– 获取一个对象，其中包含选择中第一个元素的位置信息，相对于其第一个定位的祖先。这只是一个吸气剂。
.val() – 获取或设置表单元素的值。

注意注意注意：更改将影响选择中的所有元素，如果只想更改一个元素，在调用 setter 方法之前在选择中指定该元素。

增:新元素直接传入jQuery的构造函数

$('<p>Hello</p>');;

$( "<li class=new list item</li>" );

$( "<a/>", {
    html: "This is a <strong>new</strong> link",
    "class": "new",
    href: "foo.html"
});

创建新元素时，它不会立即添加到页面中。有多种方法可以在创建元素后将元素添加到页面中。

// Getting a new element on to the page.
 
var myNewElement = $( "<p>New element</p>" );
 
myNewElement.appendTo( "#content" );
 
myNewElement.insertAfter( "ul:last" ); // This will remove the p from #content!
 
$( "ul" ).last().after( myNewElement.clone() ); // Clone the p so now we have two.

删除

.remove() //不保留被删除元素的事件
.detach() //保留
.empty() //不删除元素但是清空元素内容

复制

.clone()

移动

eg:选中了一个div元素，需要把它移动到p元素后面
思路1：div元素移动p元素后面 .insertAfter()

//返回div元素
　$('div').insertAfter($('p'));

思路2：p元素加到div元素前面.after()

//返回p元素
　$('p').after($('div'));

其他四种：

.insertAfter()和.after()：在现存元素的外部，从后面插入元素
.insertBefore()和.before()：在现存元素的外部，从前面插入元素
.appendTo()和.append()：在现存元素的内部，从后面插入元素
.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

其他：
https://learn.jquery.com/using-jquery-core/
https://www.jquery123.com/