您的位置：首页 > Web前端 > JQuery

jQuery

2019-06-08 23:48 1496 查看

jQuery

  • 三种工厂方法
  • 三、 jQuery(element)
  • this指针的作用
  • ajax的转换 ＆ json的体现形式
  • extend的扩充

    • 什么是jQuery

    jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。它是一个轻量级的javascript类库
    注1：就一个类“jQuery”，简写“$”

    jQuery优点

    总是面向集合 , 多行操作集于一行

    jquery的程序入口

    $(function(){
alert("hello");
})
    $(document).ready(function(){
alert("hello");
})

    $ (fn),$ (document).ready(fn)是等价的,那个代码在前面那个就先执行
    jsp的dom树结构加载完毕就调用方法

    而window.onload最后执行.jsp的dom树结构加载完毕,css,js第静态资源加载完毕后执行

    三种工厂方法

    一、选择器

    标签选择器
    $(“标签名”)

    id选择器
    $("#id")

    class选择器
    $("#class")

    包含选择器 E1 E2
    $(“span p”) 找到span里面的p

    组合选择器 E1,E2,E3
    $(“span”,“a”,“div”).click()同时找到这几个标签并给他们添加点击事件

    二、通过html创建jQuery对象 
    <script type="text/javascript">
$(function(){
$(":input[name='name1']").click(function(){
//再id=sel1的jquery实例上追加
$("#sel1").append("<option value='1'>湖南省</option>")
})
$(":input[name='name2']").click(function(){
//将"<option value='1'>长沙</option>"html  jQuery实例追加带id=sel2中
$("<option value='1'>长沙</option>").appendTo("#sel2 ")
})
</script>
<body>
<select id="sel1">
<option value="-1">---请选择---</option>
</select>
<select id="sel2">
<option value="-1">---请选择---</option>
</select>
<input type="button" name="name1" value="add1" />
<input type="button" name="name2" value="add2" />
</body>
    三、 jQuery(element)

    element：js对象，表示一个html元素对象
    js对象与jquery对象的相互转换

    //jquery对象转js对象
var $qu = $("#aa");
var qu = $qu.get(0);//第一种
var qu = $qu[0];//第二种
alert(qu.value);

var h2 = document.getElementById("h2");
alert(h2.value);
//js对象转jquery对象
var h22 = $(h2);
alert(h22.val());

    this指针的作用

    $(":input").click(function(){
//指的是事件源
alert(this.value);
$("a").each(function(index,item){
//this指的是当前元素
alert(index+","+$(this).html()+","+$(item).html());
})
})

    ajax的转换 ＆ json的体现形式

    Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
    和xml文档，同样也可以将json、xml转换成Java对象

    Map<String,String> stu = new hashMap<>();
stu.add("01","gd");
stu.add("02","zg");
ObjectMapper mapper = new ObjectMapper();//转为json的形式
System.out.print( mapper.writeValueAsString(obj));

    也可以将json对象转为java对象,在 用$.ajax的时候可以转为java对象

    var stu = $.pareJSON(str);
    <script type="text/javascript">
//相当于window.onload
$(function(){
//添加失去焦点事件
$("#iname").blur(function(){
var name = $("#iname").val();
//①$.ajax()
/*$.ajax({
url:"vname.do",//请求地址servlet
type:"post",//请求方式 默认为get
data:{iname:name},//参数key/value
dataType:"text",//预期返回的响应类型
success:function(str){//成功的回调函数
//alert(str);//弹出服务器给的响应
$("#sp").html(str);
},
error:function(){//失败的回调函数
alert("出错了");
}
})*/

//②$.post()
$.post("vname.do",{iname:name},function(str){
$("#sp").html(str);
})
})
})

//json对象的字符串体现形式
var a = {
sid:"s001",
sname:"zs"
}
console.log(a);
//json数组的字符串体现形式
var b =[1,2,3,4]
console.log(b);
//json混合模式的字符串体现形式
var c = {id:3,hobby:["a","c"]};
console.log(c);

</script>

    extend的扩充

    利用$.extend来进行值的扩充

    <script type="text/javascript">
$(function(){
//$.extend是用来扩充jquery类属性或者方法所用的
var json={
sid:'s001',
sname:'list',
hobby:['a','b','c','d']
}
var json1={
sid:'s002',
sname:'list1',
hobby:['a1','b1','c1','d1']
}

var json2={};
//用后面的对象扩充定一个对象
$.extend(json2,json2)
//	讲解扩充值覆盖的问题，之前以及扩充的属性值会被后面的对象所覆盖，如果后面有新的属性，还会继续扩充
$.extend(json3,json,json1)
})

    利用$.extend来写方法

    $.extend({
hello:function(){
alert('我来了');
}
})
$.hello(); //结果还是弹出了‘我来了’
    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航