一点jquery复习

jquery获取select选中的值:

$(‘#brand‘).change(function(){
var brand=$("#brand  option:selected").val();
alert(brand);
});
<div class="col-sm-8 col-xs-12">
	<select name="brand" id="brand" class="form-control">
		<option value="0">请选择汽车品牌</option>
		<option value="2">A---奥迪(一汽)</option>
		<option value="4">B---宝骏(上汽通用五菱)</option>
		<option value="5">B---宝马(华晨)</option>
		<option value="7">B---北汽</option>
		<option value="8">B---奔驰(北京)</option>
		<option value="9">B---奔驰(福建)</option>
		<option value="11">B---本田(东风)</option>
		<option value="12">B---本田(广汽本田)</option>
		<option value="14">B---标致(东风)</option>
		<option value="17">B---别克(上海通用)</option>
		<option value="18">B---比亚迪</option>
		<option value="19">C---长安标致雪铁龙</option>
		<option value="20">C---长安汽车</option>
		<option value="21">C---长城汽车</option>
		<option value="22">C---长丰汽车</option>
		<option value="23">C---昌河</option>
		<option value="27">D---大众(上海)</option>
		<option value="28">D---大众(一汽)</option>
		<option value="29">D---东风汽车</option>
		<option value="30">D---东风裕隆</option>
		<option value="31">D---东南汽车</option>
		<option value="32">F---菲亚特(广汽)</option>
		<option value="34">F---菲亚特(南京)</option>
		<option value="35">F---丰田(广汽丰田)</option>
		<option value="37">F---丰田(一汽)</option>
		<option value="38">F---福特(长安)</option>
		<option value="40">G---广汽</option>
		<option value="41">H---哈飞</option>
		<option value="42">H---海马</option>
		<option value="43">H---华泰现代</option>
		<option value="44">J---江淮汽车</option>
		<option value="45">J---江铃</option>
		<option value="47">J---吉利(中国)</option>
		<option value="48">J---金杯</option>
		<option value="51">J---吉普(北京)</option>
		<option value="53">K---凯迪拉克(上海通用)</option>
		<option value="57">L---力帆</option>
		<option value="58">L---铃木(长安)</option>
		<option value="59">L---铃木(昌河)</option>
		<option value="63">M---马自达(长安)</option>
		<option value="64">M---马自达(海南)</option>
		<option value="66">M---马自达(一汽)</option>
		<option value="67">M---名爵(上汽)</option>
		<option value="71">Q---青年莲花</option>
		<option value="72">Q---奇瑞</option>
		<option value="73">Q---起亚(东风)</option>
		<option value="75">R---日产(东风)</option>
		<option value="77">R---日产(郑州)</option>
		<option value="78">R---荣威(上汽)</option>
		<option value="80">S---三菱(东南)</option>
		<option value="81">S---三菱(广汽)</option>
		<option value="85">S---斯柯达(上海大众)</option>
		<option value="86">T---特斯拉</option>
		<option value="87">T---天津一汽</option>
		<option value="88">W---沃尔沃(长安福特)</option>
		<option value="90">W---五菱(上汽通用)</option>
		<option value="91">X---夏利</option>
		<option value="92">X---现代(北京)</option>
		<option value="96">X---雪佛兰(上海通用)</option>
		<option value="97">X---雪铁龙(东风)</option>
		<option value="100">Y---一汽轿车</option>
		<option value="101">Y---一汽吉林</option>
	</select>
</div>

jquery字符串转json:

var obj = jQuery.parseJSON(msg);
alert(obj);

联动菜单:

$(document).ready(function(){
$(‘#submit‘).click(function(){
var name=$(‘#name‘).val();
var price=$(‘#price‘).val();
if(!name){
alert(‘名称不能为空‘);
$(‘#name‘).focus();
return false;
}
if(!price){
alert(‘价格不能为空‘);
$(‘#price‘).focus();
return false;
}
});
$(‘#brand‘).change(function(){
var brand=$("#brand  option:selected").val();
$(‘#series‘).empty();
$(‘#model‘).empty();
//alert(brand);
if(brand==0){
alert(‘请选择品牌‘);
}else{
$.ajax({
type: ‘get‘,
async: false,
url:‘/web/index.php‘,
data:‘c=platform&a=service&do=json&type=1&id=‘+brand,
success:function(msg){
var obj = jQuery.parseJSON(msg);
//alert(obj);
$("<option value=‘" + 0 + "‘>" + ‘请选择型号‘ + "</option>").appendTo(series)
$.each( obj, function(index,item){ 
        //console.log(item); 
		$("<option value=‘" + item.id + "‘>" + item.name + "</option>").appendTo(series)
    });  
}
});
}
});
$(‘#series‘).change(function(){
var series=$("#series  option:selected").val();
$(‘#model‘).empty();
//alert(brand);
if(series==0){
alert(‘请选择型号‘);
}else{
$.ajax({
type: ‘get‘,
async: false,
url:‘/web/index.php‘,
data:‘c=platform&a=service&do=json&type=2&id=‘+series,
success:function(msg){
var obj = jQuery.parseJSON(msg);
//alert(obj);
$("<option value=‘" + 0 + "‘>" + ‘请选择型号‘ + "</option>").appendTo(model)
$.each( obj, function(index,item){ 
        //console.log(item); 
		$("<option value=‘" + item.id + "‘>" + item.name + "</option>").appendTo(model)
    });  
}
});
}
});
});
时间: 2024-10-21 14:12:37

一点jquery复习的相关文章

jQuery复习节点知识(1、查看(获取)和设置属性)

两个关键字  1.attr   2.prop 主要要实现获得和设置两种方式 话不多说就直接上代码: 首先是获取方式的: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery复习节点知识(1.查看(获取)和设置属性)</title> <script type="text/javasc

jQuery复习知识点(2、创建节点 3、插入节点)

创建节点的语法: $(html); 插入节点的语法: 话不多说直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery复习知识点(2.创建节点 3.插入节点)</title> <script type="text/javascript"src="../j

01.一天一点JQUERY源码——定义函数

(function(window,undefined){ var rootjQuery, readyList, core_strundefined =typeof undefined, location =window.location, document =window.document, docElem =window.documentElement, _jQuery =window.jQuery, _$ = window.$, class2type = {}, //无用了 core_del

00.一天一点JQUERY源码——简目录

(function(window,undefined){ //21-91定义函数 jQuery= function(){...}; //96-283 给jQ对象添加方法和属性 //285-347 extend:jQ的继承方法(实例方法) //349-817 jQuery.extend():扩展一些工具方法(静态方法) //877-2856 Sizzle:复杂选择器的实现 //2880-3042 Callbacks:回调对象:函数的统一管理 //3043-3183 Deferred:延迟对象:对异

jQuery复习笔记

jQuery最大的好处:可以不用考虑浏览器的兼容性. 一.选择器 1.将普通对象封装成jQuery对象 var test = document.getElementById('zh-profile-ask-inner-list'); var jqtest = $(test); jqtest.get(0); 2.按id/tag/class/属性/组合查找 var test1 = $('#abc'); //按ID查找 var ps = $('p'); //按tag查找 var a = $('.red

jQuery复习—包装集

jQuery包装器 Part1:jQuery包装器的用法 一.通过包装器方法选择和包装将要操作的DOM元素 $()函数返回特殊的JavaScriopt对象(收集到了JavaScirpt元素并添加了拓展功能),它包含与选择器相匹配的DOM元素数组,这个数组中的元素是按照在文档中的顺序排列的.这个对象拥有大量有用的预定义方法,可作用于已收集的元素集合. 特点: (1):jQuery包装器方法,当执行完毕后(比如隐藏操作)会返回相同的一组元素,以便为另一个操作做准备. 例子:$("div.notLon

jQuery复习—事件

jQuery事件处理 一.就绪处理器事件的绑定方法 1.bind(eventType, data, hanlder) 创建一个函数,将其作为在匹配集中的所有元素上指定的时间类型的事件处理器 参数: eventType: (字符串)为将要创建的处理器指定事件类型的名称.可以使用空格分隔的列表指定多个事件类型 . data:(对象)调用者提供的数据,用来附加到event实例的data属性,以便处理器函数所使用.如果省略,则第二个参数为处理器函数 handler: (函数)将要创建为事件处理器的函数.

jQuery复习—DOM无关的jQuery实用函数

DOM无关的jQuery实用函数 一.实用函数的定义 定义在jQuery/$命名空间下不操作包装集的函数.一般来说这些使用函数要么操作除DOM元素以外的JavaScript对象,要么执行一些与Dom操作无关的操作. 二.操作JavaScript对象和集合 1.修建字符串  $.trim(value) 定义:删除传入的字符串开头和结尾处的空白字符,并返回修改后的结果 参数:value需要修改的字符串 返回值:修改后的字符串 $.trim($('#someFiled').val()); 2.遍历属性

jQuery复习—用动画和特效装扮页面(队列未整理)

用动画和特效装扮页面 一.显示和隐藏元素 设置元素的style.display属性(none/block/inline) 1.简单的改变元素显示和隐藏 (1).显示 show() (2).隐藏 hide() (3).切换状态 toggle() 2.渐变的显示和隐藏元素 (1).显示 show(speed,callback) (2).隐藏 hide(speed,callback) (3).切换状态 toggle(speed,callback) 参数说明: speed: 数字或者字符串.可以是若干毫