【質問】VisualforceでのjQueryの表記方法について

お世話になっております。

visualforceでのjQuery表記についての質問です。

下記のようなページがあるとします。
これはinputFieldに打ち込まれた値に100を追加した値がoutputFieldに即反映されて表示されるというページです。
javascriptを使用しています。
<apex:page >
　　<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" />
　　<script type="text/javascript">
　　　　function changeSample(form) {
　　　　　　inputval = parseInt(document.getElementById( '{!$Component.form.pb.pbs.in}' ).value);
　　　　　　outputval = document.getElementById( '{!$Component.form.pb.pbs.out}' ).innerHTML = inputval + 100;
}
　　</script>
　　<apex:form id="form" styleClass="form" >
　　　　<apex:pageBlock id="pb" styleClass="pb" >
　　　　　　<apex:pageBlockSection id="pbs" styleClass="pbs" >
　　　　　　　　<apex:inputField value="{!input__c}" onchange="changeSample(this.form);" id="in" styleClass="in" />
　　　　　　　　<apex:outputField value="{!output__c}" id="out" styleClass="out" />
　　　　　　</apex:pageBlockSection>
　　　　</apex:pageBlock>
　　</apex:form>
</apex:page>

このコードで問題無く動作します。

・・・が、このjavascript部分にjQueryを使用したいのです。
なのでその部分を下記のように書き換えました。
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).changeSample(function () {
inputval = parseInt($j('.in').val());
$j('.out').html() = inputval + 100;
}
</script>

すると、inputFieldの部分は問題無く動作しているよう（outputFieldの方だけを、jQuery表記ではなくすると、書き換え前と全く同じ動作になる為）なのですが、outputFieldの方は上手く動作しませんでした。

outputFieldの方は似たようなことを紹介しているサイトを参照しながら上手くいきそうなコードをいくつか試してみたのですが、どれも上手くいかなかったので、とりあえず失敗例のうちの１つを書き換えの例に挙げました。

お力を貸していただければ幸いです。
よろしくお願い申し上げます。