jquery笔记,jquery教程详解免费

jquery怎么获取当前元素的父元素

这样：

ul class="parent1"

    lia href="#" id="item1"jquery获取父节点/a/li

    lia href="#"jquery获取父元素/a/li

/ul

扩展资料：

注意事项

parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。

parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

可以看出parent的取值很明确，就是当前元素的父元素；parents则是当前元素的祖先元素。

div id='div1'

div id='div2'p/p

/divdiv id='div3' class='a'p/p/div

div id='div4'p/p/div

/div

相关问答

Q1: ajaxsubmit和ajaxform有什么区别

JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别

JQuery中的AjaxForm和AjaxSubmit使用差不多功能也差不多。很容易误解。

按照作者的解释：

AjaxForm

ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始

ajaxSubmit

马上由AJAX来提交表单。你可以在任何情况下进行该项提交。

option的参数

var options = {

target: '#output1', // target element(s) to be updated with server response

beforeSubmit: showRequest, // pre-submit callback

success: showResponse // post-submit callback

// other available options:

//url: url // override for form's 'action' attribute

//type: type // 'get' or 'post', override for form's 'method' attribute

//dataType: null // 'xml', 'script', or 'json' (expected server response type)

//clearForm: true // clear all form fields after successful submit

//resetForm: true // reset the form after successful submit

// $.ajax options can be used here too, for example:

//timeout: 3000

};

示例代码摘自：

ajaxForm

The following code controls the HTML form beneath it. It uses ajaxForm to bind the form and demonstrates how to use pre- and post-submit callbacks

// prepare the form when the DOM is ready

$(document).ready(function() {

var options = {

target: '#output1', // target element(s) to be updated with server response

beforeSubmit: showRequest, // pre-submit callback

success: showResponse // post-submit callback

// other available options:

//url: url // override for form's 'action' attribute

//type: type // 'get' or 'post', override for form's 'method' attribute

//dataType: null // 'xml', 'script', or 'json' (expected server response type)

//clearForm: true // clear all form fields after successful submit

//resetForm: true // reset the form after successful submit

// $.ajax options can be used here too, for example:

//timeout: 3000

};

// bind form using 'ajaxForm'

$('#myForm1').ajaxForm(options);

});

// pre-submit callback

function showRequest(formData, jqForm, options) {

// formData is an array; here we use $.param to convert it to a string to display it

// but the form plugin does this for you automatically when it submits the data

var queryString = $.param(formData);

// jqForm is a jQuery object encapsulating the form element. To access the

// DOM element for the form do this:

// var formElement = jqForm[0];

alert('About to submit: \n\n' + queryString);

// here we could return false to prevent the form from being submitted;

// returning anything other than false will allow the form submit to continue

return true;

}

// post-submit callback

function showResponse(responseText, statusText) {

// for normal html responses, the first argument to the success callback

// is the XMLHttpRequest object's responseText property

// if the ajaxForm method was passed an Options Object with the dataType

// property set to 'xml' then the first argument to the success callback

// is the XMLHttpRequest object's responseXML property

// if the ajaxForm method was passed an Options Object with the dataType

// property set to 'json' then the first argument to the success callback

// is the json data object returned by the server

alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +

'\n\nThe output div should have already been updated with the responseText.');

}

ajaxSubmit

The following code controls the HTML form beneath it. It uses ajaxSubmit to submit the form.

// prepare the form when the DOM is ready

$(document).ready(function() {

var options = {

target: '#output2', // target element(s) to be updated with server response

beforeSubmit: showRequest, // pre-submit callback

success: showResponse // post-submit callback

// other available options:

//url: url // override for form's 'action' attribute

//type: type // 'get' or 'post', override for form's 'method' attribute

//dataType: null // 'xml', 'script', or 'json' (expected server response type)

//clearForm: true // clear all form fields after successful submit

//resetForm: true // reset the form after successful submit

// $.ajax options can be used here too, for example:

//timeout: 3000

};

// bind to the form's submit event

$('#myForm2').submit(function() {

// inside event callbacks 'this' is the DOM element so we first

// wrap it in a jQuery object and then invoke ajaxSubmit

$(this).ajaxSubmit(options);

// !!! Important !!!

// always return false to prevent standard browser submit and page navigation

return false;

});

});

// pre-submit callback

function showRequest(formData, jqForm, options) {

// formData is an array; here we use $.param to convert it to a string to display it

// but the form plugin does this for you automatically when it submits the data

var queryString = $.param(formData);

// jqForm is a jQuery object encapsulating the form element. To access the

// DOM element for the form do this:

// var formElement = jqForm[0];

alert('About to submit: \n\n' + queryString);

// here we could return false to prevent the form from being submitted;

// returning anything other than false will allow the form submit to continue

return true;

}

// post-submit callback

function showResponse(responseText, statusText) {

// for normal html responses, the first argument to the success callback

// is the XMLHttpRequest object's responseText property

// if the ajaxSubmit method was passed an Options Object with the dataType

// property set to 'xml' then the first argument to the success callback

// is the XMLHttpRequest object's responseXML property

// if the ajaxSubmit method was passed an Options Object with the dataType

// property set to 'json' then the first argument to the success callback

// is the json data object returned by the server

alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +

'\n\nThe output div should have already been updated with the responseText.');

}

Q2: 学会了jquery能干什么知乎

可以看张晓菲的《锋利的jQuery》，重点是自己理解函数用法并自行实现一些常用的效果。

如果需要快速查阅可以用这个api,每个函数都附有简单的示例： （注：这个jQuery库的版本不是最新的delegate等函数在这儿查不到。欢迎补充别的api~）

jQuery侧重点就是选择器和基本的DOM操作，还有一些动画操作，但是js中非DOM操作的部分基本没有涉及。

其实jQuery的门槛很低，我在看jQuery的时候对原生js的东西也知之甚少，在看的过程中遇到不会的多求助搜索引擎，多尝试，当然最好做一下笔记。

测试代码推荐直接在jsfiddle上测试，左侧你可以自行选择需要的jQuery库版本：

//=======================

有一点需要注意，jQuery只是工具，jQuery学的再好也无法替代原生的js，比如jQuery翻遍了你也不会知道

JavaScript语言中共有几种基本类型

什么是原型

什么是闭包

什么是原型链，作用域链

js只有函数作用域，没有块作用域该怎么理解

之于上面的问题，需要再去阅读js的基础书籍：《JavaScript权威指南》，《JavaScript高级程序设计》，《JavaScript语言精粹》等

Q3: jquery 如何获取 checkbox的 选中个数

获取 checkbox的 选中个数可以直接使用如下jquery语法$("input[type='checkbox']:checked").length;

示例如下：

创建Html代码及css样式

div 

input type="checkbox" name="fruit" apple

input type="checkbox" name="fruit" orange

input type="checkbox" name="fruit" banana

input type="checkbox" name="fruit" watermelonbr

input type="button" value="I like these fruit!"

/div

div{width:500px;padding:20px;border:4px solid #ebcbbe;}

input{margin:10px 5px;}

jquery代码

$(function(){

$("input[type='button']").click(function() {

alert($("input[type='checkbox']:checked").length);

});

})

效果