js与jquery简单使用

最新推荐文章于 2023-05-12 21:16:46 发布

tnblog技术分享～

最新推荐文章于 2023-05-12 21:16:46 发布

阅读量1k

点赞数

分类专栏： js/css/html/ps

本文链接：https://blog.csdn.net/aojiancc2/article/details/17419361

版权

js/css/html/ps 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一：页面加载事件

$(document).ready(function(){

});

文档加载完后的事件不包括图片

$(function(){........})

一般都需要在这两个事件里边去写方法，不然页面元素没有加载完成，

使用jquery无法获取元素对象

二：绑定事件

$('#f').click(function(){
alert("aaa");
});

$('#f').bind('click', function() {
alert("sdfsdfdsf");
});

给多个对象绑定事件

$("#city").add("#District").add("#Street").change(function () {
hostlist.searchbyp();
});

四:Jquery ajaxForm

配置属性

 var options = {
            type: "post",
            url: "../Login/GetLogin",
            success: function (data) {
                           }
        };
        $('#form').ajaxForm(options);

然后在使用 $('#form').submit();提交表单

使用ajaxForm相比ajax方式可以少一个参数项，简洁一点

五：表单序列化

1:序列化成字符串

$("#myForm").serialize()

username=sdf&password=134

注意：表单的里边是要name属性不是id

2:序列化成数组

$("#myForm").serializeArray()

但在使用asp.net作为后台用ajax需要序列化成json的字符串

jquery插件序列化成json字符串

$("#myForm").serializeJsonStr()

效果{'username':'sdf','password':'123'}

六：通过方法名调用方法

eval("ww()");
eval("ww")();

七：操作css

$(obj).css("background", "url(images/3.png)");

$("#ajtr").css("visibility", "visible");

$("#aa").attr("class","p1"); //设置样式为p1

八：传递this对象

index.jump = function (obj)
{
$(obj).css("background", "url(images/3.png)");
}

<a οnclick='index.jump(this)'>aaaaa</a>

$(document).ready(function(){
    $('#selectid').change(function(){
        alert($(this).children('option:selected').val());  //弹出select的值
    });
})

九：解决中文乱码

encodeURI

url: encodeURI('/Home/A?type=公告'),

十：jquery与dom对象相互转化

1:dom对象转jquery

var jqueryobj = $("<a >YS 1</a>");

2：jquery转dom

var dom = jqueryobj[0];或者var dom = jqueryobj.get[0];

取outerHTML

dom .outerHTML

注意：如果直接弹出dom ,dom对象的命名有点奇怪如果是a标签弹出来的就只是href，否者就是空

十一：jquery获取outerHTML

1:先转化成dom节点在使用outerHTML

var elemstr = $("#" + name)[0].outerHTML;

2:扩展方法

jQuery.fn.outerHtml = function() {
return $("<p></p>").append(this.clone(true)).html();
}

十二：跳转

1:本页面跳转

location.href="......";

2：打开一个新的页面

var obj = $("<span href='#' style='text-decoration:underline;cursor:pointer;text-decoration:none;'>YS 1</span>"); obj.attr("onclick", "javascript:window.open('http://www.shsict.com/as/query/search/com_user.jsp')");

十三：按回车实现登陆

$(function () { document.onkeydown = function (e) { var ev = document.all ? window.event : e; if (ev.keyCode == 13) { users.Login();调用登陆方法 } } });

十四：常用选择器

$('#dg6').parent().find("div .datagrid-header-check").children("input[type='checkbox']").eq(0).click(); $('#dg6').parent().find("div .datagrid-header-check").children("input[type='checkbox']").eq(0).attr("checked", true);

updateBg = function (thisName) { $(thisName).parent().find("a").removeAttr("class"); $(thisName).addClass("cur"); }

$('#dg6 a');

获取兄弟节点:

$('#id').siblings() 当前元素所有的兄弟节点$('#id').prev() 当前元素前一个兄弟节点$('#id').prevaAll() 当前元素之前所有的兄弟节点$('#id').next() 当前元素之后第一个兄弟节点$('#id').nextAll() 当前元素之后所有的兄弟节点这三个方法都可以添加选择器，给出选择条件，就能找到你指定的兄弟节点了。

十五：jquery循环

1:for

$("#test td").each(function (index) {
var aa = $(this).children().eq(index - 1).val();
alert(aa);
});

$.each(dataObj, function (index) {

var item = dataObj[index];
alert(item.Carrier);
alert(item.Qyport);
alert(item.Number);
});

十六：比较时间

将这两个字符串转换为Date类型，就可以直接比较大小了
function toDate(str){
var sd=str.split("-");
return new Date(sd[0],sd[1]-1,sd[2]); //注意需要在月份上减一，因为js的月份是从0开始的
}
var d1=toDate("2001-2-2 ");
var d2=toDate("2001-2-3");
alert(d1>d2);