jQuery中各种选择器
基本选择器:
$(\”#id/.class/tag\”)
元素选择器:JQuery元素选择器基于元素名选取元素
id选择器:id选择器通过HTML元素的id属性选取指定的元素
class选择器:类选择器可以通过指定的class查找元素
层次选择器:
$(\”#div1\”).parent();
.parents();
.children();
ancestor descendant 匹配所以后代元素
parent>child 匹配所有子元素
pre+next prev元素后的相邻元素
prev~siblings 元素后的所有兄弟元素
过滤选择器:简单过滤选择器
$(\”div:first/last/eq(索引)/even/odd\”);
:first 获取第一个元素
:last 获取最后一个元素
:even 获取索引值为偶数的元素 索引号从0开始
:odd 获取索引值为奇数的元素 索引号从0开始
属性过滤选择器:
$(\”[href]\”); $(\”[href=\’demo1.html\’]\”)
!= 属性值不是
^=\”http://\” 以http://开头的属性值的标签
$= 结尾
*= 包含
[attribute] 获取包含给定属性的元素
[attribute=value] 获取等于给定的属性是某个特定值的元素
[attribute!=value] 获取不等于给定的属性是某个特定值的元素
[attribute^=value] 获取给定的属性是以某些值开始的元素
[attribute$=value] 获取给定的属性是以某些值结束的元素
[attribute*=value] 获取给定的属性是包含某些值的元素
可见性选择器:
$(\”.divClass:hidden/visible\”);
:hidden 获取所有不可见元素 /type=hidden的元素
:visible 获取所有的可见元素
表单选择器
$(\”#loginForm:input\”);
:input 获取所有input textarea select和button元素
:text 选择所有单行文本框 即type=text的元素
:password 选择所有密码框 type=password
:radio 选择所有单选框 type=radio
:checkbox 选择所有复选框 type=checkbox
:enbaled 获取所有可用元素
:disable 获取所有不可用元素
:checked 选取单选、复选框中被选中的元素
:selected 选择下拉列表中被选中的元素
操作通过选择器获取到的标签/元素—赋值、取值操作
a、非表单标签
jq对象.text(\”值\”); 赋值的是HTML标签,不被解析,赋值内容原样显示
.html(\”值\”); 赋值的内容是HTML标签,会被浏览器解析
var geValue=jq对象.text();
b、表单标签
jq对象的表单标签.val(\”所赋值\”);
var getInput=jq对象.val();
操作—创建标签、添加标签、删除标签
创建: var tr=$(\”<tr></tr>\”);
添加: var table=$(\”#tableGoods\”);
table.append(tr); 追加到父标签中的子标签列表的后面
$(\”#tableGoods tr:eq(3)\”).before(tr) 现有第4行之前
after(tr) 现有第4行之后
子标签.appendto(父标签);
tr.appendto(\”#tableGoods\”);
父标签.preappend(子标签); 追加到子标签的前面
删除: jq对象.remove(); jq对象自身及子标签都删除
jq对象.empty(); 删除jq对象的子标签,jq对象还在
链式语法
a、jq对象.css(\”属性\”,\”属性值\”).css();
b、jq对象.addClass(\”类选择器名,类选择器名\”);
删除样式 jq对象.removeClass(\”类选择器\”);
jQuery遍历
.parent() 返回被选元素的直接父元素
.children() 返回被选元素的所有直接子元素
.siblings() 返回被选元素的所有同胞元素
.first() 返回被选元素的首个元素
.last() 返回被选元素的最后元素
jQuery实现AJAX效果
对原生JavaScript使用AJAX的封装。
3个函数实现AJAX
[code] $.get(\"url\",funcation(){ //回调函数 }); $.post(\"url\",data,function(){ }); $.ajax({ url:\"login\", method:\"post/get\", dataType:\"JSON\", data:v_dataa, success:function(jsonObj){ //解析参数jsonObj即可 }, failed:function(){ } });
$(function(){}) 和window.οnlοad=function(){}; 的区别?
a、加载的时间不同
b、window.onload 只能被调用一次 $(function(){})可以调用多次
(需要jar包的可以私信)