jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

qq_42214863

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架

本文链接：https://blog.youkuaiyun.com/qq_42214863/article/details/96313031

前端框架专栏收录该内容

1 篇文章

订阅专栏

引入及版本
提前加载

<script type="text/javascript">
//方法一
$(document).ready(function(){

});
//方法二
$(function(){
})
</script>

选择器
可以使用javascript的方法，也可以使用$(’’)来进行选择
样式操作

// 获取div的样式
$("div").css("width");
$("div").css("color");


//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

获取标签内容

1、html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

2、text() 取出或设置text内容，原样输入

// 取出文本内容

var $htm = $('#div1').text();

// 设置文本内容

$('#div1').text('<span>添加文字</span>');

3、attr() 取出或设置某个属性的值

// 取出图片的地址

var $src = $('#img1').attr('src');

// 设置图片的地址和alt属性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

和事件进行绑定

//方法一
$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this),用来指定该标签

})
//方法二
$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
//取消绑定
$(this).unbind('mouseover');
    });
});

特殊效果和使用方式

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

事件冒泡
什么是事件冒泡？子类和父类都对同一事件，定义了处理的方式，一些因素导致触发事件时，子类没有处理，这时父类将会捕获进行处理
什么是事件委托
无需获取具体的标签，直接对其父类标签及进行操作，即可，子类可获取同样的效果
添加和删除节点

创建节点

var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');
插入节点 
1、append()和appendTo()：在现存元素的内部，从后面插入元素

var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>
2、prepend()和prependTo()：在现存元素的内部，从前面插入元素

3、after()和insertAfter()：在现存元素的外部，从后面插入元素

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

$('#div1').remove();

ajax(和服务器进行交互)
ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源。
实现方式

//方法一（）
$.ajax({
   url: 'js/user.json',
   type: 'GET',
   dataType: 'json',
   data:{'aa':1}
   success:function(data){
       ......
   },
   error:function(){
       alert('服务器超时，请重试！');
   }
});
//方法二（post）
$.post(
   	"${pageContext.request.contextPath }/list",
   	"post",
   	function(data){
   		var result = "";
   		for(var i=0;i<data.length;i++){
   			result +="<tr>";
   			result +="<td>"+data[i].id+"</td>";
   			result +="<td>"+data[i].name+"</td>";
   			result +="</tr>";
   		}
   		$("#mytbody").html(result);
   	},
   	"json"
   	);
//方法三（get）
$.get(
   		"${pageContext.request.contextPath }/list",
   		"get",
   		function(data){
   			var result = "";
   			for(var i=0;i<data.length;i++){
   				result += "<tr>";
   				result += "<td>"+data[i].id+"</td>";
   				result += "<td>"+data[i].name+"</td>";
   				result += "</tr>";
   			}
   			$('#mytbody').html(result);
   		},
   		"json"
   	);

jsonp
本地存储

类别	说明
cookie	cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，
localStorage	存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。
sessionStorage	存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效

前端学习