js和jQuery详细运用总结和对比

根据name属性获取标签对象$("input[name='username']")
$("ul>li")子选择器:获取ul下面的所有子标签li
alert()有阻塞效果
^=以什么开头,$=以什么结尾,*=含有什么

事件绑定
1.js中onclick是事件属性
document.getElementById("id").οnclick=function(){
    匿名函数体;
};
标签对象.value;标签对象.innerHTML/innerText;
2.在jQUery中click是方法,不同于js
$("#id").click(function(){
    匿名函数体;
});
标签对象.val();标签对象.html();标签对象.val("添加内容");
3.自己给自己绑定事件
$("#a").on("click",function(){
    匿名函数体;
});
4.自己给自己解绑事件
$("#a").off("click");
$("#a").off();
5.给别的标签绑定事件
$("id1").click(function(){
    $("id2").on("click",function(){
        匿名函数体;
    });
});

 

事件切换
$("id").toggle(fun1,fun2);

 

jQuery的css样式的操作
$("#id").css("fontSize","60px");
$("#id").css("font-Size","60px");和上面表示相同
$("#id").css({"fontSize":"60px","color":"green"});里面是json

 

入口函数(相当于页面加载,页面加载完毕后才执行函数体中的内容)
$(function(){
    函数体;
});
入口函数可以写多个,但是页面加载函数onload事件属性只有最后一个生效.

js和jQuery的区别和联系
区别:各自调用各自的属性和方法
联系:jQuery对象里面都是以数组的方式保存的(数组里面其实保存的原始的javascript对象)
js--jQuery:jQuery=$(js)
jQuery--js:js=jQuery[0]

 

jQuery的遍历
普通for和增强for
1.$.each(数组,
      function(index,ele){}
)
2.$(数组)/jq对象数组.each(
     function(index,ele){}
)

 

基本选择器:
1.id选择器$("id属性的值")
2.class选择器$(".class属性的值")
3.标签选择器$("标签名称")
4.组合选择器$("选择器1,选择器2,...")
扩展选择器
1.属性选择器
选择包含属性的标签对象:$("标签名称[属性名称]")
选择属性=xxx的标签对象:$("标签名称[属性名称='xxx']")
选择属性!=xxx的标签对象:$("标签名称[属性名称!='xxx']")
选择属性值包含xxx的标签对象:$("标签名称[属性名称*='xxx']")
选择属性值以xxx开头标签对象:$("标签名称[属性名称]^='xxx'")
选择属性值以xxx结尾标签对象:$("标签名称[属性名称]$='xxx'")
2.层级选择器
后代选择器$("div span")包括B的子级
子选择器$("div > span")不包括B的子级
3.过滤选择器
$("div:first")        选择第1个标签
$("div:last")         选择最后1个标签
$("div:even")       选择索引值为偶数的标签（第1，3，5，--标签）
$("div:odd")         选择索引值为奇数的标签（第2，4，6，--标签）
$(":header")   选择h1---h6标题标签
$("div:not('.one')")  选择class属性不为one的所有div标签
$("#father div:gt(3)")  选择索引值为大于 3 的 div
$("#father div:eq(3)")  选择索引值为等于 3 的 div
$("#father div:lt(3)")  选择索引值为小于 3 的 div
4.表单过滤选择器
$("#f1 input:enabled")选中可以使用input标签
$("#f1 input:disabled")选中不可以使用input标签
$("#f2 input:checked") 选中复选框或者单选按钮中被选中的标签
$("#f3 select option:selected")选中下拉选择框中的某些被选中的option标签

 

jQuery的dom操作:操作标签属性,样式,crud
1.标签对象.text()获取标签体内容
2.标签对象.html()获取包括标签和标签体
3.标签对象.text("<a href='#'>XXX</a>")不解析
4.标签对象.html("<a href='#'>XXX</a>")解析标签
5.标签对象.val();获取value值
6.标签对象.val("添加内容");设置value值
7.标签对象.attr("src");根据属性获取值(包括自定义属性)
8.标签对象.prop("src");根据属性获取值(必须固定属性)
9.标签对象.attr("src","../img/01.jpg");根据属性设置值
10.标签对象.prop("src","../img/01.jpg");根据属性设置值
11.标签对象.addClass("c")动态给标签对象添加class属性="c"
12.标签对象.removeClass("c")
13.标签对象.toggleCLass("c1","c2"))动态切换给标签对象添加class属性="c1"和"c2"
14.父标签对象.append(子标签对象)通过父标签追加子标签
15.子标签对象.appendTo(父标签对象)把子标签添加到父标签
css样式
display:none隐藏 block显示
复选框
checked="checked";checked=true/false;
jQuery对象.length属性