创建jquery对象

$('<option />') 
$('<option>') 也是可以的
#$('<option />').get(0): <option></option>,创建了这样一个对象

#对比js的创建方式
var haskell = document.createElement('p');
haskell #<p></p>

text, html

#示例
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="book">Java &amp; JavaScript</li>
</ul>

#获取text和html
$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'

#修改text和html
var j1 = $('#test-ul li.js');
var j2 = $('#test-ul li[name=book]');
j1.html('<span style="color: red">JavaScript</span>');
j2.text('JavaScript & ECMAScript');

#可以修改一组节点
$('#test-ul li').text('JS'); //一个jQuery对象可以包含0个或任意个DOM对象，它的方法实际上会作用在对应的每个DOM节点上

#如果不存在id为not-exist的节点：
$('#not-exist').text('Hello'); // 代码不报错，没有节点被设置为'Hello'

css

#获取和修改css属性
var div = $('#test-div');
div.css('color'); // '#000033', 获取CSS属性
div.css('color', '#336699'); // 设置CSS属性
div.css('color', ''); // 清除CSS属性

#判断、删除和添加css属性
var div = $('#test-div');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class

显示和隐藏dom

var a = $('a[target=_blank]');
a.hide(); // 隐藏
a.show(); // 显示
a.toggle(); // 切换
a.slideToggle(); //滑动的形式切换

获取dom信息

//attr()和removeAttr()方法用于操作DOM节点的属性
// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 属性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属性
div.attr('name'); // undefined

//使用prop()方法
//<input id="test-radio" type="radio" name="test" checked value="1">
radio = $("#test-radio");
radio.prop('checked'); // true
radio.attr('checked'); // checked

//attr和prop:都是获取和设定属性的值，区别在于
attr的checked、selected、disabled,值为当下的值
prop的checked、selected、disabled,值为true或false

val实现取值和赋值

/*
<input id="test-input" name="email" value="">
<select id="test-select" name="city">
<option value="BJ" selected>Beijing</option>
<option value="SH">Shanghai</option>
<option value="SZ">Shenzhen</option>
</select>
<textarea id="test-textarea">Hello</textarea>
*/
var input = $('#test-input'), select = $('#test-select'), textarea = $('#test-textarea');
input.val(); // 'test'
input.val('[email protected]'); // 文本框的内容已变为[email protected]

select.val(); // 'BJ'
select.val('SH'); // 选择框已变为Shanghai

textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本区域已更新为'Hi'

添加dom

//添加dom方法，prepend, append, after, before
//示例
<div id="test-div">
  <ul>
    <li><span>JavaScript</span></li>
    <li><span>Python</span></li>
    <li><span>Swift</span></li>
  </ul>
</div>
//通过append添加到dom的最后
var ul = $('#test-div>ul');
ul.append('<li><span>Haskell</span></li>');
//通过prepend添加到dom的最前
var ul = $('#test-div>ul');
ul.prepend('<li><span>Haskell</span></li>');
//添加到某个节点的后面
var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');
//添加到某个节点的前面
var js = $('#test-div>ul>li:first-child');
js.before('<li><span>Lua</span></li>');


//除了接受字符串，append()还可以传入DOM对象，jQuery对象和函数对象
// 创建DOM对象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM对象:
ul.append(ps);

// 添加jQuery对象:
ul.append($('#scheme'));

// 添加函数对象:
ul.append(function (index, html) {
return '<li><span>Language - ' + index + '</span></li>';
});

删除dom

#通过remove删除
var li = $('#test-div>ul>li');
li.remove(); // 删除被选元素（及其子元素)
li.empty(); //从被选元素中删除子元素