大连做网站整理jq核心知识点整理
文件作者:admin 录入日期:2015-7-21


(1)定义语法:

$(function(){
 

})

 

(2)变量对象:
$(对象名)
如:

获取一个jquery对象
var $btn=$("button");

注意:jquery对象是一个数组
访问$btn[0] 第一个按钮

 

(3)选择器:

#id ID类型


class 类


element 标签 
注标签当选择器时,不要加"" 如 $(body).click(){..}


* 所有


#id,class,element 同时选择多个元素


 
例子:

$(function(){

   $("#btn1").click(function(){
 alert("提示内容"); 
    }); 
})

(1)使用了id选择器#btn1
(2)为选择器对象添加一个click事件
(3) $("#btn1").click(function(){....});
响应函数代码写在function中

如: $(选择器).css("CSS属性","CSS值")


-------------------------------------------------------- 

(4)层次选择器:

$("父 子") --->选择父元素所的所有子元素

如: $("body div") body 后的所有div都有效

 

$("父>子") --->选择父元素直接子元素

如: $("body>div") body 后的直接子div有效

 

$("兄+弟") --->选择兄元素直接紧邻着弟元素

如: $(".one+div") .one这个类后的下一个div不含弟的儿子
注意:这个选中的只能是直接紧挨着的div

如果不是紧挨着的不得用 $(".one").nextAll("div").css(...)

以下是选中第一个div 元素
$(".one").nextall("div:first").css(...)

 


$("兄~弟") --->选择兄元素后弟元素

如: $(".one~div") .one这个类后的所有兄弟元素。


$(".two").siblings().css("background","#000000");
类是two 下面所有兄弟,前后都有,上面的只是后面兄弟.
$(".two").siblings("div") 所有是div的子元素.


--------------------------------------------------------
(5)基本过滤选择器

注意: 过滤选择器以 : 开头 如 div:first .one:first

语法1:

 $("选择器:first").css(...)
语法2:
 
 $("选择器").first().css(...)

特殊:not

 $("选择器").not(".two").css(...)
 除了.two这个类的选择器


(1)eq("数值")等于 数组索引 0开始

(2)next() nextAll()

$("选择器").nextAll("span") 只找当前元素以后是span的

(3)prev() 上一个     prevAll()上面所有同胞
每个元素之前的所有同辈元素,

 

(4)nextUntil() 和 prevUntil()
方法返回介于两个给定参数之间的所有跟随的同胞元素。
$("h2").nextUntil("h6");h2> 与 <h6> 元素之间的所有 同胞 元素
注意: 不包含 h2 和 h6
--------------------------------------------------------
 
(6)内容过滤选择器

$("选择器:contains(文本内容)").css(......)
从选择器中找出当前的搜索引内容
例:$("div:contains('di')").css()
查找div内容为di 的设置css

 

$("选择器:empty").css(......)
从选择器中找出当前的搜索引内容
例:$("div:empty").css()
查找div内容为空的设置css

 


$("选择器:has(选择器)").css(......)
从选择器中找出当前选择器的直接父元素
例:$("div:has(.two-two)").css()
查找设置类为two-two的直接父元素


另一种用法:
$("选择器").has(选择器).css(......)
语法:包含特定元素的后代的集合

$('li').has('ul').css('background-color', 'red');
解释: 选择li 下面的ul中的所有元素

 

非空元素(就是里面还有内容的div span 等):

$("选择器:parent").css(......)


--------------------------------------------------------
(7)可见性过滤选择器

设置可见的选择器:
$("选择器:visible").css(......)
$("div:visible").css("background","#0000ff");


设置不可见的选择器:
$("选择器:hidden").css(......)
$("div:hidden").show(3000).css("background","#ff00ff");


--------------------------------------------------------
(8)属性过滤选择器

$("选择器[属性]").css(......)

$("选择器[属性=值]").css(......)

$("选择器[属性!=值]").css(......)

例子:
$("div[title!=test]").css("background","#00ff00");

<div title="test"> </div>

--------------------------------------------------------
(8)子元素过滤选择器

$("选择器 :nth-child(2)").css(......)
注意:选择器名称与:nth之间是有空格的.
索引是从 1 开始的.

 

$("选择器 :first-child").css(......)
$("选择器 :last-child").css(......)
设置选择器中第一个子元素和最后一个子元素
例:$("div :last-child").css("background","#00ff00");

 


$("选择器 :only-child").css(......)
设置选择器中只有一个子元素的
例:$("div :only-child").css("background","#00ff00");

 


--------------------------------------------------------
(8)表单过滤选择器

$(":属性名:属性名").val("值")
$(":text:enabled").val("大洋网络")
通过属性名来设置相关的控件

 

:checkbox就是一个选择器.
var $num=$(":checkbox[name=dl]:checked").length;      alert($num);


列表框:

$("select :selected").length
选中的是select的option子节点所以要有空格


对选择器是数组的进行遍历
$("选择器").each(function(){
 循环中可以使用 this.value; 来取值
})


总结以上:
定义一个变量接受一个jquery数组
var $btns=$(":button");
开始对数组中的元素进行遍历
$btns.each(function(){this.value}

jquery 对象是使用$()保证dom对象后产生的对象
$(this).val()

 

jquery的几个方法:
(1)val(); 设置或获取值

 $(选择器).val()获取
 $(选择器).val(值)设置值

(2)attr();设置或获取属性值

 attr(属性名,值) 设置

 attr(属性名 获取


(3)each(): 对JQuery对象进行遍历,其能数为 funciton,函数
    内容用this来获取正在被操作的对象.

 


---------------------------------------------------------
jquery 中 DOM 操作


一、查找节点

(1)操作文件节点,使用text()方法:

$("选择器").text()读

$("选择器").text("内容")写


(2)操作属性结点,使用attr()方法:

$(选择器[属性名=值]).attr("对象的属性名")
如:
$(#id[name='username']).attr("value")


设置属性:

 $(选择器[属性名=值]).attr("对象的属性名","值")

 

二、创建节点

$():$(html)

 

 

1、创建节点

语法:$(html)

例子:返回对应节点的jquery对象

$("<li id='one'>大洋</li>")

 

2、添加节点

追加到最后
appendTo: 将前面的加到后面
append: 将后面加到前面

加到第一个
prependTo:
prepend:

 

选择性插入
insertAfter
after

insertBefore
before

$("#city").insertAfter($("<li id='one'>大洋</li>"))

 


例子:
(1)创建<li id="one"> 大洋</li>

(2)将li 添加到#city中

$("<li id='one'>大洋</li>").appendTo($("#city"))
$("#city").append($("<li id='one'>大洋</li>"))

 


-------------------------------------------------------------
   删除节点

(1)remove(): 删除指定的节点和子节点
例:
$("#city li").click(function(){
  $(this).remove();
})


(2)empty(): 清空节点

$("#city").empty();


-------------------------------------------------------------
   复制节点
(1)clone()复制节点:
  
(2)clone(true)复制节点同时也复制行为

注意:

(1)clone注意复制后的id属性.不能有两个ID
 

例子:
$("#bj").clone()
  .attr("id","bj2")
 .insertAfter($("#rl"));

 

   替换节点

(1)replaceAll():替换节点
替换的内容.relaceAll(被替换的内容);
$("<li>大洋网络</li>").relaceAll("#gsgg li:last")


(2)replaceWith();
被替换的内容.replaceWith(替换的内容);
$("#gsgg li:last").relaceAll($("<li>大洋网络</li>"))

-------------------------------------------------------------
  包裹节点(给节点加修饰)

(1)wrap():将所有元素单独加,

(2)wrapAll():将所有元素单统一加,
 
(3)wrapInner():将元素的 子内容 文本节点等包裹。

语法:

$(选择器).wrap("修饰标签")

例:
$("#gsgg li").wrapInner("<span style='color:#00ff00'><span>");

-------------------------------------------------------------
   属性操作
(1)html方法:

 $(选择器).html()读html内容
 
 $(选择器).html("html代码")写html内容
 例子:$(".main ul").html("<li>大洋</li>")
 
 

注意:focus()获取焦点 blur()失去焦点 defultValue默认值

$.trim("字符串");===>去掉字符串的空格

(2)val()获取值


$(function(){

   $("#gsgg").focus(

 $(function(){

  var val=$(this).val();//指的是#gsgg

 //this.defaultValue是表单的文本框默认值
 if(val==this.defaultValue){}
 

 }
  )

})

注意一个选择器两个事件可以写在一起:

例:

$(选择器).focus().blur()


  (2)设置列表框选择值:

 $("#xl").val([2,4]);

 选择<option value="2">高中</option>
      <option value="4">小学</option>

 

  (3)单选按钮:

 $(":radio").val([1])

 注意:单选按钮选择val得用数组.


 (4)复选框是一个数组必须用以下代码来获取

 $("复选框选择器").each(){$(this).val()}

-------------------------------------------------------------
   Jquery CSS样式

(1)hasClass():某元素是否有指定的类

$("选择器").hasClass("类名");
div中是否有这个类名的。


(2)removeClass移去样式
$("选择器").removeClass("类名");

 

(3)addClass添加样式
注意: 将调用代码加入到指定的选择器中
$("选择器").addClass("类名");

在CSS中把样式写好

 

(4)toggleClass()切换样式

$("选择器").toggleClass("类名");

 

(5)opacity属性设置通明度:
$("选择器").css("opacity") 获取
$("选择器").css("opacity",0.5) 设置

 

(6)offset()当前窗口位的方法:

 $("p").offset({top:100,left:0});

 $("p").offset().top();


注意:opacity()设置通明度
     offset():返回对象 top left 属性


-------------------------------------------------------------
  jquery 事件

(1)window.onload: 一个网页中只能有一个,都加载完

(2)jquery $(function(){})可以有多个,分别加载s
完整:
$(document).ready(function(){

})

缩写:
$(function(){

})


(3)使用 is()方法判定条件

   $("选择器").is(属性);

   例子: $("content").is(":hidden");

    

(4)bind() 绑定事件
语法:

$(选择器).bind("事件名","事件代码")

例:$("head").bind("click",function(){....})

 

(5)hover鼠标经过(悬停)
 
语法:

$(选择器).hover(function(){经过},function(){离开})
经过时指行第一个fucntion 离开执行第二function

 

(6)事件冒泡:

事件会按照DOM层次不断像上执行.

阻止事件连带 return false方法


(7)事件 pageX 和 pageY 属性
$("body").mousemove(function(对象名){

$("选择器").text(显示X: 对象名.pageX);
})


(8)移出事件unbind()
语法:
$(选择器).unbind("事件名")

$(选择器).unbind()
移去选择器中所有的事件

 

例:
$("gsgg").click() //添加事件
$("gsgg").unbind()//移出之前是的click


(9)one()方法只让某个方法执行一次.
语法:
$("选择器").one("事件",function(){执行内容})

 

 

 

 

 

 

 


 

文章来源: 大洋网络 大连网站建设 大连网站制作 分享到:

Copyright @ 2013-2018 Corporation dlwangluo.com,All rights reserved
客服热线:0411-86394861 手机:13019478259 版权所有 大连大洋网络工作室
技术支持:大洋网络 QQ:1123072971 网站地图 百度google地图
辽ICP备12011267号-1  本站关键字:大连做网站