jQuery总结

jQuery：jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库

 

概念1：

jQuery对象与Dom对象的区别

jQuery 的对象才可以使用 jQuery 的方法，如html()，val()

DOM 对象只能使用 DOM 的属性和方法，如innerHtml，value

 

概念2：

Dom对象与jQuery对象如何区分

$(selector)      // [Object Object] | JQuery 对象

$(selector)[0]    // [object HTMLDivElement] | DOM 对象

document.getElementsByTagName('div')[0]     //[object HTMLDivElement] | DOM 对象

 

注：jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

 

Jquery的一些基础用法：

1.获取或设置表单元素的值

$(selector).val()

a:获取或设置单行文本框，密码框，下拉框，文本域，隐藏域，数值框

常用：$("id选择器").val()

 

b:获取或设置单选按钮，复选框

获取复选框的值常用： 

例如：

var checked = [];

$('input[name='like']:checked').each(function() {

      checked.push($(this).val());

});

获取单选框的值常用：

例如：

$('input[name='sex']:checked').val();

设置复选框的值常用：

例如：

设置单选框的值常用：

例如：

$('input[name='sex'][value='男']').prop("checked",true);

设置复选框的值常用：

例如：

var refAnswer = row.RefAnswer;

if (refAnswer.length > 0)

{

           var arr = refAnswer.split(',');

for(var j=0;j<arr.length;j++)

{

      $("input[name='RefAnswer'][value=" + arr[j] + "]").prop("checked", true);

}

}

 

2.获取或设置其余普通Dom元素内的Html代码

$(selector).html()

注：有时也会用$(selector).text()，方法方法设置或返回被选元素的文本内容

 

3.jQuery中Ajax方法

$.post()     $.get()      $.ajax()

 

4.jQuery中的事件

jQuery中绑定事件

$(selector).click(function() { alert('点我干嘛～')； });

jQuery通过on绑定事件

$(selector).on("click",function() { alert('点我干嘛～')； });

 

 

附上jQuery简明的文档教程：https://www.jmjc.tech/less/87

jQuery中基本的选择器：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp