Jquery基础知识

1.特点:
小巧
功能强
跨浏览器
插件

2.使用
实际是js文件
a) 复制js到WebRoot
b) 页面<script src="jquery.js" charset=""></script>

3.核心对象及常用方法和属性
a)名称
jQuery和$
用$找出来的对象叫jQuery对象
用document找出来的对象叫Dom对象

b)dom和jquery对象转换
jQuery对象.get(0) --->dom对象
$(dom对象)--->jQuery对象

c)jQuery对象方法
.show() 显示
.hide() 隐藏
.toggle() 显示或隐藏切换
$("div").hide();
$("#myid").show();
$(".myclass").show(100);


.size() 找到多少个对象
var n = $("div").size()

文本框赋值(value)
$("#myid").val(123);
.val()取值

层的内容.innerHTML/.innerText
$("div").html() ;
$("div").html(123);
$("div").html("<input type=button>");
$("div").text("<input type=button>");

样式 document....style.color="red"
$("div").css("color","red").css("font-size","18");
$("div").css({color:"red","font-size":18});
$("input").addClass("myClass");
$("input").removeClass("myClass");

删除
$("div").remove(); 删除所有div

添加
父加子: $("div").append("<input button>");
$("div").append( $("#myid") );
子加父
$("input").appendTo( $("div") );

对象属性
$("input").attr("checked",true);

去首尾空格:
$.trim(字符串)
$("div").each( function(i,obj){} );
$.post(url,function(x){});
$.post(url,{键:值},function(x){});
$.getJSON(url,function(x){//这里x已转成json了,不要用eval});

克隆
$("div").clone();

4. 选择器
a) 类选择器
<input type=text class="myclass">
$(".myclass") 找多个
b) id选择器
<input type=text id="myid">
$("#myid") 找一个
相当于:document.getElementById("myid")
c) 标记选择器 找多个
$("div,span")
相当于document.getElementsByTagName()
d) 表单选择器
$(":text") 所有文本框
$("input[type=text][value='']")

$(":radio") 所有单选框
$(":checkbox") 所有复选框
e) 表单属性选择器
$(":checkbox:checked")或$(":checked:checkbox")
$(":checked") 找所有选中(单选框和复选框)
$(":selected") 找所有选中列表框
f) 层级选择器
父找子 d找c
$("table").find("tr") //找子孙都可以
$("table>tbody>tr") 找所有tr
$("table>tbody>tr:first") 找第一行
$("table>tbody>tr").eq(0) 找第一行
$("table>tbody>tr:odd") 所有奇数行
$("table>tbody>tr:even") 所有偶数行

子找父
$("tr").parent()

找兄弟
$(a).next() 下一个
$(b).prev() 上一个

5 html里的ready方法
(a)$(document).ready(function () {} );
(b) $(function(){ });


6.
var temp_scrollHeight = $("div.overview_comments").attr("scrollHeight");
var temp_overview_top= $("div.overview_comments").css("top");
var temp_offsetHeight= $("div.viewport_comments").attr("offsetHeight");
temp_overview_top=-parseInt(temp_overview_top.replace("px",""));

取得title=badCommentNum的Div
$("div[title=badCommentNum]").html(data.badVoteNum);

Jquery ajax:

$("#badCommentDiv").live("click",function(){
var parameters = new Object();
parameters["courseId"] = courseId;
parameters["userId"] = "3";
$.post("voteComment/badVote.action",parameters,function(data) {
alert(data.msg);
if(data.success){
$("div[title=badCommentNum]").html(data.badVoteNum);
}
},"json");
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值