那些学些网址_jquery初学知识

时间:2024-06-06 21:34:44

http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html(ajax)
http://www.enet.com.cn/eschool/video/jQuery/(jquery)
http://www.cnblogs.com/zhangziqiu/tag/jQuery/(jquery网页)
http://www.verycd.com/topics/2772159/(PHP)
http://www.enet.com.cn/eschool/video/sqlmana/(sqlsever数据库操作)
http://www.enet.com.cn/eschool/esch_new/
http://demo.shopxx.net/admin/index.jsp

基本选择器--几年前学习用的

div:eq(1) 选择第二个div

div:le(4) 选择索引小于四的所有div

div:gt(3) 选择索引大于三后面所有的div

div:even 选择基数div

div:odd  选择偶数div

div:odd:not(.2) 选择偶数排除class为2的元素

:animated选择所有正在执行动画的所有div

:header 选择所有的标题元素

.2~input   选择class为2后面的同辈所有input元素

.2+input   选择class为2后面的同辈第一个input元素

.2>input   选择div下面同辈的所有input标签

.2  input   选择div下面的所有input标签

setTimeout('ssssss()',1000) 一秒钟调用一次sssss()这个函数

类容选择器

div:contains('2')  选择类容为2 的所有div

div:empty   选择类容为空 没有子元素的div

div:has(a)  选择类容包含a标签的div

div:parent  选择所有包含有类容的div

$("div:hidden").show();  选择所有隐藏的div 并显示出来

div:visible 选择所有可见的div

属性过滤器

div[id] 选择所有拥有id属性的div

$("#btn").click(function()
{ $("input[name='a1'][checked='checked']").each(function(i){
alert($(this).attr('checked'));//输出属性checked
})
})
选择id为btn的buttn按钮 点击它 查找所有input 含有name属性的
并且name="a1"的所有元素 并且选中 然后用循环遍历

div[title^='a']  title属性以a开头的所有div

div[title $='a']  title属性以a结尾的所有div

div[title *='ab']  title属性包含ab的所有div

div[id][title='3'][id='111'] 赛选有id属性的div 并且title='3' id='111'

子元素过滤选择器

$("ul>li:nth-child(2)") 选取ul下的第二个li

$("ul>li: first-child") 选取ul下的第一个li

$("ul>li:last-child")   选取ul下的最后一个li

select :selected  获取下拉框中的值
$("ul>li:only-child")   选取只有一个li的ul

表单对象属性过滤选择器

input:enabled   为可用的input标签

input:disabled 不可用的input标签

.div:hidden  表示隐藏的div并且class=div

.div :hidden 表示影藏的class为div下面的所有隐藏标签

表单选择器

.from1 :text 选择form表单下所有的单行文本框

.from1 :password 选取from表单下的所有密码框

创建节点

<ul id="tt"><li>sdfdsfds</li></ul>
var li1=$("<li>sdafasf</li>");
var li2 $("<li>sdaf是打发</li>");
$("#tt").append(li1).append(li2);

//加载在标签里面
$("#a1").append($("#b1").html())  把b1中的文本追加到a1文本后

$("#b1").append($("a1"))   把b1全部加载到a1后 包括标签

$("#a1").prepend($("#b1").html())  把b1中的文本追加到a1文本前

//加载到标签外面
$("#a1").after("#b1")  把b1 放到a1后面

$(#b1).insertAfter("#a1");把b1 放到a1后面

#("#a1").before($("b1")) 把b1 放到a1前面

//移除项
$("ul > li:eq(1)").remove(); 移除ul下索引为1的li标签

//清空项

$("ul1 >li[title="aa"]").empty();

//复制节点
只是单纯的复制 没有复制事件
$("#ul1>li").click(function(){
$(this).clone().appendTo("#ul2");
})
//将事件也复制过来
$("#ul1>li").click(function(){
$(this).clone(true).appendTo("#ul2");
})

$("#b1").appendTo($("a1"))   把b1全部加载到a1前 包括标签

//替换
$("#p").replaceWith("替换的类容")

#("替换的类容").replaceAll("#p")

包裹节点
$("#ul1").wrap("<div>把ul标签包裹在div里面 </div>")

$("ul").wrapAll("<div>把所有的匹配的元素包含在一个元素里面</div>")

$("#div1").wrapInner("<span>将div里面的类容放在span里面</span>")

属性的操作
attr(获得属性) attrRemove(删除元素属性)
$("#ul>li:eq(3)").attr("title");找到ul下第三个li并且获得title属性

$("#ul>li").attr("title","sss") 找到ul下的li并且加上title属性等于sss

设置多个属性 $("#ul>li").attr("title","sss").attr("class","ttt")

$("#ul>li").attr("title":"sss","class":"ttt","name":"yyy")

删除属性
$(#ul1>li).removeAttr("title"); 删除ul下所有li标签的title属性

添加样式
$("#ul1>li:eq(0)").attr("class") 获取样式

$("#ul1>li:eq(0)").attr("class","ddd dff")  class里加两个

$("#ul1>li:eq(0)").addClass("dd") 追加样式

移除样式
$("#ul1>li").removeClass(); 移除ul下li标签的全部样式

$("#ul1>li").removeClass("dd"); 移除ul下li标签的dd样式

样式切换
$(#btn1).toggle(funchtion()){第一次执行的},function(){第二次执行})交替执行

样式判断
$("#ul1>li:eq(0)").hasClass("functiongsize") 判断第一个li是否含有functionsize属性

$("keyword").focus(function(){  
if($(this).val()=="你好"){
$("#keyWord").focus(function(){$(this).val("").sttr("class","red");}) 得到焦点
}
}
if($(this).val.length<=0){
$("#keyWord").blur(function(){$(this).val("你好").sttr("class","ccc");}) 得到焦点
}

取得匹配子元素的集合
$("#did ul").children().css("brackground","red");

$("#sss").next();找到紧邻的后面元素

$("#p").prev().html(); 找到紧邻前面的元素

$("#p1").siblings()找到所有同辈的元素

$(document).bind("click",function(e){$(e.target).closest("li").css("color","red")})
选取当前点中的元素并将其改变颜色

$("#divcss").css({"color":"red","fontsize":"15px"})

设置透明度 :$("#div").css("opacity","0.5") 半透明

$("#div").offset().left 获取当前这个元素的相对偏移 (相对整个浏览界面)

(外层div加 position:relative)(内层div position:absolute绝对定位)
$("#div").position().left;

div 有个属性可以使其有滚动条 overflow:auto

$("#diva").scrollTop();拉动滚动条时对应的位置

设置偏移
$("#btn1").click(function(){$("#diva").scrollTop(150)})

jquery事件

$(function(){})文件加载完成后执行里面的类容(标签解析完了后执行)
$(window).load(function(){})图片加载完成后执行

折叠盒展开(cursor:pointer(鼠标移动到上面为手形))
绑定事件
$("#div").bind("click",function(){
if($(this).next().is("visible)){
   $(this).next().hide();
}else{
$(this).next().show();
}
})

移动上去显示 移开隐藏事件 mouseover

事件合并
$("#div").hover(function(){},function(){});鼠标移动上去执行前面一个 移开执行后面一个函数
$("#div").toggle(function(){},function(){})点击切换两个函数

移除事件
$("#div").unbind("事件名字");

事件冒泡
stopproopagation()阻止冒泡

阻止默认行为
$("#div").bind("click",function(e){e.preventDefault();})

change 当里面的项发生过改变时执行