扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这样:
成都创新互联公司专注于莱阳网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供莱阳营销型网站建设,莱阳网站制作、莱阳网页设计、莱阳网站官网定制、小程序设计服务,打造莱阳网络公司原创品牌,更为您提供莱阳网站排名全网营销落地服务。
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
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.');
}
可以看张晓菲的《锋利的jQuery》,重点是自己理解函数用法并自行实现一些常用的效果。
如果需要快速查阅可以用这个api,每个函数都附有简单的示例: (注:这个jQuery库的版本不是最新的delegate等函数在这儿查不到。欢迎补充别的api~)
jQuery侧重点就是选择器和基本的DOM操作,还有一些动画操作,但是js中非DOM操作的部分基本没有涉及。
其实jQuery的门槛很低,我在看jQuery的时候对原生js的东西也知之甚少,在看的过程中遇到不会的多求助搜索引擎,多尝试,当然最好做一下笔记。
测试代码推荐直接在jsfiddle上测试,左侧你可以自行选择需要的jQuery库版本:
//=======================
有一点需要注意,jQuery只是工具,jQuery学的再好也无法替代原生的js,比如jQuery翻遍了你也不会知道
JavaScript语言中共有几种基本类型
什么是原型
什么是闭包
什么是原型链,作用域链
js只有函数作用域,没有块作用域该怎么理解
之于上面的问题,需要再去阅读js的基础书籍:《JavaScript权威指南》,《JavaScript高级程序设计》,《JavaScript语言精粹》等
获取 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);
});
})
效果
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流